Skip to content

Commit 148070b

Browse files
nolimits4webnolimits4web
committed
more v5 svelte demos
1 parent 45def5f commit 148070b

59 files changed

Lines changed: 664 additions & 536 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎kitchen-sink/svelte/src/pages/accordion.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<Navbar title="Accordion" backLink />
1515

1616
<BlockTitle>List View Accordion</BlockTitle>
17-
<List strong outlineIos dividersIos insetMd accordionList>
17+
<List strong inset dividersIos accordionList>
1818
<ListItem accordionItem title="Lorem Ipsum">
1919
<AccordionContent>
2020
<Block>
@@ -52,7 +52,7 @@
5252
</List>
5353

5454
<BlockTitle>Opposite Side</BlockTitle>
55-
<List strong outlineIos dividersIos insetMd accordionList accordionOpposite>
55+
<List strong inset dividersIos accordionList accordionOpposite>
5656
<ListItem accordionItem title="Lorem Ipsum">
5757
<AccordionContent>
5858
<Block>

‎kitchen-sink/svelte/src/pages/action-sheet.svelte‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,19 +63,21 @@
6363
<!-- One group, open by direct accessing instance .open() method -->
6464
<Button
6565
fill
66+
round
6667
onClick={() => {
6768
actionsOneGroupOpened = true;
6869
}}
6970
>
7071
One group
7172
</Button>
7273
<!-- Two groups, open by "actionsOpen" attribute -->
73-
<Button fill actionsOpen="#actions-two-groups">Two groups</Button>
74+
<Button fill round actionsOpen="#actions-two-groups">Two groups</Button>
7475
</p>
7576
<p>
7677
<!-- Actions Grid, open by changing actionGridOpened state property -->
7778
<Button
7879
fill
80+
round
7981
onClick={() => {
8082
actionGridOpened = true;
8183
}}
@@ -90,7 +92,14 @@
9092
<p bind:this={buttonToPopoverWrapper}>
9193
Action Sheet can be automatically converted to Popover (for tablets). This button will open
9294
Popover on tablets and Action Sheet on phones:
93-
<Button style="display: inline-block" class="button-to-popover" onClick={openActionsPopover}>
95+
<Button
96+
round
97+
fill
98+
small
99+
style="display: inline-block"
100+
class="button-to-popover"
101+
onClick={openActionsPopover}
102+
>
94103
Actions
95104
</Button>
96105
</p>

‎kitchen-sink/svelte/src/pages/area-chart.svelte‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,15 @@
1515

