@spaceone/design-system/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx

SpaceONE Design System

import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';
import PDynamicLayout from '@/data-display/dynamic/dynamic-layout/PDynamicLayout.vue';
import { argTypes } from '@/data-display/dynamic/dynamic-layout/story-helper';
import {i18n} from '@/translations'
import mock from '@/data-display/dynamic/dynamic-layout/mock.ts'

<Meta title='Data Display/Dynamic/Dynamic Layout/Html'
      component={PDynamicLayout} argTypes={{
    name: argTypes.name,
    options: argTypes.options,
    data: argTypes.data,
    onInit: argTypes.onInit,
}}/>


export const Template = (args, { argTypes }) => ({
    props: Object.keys(argTypes),
    components: { PDynamicLayout },
    i18n,
    template: `
      <p-dynamic-layout :name="name" type="html"
                          :options="options"
                          :data="data"
                          :type-options="{
                          }"
                          :fetch-options="{
                          }"
                           class="w-full"
                           @init="onInit"
            >
        </p-dynamic-layout>
    `,
    setup() {
        return {}
    }
});


## Html Type

<Canvas>
    <Story name="Playground" argTypes={{
        data: {
            name: 'data',
            type: {name: 'string'},
            defaultValue: '',
            control: {
                type: 'text'
            }
        }
    }} args={{
        type: 'html',
        data: mock.html.data,
        options: mock.html.options,
    }}>
        {Template.bind({})}
    </Story>
</Canvas>

<ArgsTable story="Playground"/>

<br/>
<br/>