-
-
Notifications
You must be signed in to change notification settings - Fork 3.2k
/
segmented.svelte
49 lines (46 loc) · 1.46 KB
/
segmented.svelte
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
<script>
import { Page, Navbar, Block, Segmented, Button } from 'framework7-svelte';
let activeStrongButton = 0;
</script>
<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
<Navbar title="Segmented" backLink="Back" />
<Block strong outlineIos>
<Segmented tag="p">
<Button>Button</Button>
<Button>Button</Button>
<Button active>Active</Button>
</Segmented>
<Segmented strong tag="p">
<Button active={activeStrongButton === 0} onClick={() => (activeStrongButton = 0)}
>Button</Button
>
<Button active={activeStrongButton === 1} onClick={() => (activeStrongButton = 1)}
>Button</Button
>
<Button active={activeStrongButton === 2} onClick={() => (activeStrongButton = 2)}
>Button</Button
>
</Segmented>
<Segmented raised tag="p">
<Button>Button</Button>
<Button>Button</Button>
<Button active>Active</Button>
</Segmented>
<Segmented tag="p">
<Button outline>Outline</Button>
<Button outline>Outline</Button>
<Button outline active>Active</Button>
</Segmented>
<Segmented raised round tag="p">
<Button round>Button</Button>
<Button round>Button</Button>
<Button round active>Active</Button>
</Segmented>
<Segmented round tag="p">
<Button round outline>Outline</Button>
<Button round outline>Outline</Button>
<Button round outline active>Active</Button>
</Segmented>
</Block>
</Page>