Skip to content

Commit c0d0104

Browse files
c0brac0bra
authored
feat(Field): Addons, grouping, and positioning
Add add-on controls, grouping controls, and positioning fields.
1 parent c7e9a39 commit c0d0104

File tree

5 files changed

+592
-33
lines changed

5 files changed

+592
-33
lines changed

‎docs/src/routes/components/field.svelte‎

Lines changed: 223 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
</script>
99

1010
<script>
11-
import { Field, Input } from 'svelma'
11+
import { Button, Field, Icon, Input } from 'svelma'
1212
import DocHeader from '../../components/DocHeader.svelte'
1313
import Example from '../../components/Example.svelte'
1414
import JSDoc from '../../components/JSDoc.svelte'
@@ -28,8 +28,12 @@
2828
<Input value="Rich Harris" />
2929
</Field>
3030
31-
<Field label="Name" type="is-danger" message="Pick a better name">
32-
<Input type="text" value="Moby Dick" />
31+
<Field label="Email" type="is-danger" message="Email is invalid">
32+
<Input value="john@" />
33+
</Field>
34+
35+
<Field label="Username" type="is-success" message="Username is available">
36+
<Input value="joey55" />
3337
</Field>`}>
3438
<div slot="preview">
3539
<Field label="Name">
@@ -46,4 +50,220 @@
4650
</div>
4751
</Example>
4852

53+
<hr class="is-medium">
54+
55+
<p class="title is-4">Addons</p>
56+
57+
Multiple controls in a field get attached. Use <code>expanded</code> property on the control to fill up space on the line.
58+
59+
<Example code={`<script>
60+
import { Button, Field, Icon, Input } from 'svelma'
61+
</script>
62+
63+
<Field>
64+
<Input type="search" placeholder="Search" icon="search" />
65+
<p class="control">
66+
<Button type="is-primary">Search</Button>
67+
</p>
68+
</Field>
69+
70+
<Field>
71+
<Input type="search" placeholder="This is expanded" expanded />
72+
<p class="control">
73+
<Button type="is-static">@gmail.com</Button>
74+
</p>
75+
</Field>
76+
77+
<hr>
78+
79+
<Field>
80+
<div class="control"><Button><Icon icon="bold"></Icon></Button></div>
81+
<div class="control"><Button><Icon icon="italic"></Icon></Button></div>
82+
<div class="control"><Button><Icon icon="underline"></Icon></Button></div>
83+
<div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
84+
<div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
85+
<div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
86+
<Input expanded icon="comment" placeholder="Text here" />
87+
</Field>
88+
89+
<Field>
90+
<div class="control"><Button type="is-primary">Button</Button></div>
91+
<div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
92+
</Field>`}>
93+
<div slot="preview">
94+
<Field>
95+
<Input type="search" placeholder="Search" icon="search" />
96+
<p class="control">
97+
<Button type="is-primary">Search</Button>
98+
</p>
99+
</Field>
100+
101+
<Field>
102+
<Input type="search" placeholder="This is expanded" expanded />
103+
<p class="control">
104+
<Button type="is-static">@gmail.com</Button>
105+
</p>
106+
</Field>
107+
108+
<hr>
109+
110+
<Field>
111+
<div class="control"><Button><Icon icon="bold"></Icon></Button></div>
112+
<div class="control"><Button><Icon icon="italic"></Icon></Button></div>
113+
<div class="control"><Button><Icon icon="underline"></Icon></Button></div>
114+
<div class="control"><Button><Icon icon="align-left"></Icon></Button></div>
115+
<div class="control"><Button><Icon icon="align-center"></Icon></Button></div>
116+
<div class="control"><Button><Icon icon="align-right"></Icon></Button></div>
117+
<Input expanded icon="comment" placeholder="Text here" />
118+
</Field>
119+
120+
<Field>
121+
<div class="control"><Button type="is-primary">Button</Button></div>
122+
<div class="control"><Button type="is-primary"><Icon icon="search" /></Button></div>
123+
</Field>
124+
</div>
125+
</Example>
126+
127+
<hr class="is-medium">
128+
129+
<p class="title is-4">Groups</p>
130+
131+
Use the <code>grouped</code> property to group controls together. Use the <code>expanded</code> property to make a control take up remaining space.
132+
133+
<Example code={`<script>
134+
import { Button, Field, Input } from 'svelma'
135+
</script>
136+
137+
<Field grouped>
138+
<Input type="search" placeholder="Search" icon="search" />
139+
<p class="control">
140+
<Button type="is-primary">Search</Button>
141+
</p>
142+
</Field>
143+
144+
<Field grouped>
145+
<Input type="search" placeholder="Search" icon="search" expanded />
146+
<p class="control">
147+
<Button type="is-primary">Search</Button>
148+
</p>
149+
</Field>`}>
150+
<div slot="preview">
151+
<Field grouped>
152+
<Input type="search" placeholder="Search" icon="search" />
153+
<p class="control">
154+
<Button type="is-primary">Search</Button>
155+
</p>
156+
</Field>
157+
158+
<Field grouped>
159+
<Input type="search" placeholder="Search" icon="search" expanded />
160+
<p class="control">
161+
<Button type="is-primary">Search</Button>
162+
</p>
163+
</Field>
164+
</div>
165+
</Example>
166+
167+
<hr class="is-medium">
168+
169+
<p class="title is-4">Nested Groups</p>
170+
171+
You can nest fields inside fields. You have to use the <code>expanded</code> property on the <strong>Field</strong> to fill up the remaining space.
172+
173+
<Example code={`<script>
174+
import { Button, Field, Input } from 'svelma'
175+
</script>
176+
177+
<Field grouped>
178+
<Field label="Button">
179+
<Button type="is-primary">Button</Button>
180+
</Field>
181+
182+
<Field label="Name" expanded>
183+
<Input />
184+
</Field>
185+
186+
<Field label="Email" expanded>
187+
<Input />
188+
</Field>
189+
</Field>`}>
190+
<div slot="preview">
191+
<Field grouped>
192+
<Field label="Button">
193+
<Button type="is-primary">Button</Button>
194+
</Field>
195+
196+
<Field label="Name" expanded>
197+
<Input />
198+
</Field>
199+
200+
<Field label="Email" expanded>
201+
<Input />
202+
</Field>
203+
</Field>
204+
</div>
205+
</Example>
206+
207+
<hr class="is-medium">
208+
209+
<p class="title is-4">Responsive Groups</p>
210+
211+
Add <code>groupMultiline</code> property to allow controls to fill up multiple lines.
212+
213+
<Example code={`<script>
214+
import { Button, Field, Input } from 'svelma'
215+
</script>
216+
217+
<Field grouped groupMultiline>
218+
<Input />
219+
{#each Array(30).fill().map((x, i) => i+1) as num}
220+
<div class="control">
221+
<Button>{num}</Button>
222+
</div>
223+
{/each}
224+
</Field>`}>
225+
<div slot="preview">
226+
<Field grouped groupMultiline>
227+
<Input />
228+
{#each Array(30).fill().map((x, i) => i+1) as num}
229+
<div class="control">
230+
<Button>{num}</Button>
231+
</div>
232+
{/each}
233+
</Field>
234+
</div>
235+
</Example>
236+
237+
<hr class="is-medium">
238+
239+
<p class="title is-4">Positions</p>
240+
241+
Use <code>position</code> property to align Field horizontally.
242+
243+
<Example code={`<script>
244+
import { Button, Field, Input } from 'svelma'
245+
</script>
246+
247+
<Field position="is-centered">
248+
<Input />
249+
<div class="control"><Button type="is-primary">Button</Button></div>
250+
</Field>
251+
252+
<Field grouped position="is-right">
253+
<Input />
254+
<div class="control"><Button type="is-primary">Button</Button></div>
255+
</Field>`}>
256+
<div slot="preview">
257+
<Field position="is-centered">
258+
<Input />
259+
<div class="control"><Button type="is-primary">Button</Button></div>
260+
</Field>
261+
262+
<Field grouped position="is-right">
263+
<Input />
264+
<div class="control"><Button type="is-primary">Button</Button></div>
265+
</Field>
266+
</div>
267+
</Example>
268+
49269
<JSDoc {jsdoc}></JSDoc>

0 commit comments

Comments
 (0)