Skip to content

Commit b558638

Browse files
koory1stkoory1st
committed
docs(docs): add switch
1 parent c504978 commit b558638

File tree

3 files changed

+1032
-343
lines changed

3 files changed

+1032
-343
lines changed

‎docs/src/routes/component/button/+page.svelte

Lines changed: 126 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636

3737
<Example
3838
code={`
39-
<script lang="ts">
39+
<script>
4040
import SvelButton from '@svelement-ui/button';
4141
import { SvelIcon, Search, Edit, Check, Message, Star, Delete } from '@svelement-ui/icon';
4242
@@@/>
@@ -102,12 +102,36 @@
102102
</SvelRow>
103103

104104
<SvelRow class="mb-4">
105-
<SvelButton circle><SvelIcon slot="icon"><Search /></SvelIcon></SvelButton>
106-
<SvelButton circle type="primary"><SvelIcon slot="icon"><Edit /></SvelIcon></SvelButton>
107-
<SvelButton circle type="success"><SvelIcon slot="icon"><Check /></SvelIcon></SvelButton>
108-
<SvelButton circle type="info"><SvelIcon slot="icon"><Message /></SvelIcon></SvelButton>
109-
<SvelButton circle type="warning"><SvelIcon slot="icon"><Star /></SvelIcon></SvelButton>
110-
<SvelButton circle type="danger"><SvelIcon slot="icon"><Delete /></SvelIcon></SvelButton>
105+
<SvelButton circle>
106+
<SvelIcon slot="icon">
107+
<Search />
108+
</SvelIcon>
109+
</SvelButton>
110+
<SvelButton circle type="primary">
111+
<SvelIcon slot="icon">
112+
<Edit />
113+
</SvelIcon>
114+
</SvelButton>
115+
<SvelButton circle type="success">
116+
<SvelIcon slot="icon">
117+
<Check />
118+
</SvelIcon>
119+
</SvelButton>
120+
<SvelButton circle type="info">
121+
<SvelIcon slot="icon">
122+
<Message />
123+
</SvelIcon>
124+
</SvelButton>
125+
<SvelButton circle type="warning">
126+
<SvelIcon slot="icon">
127+
<Star />
128+
</SvelIcon>
129+
</SvelButton>
130+
<SvelButton circle type="danger">
131+
<SvelIcon slot="icon">
132+
<Delete />
133+
</SvelIcon>
134+
</SvelButton>
111135
</SvelRow>
112136
</Example>
113137

@@ -136,27 +160,27 @@
136160
>
137161
<SvelRow class="mb-4">
138162
<SvelButton disabled>Default</SvelButton>
139-
<SvelButton type="primary" disabled>Primary</SvelButton>
140-
<SvelButton type="success" disabled>Success</SvelButton>
141-
<SvelButton type="info" disabled>Info</SvelButton>
142-
<SvelButton type="warning" disabled>Warning</SvelButton>
143-
<SvelButton type="danger" disabled>Danger</SvelButton>
163+
<SvelButton disabled type="primary">Primary</SvelButton>
164+
<SvelButton disabled type="success">Success</SvelButton>
165+
<SvelButton disabled type="info">Info</SvelButton>
166+
<SvelButton disabled type="warning">Warning</SvelButton>
167+
<SvelButton disabled type="danger">Danger</SvelButton>
144168
</SvelRow>
145169
<SvelRow class="mb-4">
146-
<SvelButton plain disabled>Default</SvelButton>
147-
<SvelButton plain type="primary" disabled>Primary</SvelButton>
148-
<SvelButton plain type="success" disabled>Success</SvelButton>
149-
<SvelButton plain type="info" disabled>Info</SvelButton>
150-
<SvelButton plain type="warning" disabled>Warning</SvelButton>
151-
<SvelButton plain type="danger" disabled>Danger</SvelButton>
170+
<SvelButton disabled plain>Default</SvelButton>
171+
<SvelButton disabled plain type="primary">Primary</SvelButton>
172+
<SvelButton disabled plain type="success">Success</SvelButton>
173+
<SvelButton disabled plain type="info">Info</SvelButton>
174+
<SvelButton disabled plain type="warning">Warning</SvelButton>
175+
<SvelButton disabled plain type="danger">Danger</SvelButton>
152176
</SvelRow>
153177
</Example>
154178

155179
<h2>{$langFn('cbut03010')}</h2>
156180
<p>{$langFn('cbut03020')}</p>
157181
<Example
158182
code={`
159-
<script lang="ts">
183+
<script>
160184
import SvelButton from '@svelement-ui/button';
161185
import SvelRow from '@svelement-ui/row';
162186
import Example from '$lib/example.svelte';
@@ -222,7 +246,7 @@
222246

223247
<Example
224248
code={`
225-
<script lang="ts">
249+
<script>
226250
import SvelButton from '@svelement-ui/button';
227251
import { SvelIcon, Search, Edit, Delete, Share } from '@svelement-ui/icon';
228252
@@@/>
@@ -237,12 +261,32 @@
237261
</div>`}
238262
>
239263
<div class="flex">
240-
<SvelButton type="primary"><SvelIcon><Edit /></SvelIcon></SvelButton>
241-
<SvelButton type="primary"><SvelIcon><Share /></SvelIcon></SvelButton>
242-
<SvelButton type="primary"><SvelIcon><Delete /></SvelIcon></SvelButton>
243-
<SvelButton type="primary"><SvelIcon slot="icon"><Search /></SvelIcon>Search</SvelButton>
244264
<SvelButton type="primary">
245-
Upload<SvelIcon class="svel-icon--right"><Search /></SvelIcon>
265+
<SvelIcon>
266+
<Edit />
267+
</SvelIcon>
268+
</SvelButton>
269+
<SvelButton type="primary">
270+
<SvelIcon>
271+
<Share />
272+
</SvelIcon>
273+
</SvelButton>
274+
<SvelButton type="primary">
275+
<SvelIcon>
276+
<Delete />
277+
</SvelIcon>
278+
</SvelButton>
279+
<SvelButton type="primary">
280+
<SvelIcon slot="icon">
281+
<Search />
282+
</SvelIcon>
283+
Search
284+
</SvelButton>
285+
<SvelButton type="primary">
286+
Upload
287+
<SvelIcon class="svel-icon--right">
288+
<Search />
289+
</SvelIcon>
246290
</SvelButton>
247291
</div>
248292
</Example>
@@ -289,7 +333,8 @@
289333
<SvelButton>
290334
<SvelIcon slot="icon">
291335
<ArrowLeft />
292-
</SvelIcon>Previous Page
336+
</SvelIcon>
337+
Previous Page
293338
</SvelButton>
294339
<SvelButton>
295340
Next Page
@@ -299,7 +344,7 @@
299344
</SvelButton>
300345
</SvelButtonGroup>
301346

302-
<SvelButtonGroup type="success" size="small" class="ml-4">
347+
<SvelButtonGroup class="ml-4" size="small" type="success">
303348
<SvelButton>
304349
<SvelIcon slot="icon">
305350
<Edit />
@@ -331,9 +376,9 @@
331376
</SvelIcon>
332377
</SvelButton>`}
333378
>
334-
<SvelButton type="primary" loading>Loading</SvelButton>
379+
<SvelButton loading type="primary">Loading</SvelButton>
335380
<SvelButton type="primary">
336-
<SvelIcon slot="loadingIcon" class="is-loading">
381+
<SvelIcon class="is-loading" slot="loadingIcon">
337382
<Edit />
338383
</SvelIcon>
339384
Loading
@@ -372,22 +417,64 @@
372417
<SvelButton size="large">Large</SvelButton>
373418
<SvelButton>Default</SvelButton>
374419
<SvelButton size="small">Small</SvelButton>
375-
<SvelButton size="large"><SvelIcon slot="icon"><Search /></SvelIcon>Search</SvelButton>
376-
<SvelButton><SvelIcon slot="icon"><Search /></SvelIcon>Search</SvelButton>
377-
<SvelButton size="small"><SvelIcon slot="icon"><Search /></SvelIcon>Search</SvelButton>
420+
<SvelButton size="large">
421+
<SvelIcon slot="icon">
422+
<Search />
423+
</SvelIcon>
424+
Search
425+
</SvelButton>
426+
<SvelButton>
427+
<SvelIcon slot="icon">
428+
<Search />
429+
</SvelIcon>
430+
Search
431+
</SvelButton>
432+
<SvelButton size="small">
433+
<SvelIcon slot="icon">
434+
<Search />
435+
</SvelIcon>
436+
Search
437+
</SvelButton>
378438
</SvelRow>
379439
<SvelRow class="my-4">
380440
<SvelButton round size="large">Large</SvelButton>
381441
<SvelButton round>Default</SvelButton>
382442
<SvelButton round size="small">Small</SvelButton>
383-
<SvelButton round size="large"><SvelIcon slot="icon"><Search /></SvelIcon>Search</SvelButton>
384-
<SvelButton round><SvelIcon slot="icon"><Search /></SvelIcon>Search</SvelButton>
385-
<SvelButton round size="small"><SvelIcon slot="icon"><Search /></SvelIcon>Search</SvelButton>
443+
<SvelButton round size="large">
444+
<SvelIcon slot="icon">
445+
<Search />
446+
</SvelIcon>
447+
Search
448+
</SvelButton>
449+
<SvelButton round>
450+
<SvelIcon slot="icon">
451+
<Search />
452+
</SvelIcon>
453+
Search
454+
</SvelButton>
455+
<SvelButton round size="small">
456+
<SvelIcon slot="icon">
457+
<Search />
458+
</SvelIcon>
459+
Search
460+
</SvelButton>
386461
</SvelRow>
387462
<SvelRow>
388-
<SvelButton circle size="large"><SvelIcon slot="icon"><Search /></SvelIcon></SvelButton>
389-
<SvelButton circle><SvelIcon slot="icon"><Search /></SvelIcon></SvelButton>
390-
<SvelButton circle size="small"><SvelIcon slot="icon"><Search /></SvelIcon></SvelButton>
463+
<SvelButton circle size="large">
464+
<SvelIcon slot="icon">
465+
<Search />
466+
</SvelIcon>
467+
</SvelButton>
468+
<SvelButton circle>
469+
<SvelIcon slot="icon">
470+
<Search />
471+
</SvelIcon>
472+
</SvelButton>
473+
<SvelButton circle size="small">
474+
<SvelIcon slot="icon">
475+
<Search />
476+
</SvelIcon>
477+
</SvelButton>
391478
</SvelRow>
392479
</Example>
393480

@@ -406,5 +493,5 @@
406493
<SvelButton color="#626aef" dark>Default</SvelButton>
407494
<SvelButton color="#626aef" dark plain>Default</SvelButton>
408495
<SvelButton color="#626aef" dark disabled>Default</SvelButton>
409-
<SvelButton color="#626aef" dark plain disabled>Default</SvelButton>
496+
<SvelButton color="#626aef" dark disabled plain>Default</SvelButton>
410497
</Example>

0 commit comments

Comments
 (0)