-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathYCluster.stories.ts
142 lines (128 loc) · 6 KB
/
YCluster.stories.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
import { Story } from '@storybook/vue';
import YCluster from './YCluster.vue';
export default {
title: 'DesignSystem/Layouts/Cluster',
component: YCluster,
};
export const Basic: Story = () => ({
components: { YCluster },
template: `
<y-cluster>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">Lorem</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">ipsum</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">dolor</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">sit</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">amet</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">,</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">consectetur</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">adipiscing</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">elit</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">,</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">sed</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">do</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">eiusmod</span>
<span style="background-color: #E7EFFF; border-radius: 3px; padding: 4px 8px;">tempor</span>
</y-cluster>
`,
});
export const Align: Story = () => ({
components: { YCluster },
template: `
<div>
垂直中央揃え（center、デフォルト）:
<y-cluster class="mt:1 mb:4">
<span style="background-color: yellow">コンテンツ<br>コンテンツ<br>コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ<br>コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
上揃え（flex-start）:
<y-cluster align="flex-start" class="mt:1 mb:4">
<span style="background-color: yellow">コンテンツ<br>コンテンツ<br>コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
下揃え（flex-end）:
<y-cluster align="flex-end" class="mt:1">
<span style="background-color: yellow">コンテンツ<br>コンテンツ<br>コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
</div>
`,
});
export const Justify: Story = () => ({
components: { YCluster },
template: `
<div>
左揃え（flex-start、デフォルト））:
<y-cluster class="mt:1 mb:4">
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
右揃え（flex-end）:
<y-cluster justify="flex-end" class="mt:1">
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
中央揃え（center）:
<y-cluster justify="center" class="mt:1 mb:4">
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
均等に配置（space-between）:
<y-cluster justify="space-between" class="mt:1 mb:4">
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
</div>
`,
});
export const Spacing: Story = () => ({
components: { YCluster },
template: `
<y-cluster space="12">
<span style="background-color: yellow">コンテンツ<br>コンテンツ<br>コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
`,
});
export const Tag: Story = () => ({
components: { YCluster },
template: `
<div>
<p class="mb:2">Clusterをul要素とし、子要素をli要素に。リストとしてマークアップ。</p>
<y-cluster tag="ul">
<li style="background-color: yellow">コンテンツ<br>コンテンツ<br>コンテンツ</li>
<li style="background-color: yellow">コンテンツ</li>
<li style="background-color: yellow">コンテンツ</li>
<li style="background-color: yellow">コンテンツ</li>
<li style="background-color: yellow">コンテンツ</li>
</y-cluster>
</div>
`,
});
export const Inline: Story = () => ({
components: { YCluster },
template: `
<div>
<y-cluster inline>
<span style="background-color: yellow">コンテンツ</span>
<span style="background-color: yellow">コンテンツ</span>
</y-cluster>
他要素と横並び可能
</div>
`,
});