1616
<Page>
1717
<Navbar title="Area Chart" backLink />
18-
<Block strongIos outlineIos>
18+
<Block strong inset>
1919
<p>Framework7 comes with simple to use and fully responsive Area Chart component.</p>
2020
<p>
2121
Area Chart generates SVG layout which makes it also compatible with SSR (server side
2222
rendering).
2323
</p>
2424
</Block>
2525
<BlockTitle>Simple Area Chart</BlockTitle>
26-
<Block strongIos outlineIos>
26+
<Block strong inset>
2727
<!-- prettier-ignore -->
2828
<AreaChart
2929
datasets={[
@@ -43,7 +43,7 @@
4343
/>
4444
</Block>
4545
<BlockTitle>Area Chart With Tooltip</BlockTitle>
46-
<Block strongIos outlineIos>
46+
<Block strong inset>
4747
<!-- prettier-ignore -->
4848
<AreaChart
4949
tooltip
@@ -67,7 +67,7 @@
6767
/>
6868
</Block>
6969
<BlockTitle>Area Chart With Axis</BlockTitle>
70-
<Block strongIos outlineIos>
70+
<Block strong inset>
7171
<!-- prettier-ignore -->
7272
<AreaChart
7373
tooltip
@@ -95,7 +95,7 @@
9595
/>
9696
</Block>
9797
<BlockTitle>Area Chart With Legend</BlockTitle>
98-
<Block strongIos outlineIos>
98+
<Block strong inset>
9999
<!-- prettier-ignore -->
100100
<AreaChart
101101
tooltip
@@ -125,7 +125,7 @@
125125
/>
126126
</Block>
127127
<BlockTitle>Lines Chart</BlockTitle>
128-
<Block strongIos outlineIos>
128+
<Block strong inset>
129129
<!-- prettier-ignore -->
130130
<AreaChart
131131
tooltip

‎kitchen-sink/svelte/src/pages/badge.svelte‎

Lines changed: 21 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
List,
1010
ListItem,
1111
Icon,
12+
ToolbarPane,
1213
} from 'framework7-svelte';
1314
</script>
1415

@@ -23,24 +24,26 @@
2324
</NavRight>
2425
</Navbar>
2526
<Toolbar bottom tabbar icons>
26-
<Link tabLink="#tab-1" tabLinkActive>
27-
<Icon ios="f7:envelope_fill" md="material:email">
28-
<Badge color="green">5</Badge>
29-
</Icon>
30-
<span class="tabbar-label">Inbox</span>
31-
</Link>
32-
<Link tabLink="#tab-2">
33-
<Icon ios="f7:calendar_fill" md="material:today">
34-
<Badge color="red">7</Badge>
35-
</Icon>
36-
<span class="tabbar-label">Calendar</span>
37-
</Link>
38-
<Link tabLink="#tab-3">
39-
<Icon ios="f7:cloud_upload_fill" md="material:file_upload">
40-
<Badge color="red">1</Badge>
41-
</Icon>
42-
<span class="tabbar-label">Upload</span>
43-
</Link>
27+
<ToolbarPane>
28+
<Link tabLink="#tab-1" tabLinkActive>
29+
<Icon ios="f7:envelope_fill" md="material:email">
30+
<Badge color="green">5</Badge>
31+
</Icon>
32+
<span class="tabbar-label">Inbox</span>
33+
</Link>
34+
<Link tabLink="#tab-2">
35+
<Icon ios="f7:calendar_fill" md="material:today">
36+
<Badge color="red">7</Badge>
37+
</Icon>
38+
<span class="tabbar-label">Calendar</span>
39+
</Link>
40+
<Link tabLink="#tab-3">
41+
<Icon ios="f7:cloud_upload_fill" md="material:file_upload">
42+
<Badge color="red">1</Badge>
43+
</Icon>
44+
<span class="tabbar-label">Upload</span>
45+
</Link>
46+
</ToolbarPane>
4447
</Toolbar>
4548

4649
<List strongIos outlineIos dividersIos>

‎kitchen-sink/svelte/src/pages/buttons.svelte‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
11
<script>
2-
import {
3-
Page,
4-
Navbar,
5-
BlockTitle,
6-
Block,
7-
Button,
8-
} from 'framework7-svelte';
2+
import { Page, Navbar, BlockTitle, Block, Button } from 'framework7-svelte';
93
104
let isLoading1 = false;
115
let isLoading2 = false;
@@ -32,7 +26,7 @@
3226
<Navbar title="Buttons" backLink />
3327

3428
<BlockTitle>Usual Buttons</BlockTitle>
35-
<Block strong outlineIos>
29+
<Block strong inset>
3630
<div class="grid grid-cols-3 grid-gap">
3731
<Button>Button</Button>
3832
<Button>Button</Button>
@@ -41,7 +35,7 @@
4135
</Block>
4236

4337
<BlockTitle>Tonal Buttons</BlockTitle>
44-
<Block strong outlineIos>
38+
<Block strong inset>
4539
<div class="grid grid-cols-3 grid-gap">
4640
<Button tonal>Button</Button>
4741
<Button tonal>Button</Button>
@@ -50,7 +44,7 @@
5044
</Block>
5145

5246
<BlockTitle>Fill Buttons</BlockTitle>
53-
<Block strong outlineIos>
47+
<Block strong inset>
5448
<div class="grid grid-cols-3 grid-gap">
5549
<Button fill>Button</Button>
5650
<Button fill>Button</Button>
@@ -59,7 +53,7 @@
5953
</Block>
6054

6155
<BlockTitle>Outline Buttons</BlockTitle>
62-
<Block strong outlineIos>
56+
<Block strong inset>
6357
<div class="grid grid-cols-3 grid-gap">
6458
<Button outline>Button</Button>
6559
<Button outline>Button</Button>
@@ -68,7 +62,7 @@
6862
</Block>
6963

7064
<BlockTitle>Raised Buttons</BlockTitle>
71-
<Block strong outlineIos>
65+
<Block strong inset>
7266
<p class="grid grid-cols-3 grid-gap">
7367
<Button raised>Button</Button>
7468
<Button raised fill>Fill</Button>
@@ -82,7 +76,7 @@
8276
</Block>
8377

8478
<BlockTitle>Large Buttons</BlockTitle>
85-
<Block strong outlineIos>
79+
<Block strong inset>
8680
<p class="grid grid-cols-2 grid-gap">
8781
<Button large>Button</Button>
8882
<Button large fill>Fill</Button>
@@ -98,7 +92,7 @@
9892
</Block>
9993

10094
<BlockTitle>Small Buttons</BlockTitle>
101-
<Block strong outlineIos>
95+
<Block strong inset>
10296
<p class="grid grid-cols-3 grid-gap">
10397
<Button small>Button</Button>
10498
<Button small outline>Outline</Button>
@@ -112,15 +106,15 @@
112106
</Block>
113107

114108
<BlockTitle>Preloader Buttons</BlockTitle>
115-
<Block strong outlineIos>
109+
<Block strong inset>
116110
<p class="grid grid-cols-3 grid-gap">
117111
<Button preloader loading={isLoading1} onClick={load1} large>Load</Button>
118112
<Button preloader loading={isLoading2} onClick={load2} large fill>Load</Button>
119113
</p>
120114
</Block>
121115

122116
<BlockTitle>Color Buttons</BlockTitle>
123-
<Block strong outlineIos>
117+
<Block strong inset>
124118
<div class="grid grid-cols-3 grid-gap">
125119
<Button color="red">Red</Button>
126120
<Button color="green">Green</Button>
@@ -129,7 +123,7 @@
129123
</Block>
130124

131125
<BlockTitle>Color Fill Buttons</BlockTitle>
132-
<Block strong outlineIos>
126+
<Block strong inset>
133127
<p class="grid grid-cols-3 grid-gap">
134128
<Button color="red">Red</Button>
135129
<Button color="green">Green</Button>

‎kitchen-sink/svelte/src/pages/calendar.svelte‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -85,12 +85,12 @@
8585
</Block>
8686

8787
<BlockTitle>Default setup</BlockTitle>
88-
<List strongIos outlineIos>
88+
<List strong inset>
8989
<ListInput type="datepicker" placeholder="Your birth date" readonly />
9090
</List>
9191

9292
<BlockTitle>Custom date format</BlockTitle>
93-
<List strongIos outlineIos>
93+
<List strong inset>
9494
<ListInput
9595
type="datepicker"
9696
placeholder="Select date"
@@ -102,7 +102,7 @@
102102
</List>
103103

104104
<BlockTitle>Date + Time</BlockTitle>
105-
<List strongIos outlineIos>
105+
<List strong inset>
106106
<ListInput
107107
type="datepicker"
108108
placeholder="Select date and time"
@@ -121,7 +121,7 @@
121121
</List>
122122

123123
<BlockTitle>Multiple Values</BlockTitle>
124-
<List strongIos outlineIos>
124+
<List strong inset>
125125
<ListInput
126126
type="datepicker"
127127
placeholder="Select multiple dates"
@@ -131,7 +131,7 @@
131131
</List>
132132

133133
<BlockTitle>Range Picker</BlockTitle>
134-
<List strongIos outlineIos>
134+
<List strong inset>
135135
<ListInput
136136
type="datepicker"
137137
placeholder="Select date range"
@@ -141,7 +141,7 @@
141141
</List>
142142

143143
<BlockTitle>Open in Modal</BlockTitle>
144-
<List strongIos outlineIos>
144+
<List strong inset>
145145
<ListInput
146146
type="datepicker"
147147
placeholder="Select date"
@@ -151,12 +151,12 @@
151151
</List>
152152

153153
<BlockTitle>Calendar Page</BlockTitle>
154-
<List strong outlineIos>
154+
<List strong inset>
155155
<ListItem title="Open Calendar Page" link="/calendar-page/" />
156156
</List>
157157

158158
<BlockTitle>Inline with custom toolbar</BlockTitle>
159-
<Block strong class="no-padding">
159+
<Block strong inset class="no-padding">
160160
<div id="demo-calendar-inline-container" />
161161
</Block>
162162
</Page>

0 commit comments

Comments
 (0)