Skip to content

Commit 917590d

Browse files
nolimits4webnolimits4web
committed
feat(react): update all demos
1 parent 7a553d4 commit 917590d

220 files changed

Lines changed: 1006 additions & 1430 deletions

File tree

Some content is hidden

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

‎kitchen-sink/core/css/app.css‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -562,10 +562,13 @@ code {
562562
display: none;
563563
}
564564

565+
.view-master-detail .page-master-detail-root .navbar .left:has(.link.back) {
566+
opacity: 0 !important;
567+
pointer-events: none !important;
568+
}
569+
565570
/* Demo Popup & Sheet Swipe To Close */
566571
.demo-popup-swipe-handler {
567-
--f7-popup-border-radius: 15px 15px 0 0;
568-
--f7-popup-tablet-border-radius: 15px;
569572
--f7-block-strong-border-color: transparent;
570573
height: calc(100% - var(--f7-navbar-height) - var(--f7-safe-area-top));
571574
top: calc(var(--f7-navbar-height) + var(--f7-safe-area-top));
@@ -579,7 +582,6 @@ code {
579582
.demo-sheet-swipe-to-close,
580583
.demo-sheet-swipe-to-step {
581584
--f7-sheet-border-color: transparent;
582-
border-radius: 15px 15px 0 0;
583585
overflow: hidden;
584586
}
585587
.demo-sheet-swipe-to-close .swipe-handler,

‎kitchen-sink/core/pages/color-themes.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@
171171
} else if (!vibrant && monochrome) {
172172
$f7.setMdColorScheme('monochrome');
173173
} else if (vibrant && monochrome) {
174-
$f7.setMdColorScheme('vibrant-monochrome');
174+
$f7.setMdColorScheme('monochrome-vibrant');
175175
}
176176
$update();
177177
}
@@ -211,4 +211,4 @@
211211
return $render;
212212
};
213213

214-
</script>
214+
</script>

‎kitchen-sink/core/pages/photo-browser.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,6 @@
9090
photos: photos,
9191
thumbs: thumbs,
9292
type: 'page',
93-
backLinkText: 'Back',
9493
});
9594
});
9695
$on('pageBeforeRemove', () => {

‎kitchen-sink/react/src/pages/404.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Page, Navbar, Block } from 'framework7-react';
33

44
export default () => (
55
<Page>
6-
<Navbar title="Not found" backLink="Back"></Navbar>
6+
<Navbar title="Not found" backLink></Navbar>
77
<Block>
88
<p>Sorry</p>
99
<p>Requested content not found.</p>

‎kitchen-sink/react/src/pages/about.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export default () => (
55
<Page className="page-about">
66
<Navbar large transparent title="About" titleLarge="About" backLink="Framework7"></Navbar>
77
<BlockTitle medium>Welcome to Framework7</BlockTitle>
8-
<Block strongIos outlineIos>
8+
<Block strong inset>
99
<p>
1010
Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps
1111
or web apps with iOS or Android (Material) native look and feel. It is also an indispensable

‎kitchen-sink/react/src/pages/accordion.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@ import {
1111

1212
export default () => (
1313
<Page>
14-
<Navbar title="Accordion" backLink="Back" />
14+
<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>
@@ -54,7 +54,7 @@ export default () => (
5454
</List>
5555

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

‎kitchen-sink/react/src/pages/action-sheet.jsx‎

Lines changed: 11 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,10 @@ export default () => {
3030
if (!actionsToPopover.current) {
3131
actionsToPopover.current = f7.actions.create({
3232
buttons: [
33-
{
34-
text: 'Do something',
35-
label: true,
36-
},
37-
{
38-
text: 'Button 1',
39-
strong: true,
40-
},
41-
{
42-
text: 'Button 2',
43-
},
44-
{
45-
text: 'Cancel',
46-
color: 'red',
47-
},
33+
{ text: 'Do something', label: true },
34+
{ text: 'Button 1', strong: true },
35+
{ text: 'Button 2' },
36+
{ text: 'Cancel', color: 'red' },
4837
],
4938
// Need to specify popover target
5039
targetEl: buttonToPopoverWrapper.current.querySelector('.button-to-popover'),
@@ -57,21 +46,21 @@ export default () => {
5746

5847
return (
5948
<Page>
60-
<Navbar title="Action Sheet" backLink="Back"></Navbar>
49+
<Navbar title="Action Sheet" backLink></Navbar>
6150
<Block strong inset>
6251
<p className="grid grid-cols-2 grid-gap">
6352
{/* One group, open by changing actionsOneGroupOpened property */}
64-
<Button fill onClick={() => setActionsOneGroupOpened(true)}>
53+
<Button fill round onClick={() => setActionsOneGroupOpened(true)}>
6554
One group
6655
</Button>
6756
{/* Two groups, open by "actionsOpen" attribute */}
68-
<Button fill actionsOpen="#actions-two-groups">
57+
<Button fill round actionsOpen="#actions-two-groups">
6958
Two groups
7059
</Button>
7160
</p>
7261
<p>
7362
{/* Actions Grid, open by changing actionsGridOpened property */}
74-
<Button fill onClick={() => setActionsGridOpened(true)}>
63+
<Button fill round onClick={() => setActionsGridOpened(true)}>
7564
Action Grid
7665
</Button>
7766
</p>
@@ -84,6 +73,9 @@ export default () => {
8473
open Popover on tablets and Action Sheet on phones:
8574
<Button
8675
style={{ display: 'inline-block' }}
76+
round
77+
fill
78+
small
8779
className="button-to-popover"
8880
onClick={openActionsPopover}
8981
>

‎kitchen-sink/react/src/pages/area-chart.jsx‎

Lines changed: 22 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -15,85 +15,52 @@ export default () => {
1515

1616
return (
1717
<Page>
18-
<Navbar title="Area Chart" backLink="Back" />
19-
<Block strongIos outlineIos>
18+
<Navbar title="Area Chart" backLink />
19+
<Block strong inset>
2020
<p>Framework7 comes with simple to use and fully responsive Area Chart component.</p>
2121
<p>
2222
Area Chart generates SVG layout which makes it also compatible with SSR (server side
2323
rendering).
2424
</p>
2525
</Block>
2626
<BlockTitle>Simple Area Chart</BlockTitle>
27-
<Block strongIos outlineIos>
27+
<Block strong inset>
2828
<AreaChart
2929
datasets={[
30-
{
31-
color: '#f00',
32-
values: [0, 100, 250, 300, 175, 400],
33-
},
34-
{
35-
color: '#00f',
36-
values: [100, 75, 133, 237, 40, 200],
37-
},
38-
{
39-
color: '#ff0',
40-
values: [100, 300, 127, 40, 250, 80],
41-
},
30+
{ color: '#f00', values: [0, 100, 250, 300, 175, 400] },
31+
{ color: '#00f', values: [100, 75, 133, 237, 40, 200] },
32+
{ color: '#ff0', values: [100, 300, 127, 40, 250, 80] },
4233
]}
4334
/>
4435
</Block>
4536
<BlockTitle>Area Chart With Tooltip</BlockTitle>
46-
<Block strongIos outlineIos>
37+
<Block strong inset>
4738
<AreaChart
4839
tooltip
4940
datasets={[
50-
{
51-
label: 'Red data',
52-
color: '#f00',
53-
values: [100, 75, 133, 237, 40, 200],
54-
},
55-
{
56-
label: 'Blue data',
57-
color: '#00f',
58-
values: [100, 300, 127, 40, 250, 80],
59-
},
60-
{
61-
label: 'Yellow data',
62-
color: '#ff0',
63-
values: [0, 100, 250, 300, 175, 400],
64-
},
41+
{ label: 'Red data', color: '#f00', values: [100, 75, 133, 237, 40, 200] },
42+
{ label: 'Blue data', color: '#00f', values: [100, 300, 127, 40, 250, 80] },
43+
{ label: 'Yellow data', color: '#ff0', values: [0, 100, 250, 300, 175, 400] },
6544
]}
6645
/>
6746
</Block>
6847
<BlockTitle>Area Chart With Axis</BlockTitle>
69-
<Block strongIos outlineIos>
48+
<Block strong inset>
7049
<AreaChart
7150
tooltip
7251
axis
7352
axisLabels={dates}
7453
formatAxisLabel={(date) => axisDateFormat.format(date)}
7554
formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
7655
datasets={[
77-
{
78-
label: 'Green data',
79-
color: '#0f0',
80-
values: [100, 75, 133, 237],
81-
},
82-
{
83-
label: 'Red data',
84-
color: '#f00',
85-
values: [100, 300, 127, 47],
86-
},
87-
{
88-
label: 'Yellow data',
89-
color: '#ff0',
90-
values: [0, 100, 250, 307],
91-
},
56+
{ label: 'Green data', color: '#0f0', values: [100, 75, 133, 237] },
57+
{ label: 'Red data', color: '#f00', values: [100, 300, 127, 47] },
58+
{ label: 'Yellow data', color: '#ff0', values: [0, 100, 250, 307] },
9259
]}
9360
/>
9461
</Block>
9562
<BlockTitle>Area Chart With Legend</BlockTitle>
96-
<Block strongIos outlineIos>
63+
<Block strong inset>
9764
<AreaChart
9865
tooltip
9966
axis
@@ -103,26 +70,14 @@ export default () => {
10370
formatAxisLabel={(date) => axisDateFormat.format(date)}
10471
formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
10572
datasets={[
106-
{
107-
label: 'Red data',
108-
color: '#f00',
109-
values: [100, 300, 127, 47],
110-
},
111-
{
112-
label: 'Blue data',
113-
color: '#00f',
114-
values: [100, 75, 133, 237],
115-
},
116-
{
117-
label: 'Yellow data',
118-
color: '#ff0',
119-
values: [0, 100, 250, 307],
120-
},
73+
{ label: 'Red data', color: '#f00', values: [100, 300, 127, 47] },
74+
{ label: 'Blue data', color: '#00f', values: [100, 75, 133, 237] },
75+
{ label: 'Yellow data', color: '#ff0', values: [0, 100, 250, 307] },
12176
]}
12277
/>
12378
</Block>
12479
<BlockTitle>Lines Chart</BlockTitle>
125-
<Block strongIos outlineIos>
80+
<Block strong inset>
12681
<AreaChart
12782
tooltip
12883
axis
@@ -133,21 +88,9 @@ export default () => {
13388
formatAxisLabel={(date) => axisDateFormat.format(date)}
13489
formatTooltipAxisLabel={(date) => tooltipDateFormat.format(date)}
13590
datasets={[
136-
{
137-
label: 'Red data',
138-
color: '#f00',
139-
values: [0, 300, 127, 47],
140-
},
141-
{
142-
label: 'Blue data',
143-
color: '#00f',
144-
values: [0, 75, 133, 237],
145-
},
146-
{
147-
label: 'Green data',
148-
color: '#0f0',
149-
values: [0, 100, 250, 307],
150-
},
91+
{ label: 'Red data', color: '#f00', values: [0, 300, 127, 47] },
92+
{ label: 'Blue data', color: '#00f', values: [0, 75, 133, 237] },
93+
{ label: 'Green data', color: '#0f0', values: [0, 100, 250, 307] },
15194
]}
15295
/>
15396
</Block>

‎kitchen-sink/react/src/pages/autocomplete.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,7 @@ export default () => {
360360

361361
return (
362362
<Page onPageInit={onPageInit} onPageBeforeRemove={onPageBeforeRemove}>
363-
<Navbar title="Autocomplete" backLink="Back">
363+
<Navbar title="Autocomplete" backLink>
364364
<Subnavbar inner={false}>
365365
<Searchbar init={false} id="searchbar-autocomplete" disableButton={true} />
366366
</Subnavbar>

‎kitchen-sink/react/src/pages/badge.jsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,12 @@ import {
99
List,
1010
ListItem,
1111
Icon,
12+
ToolbarPane,
1213
} from 'framework7-react';
1314

1415
export default () => (
1516
<Page>
16-
<Navbar backLink="Back" title="Badge">
17+
<Navbar backLink title="Badge">
1718
<NavRight>
1819
<Link iconOnly>
1920
<Icon ios="f7:person_circle_fill" md="material:person">
@@ -23,27 +24,29 @@ export default () => (
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 className="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 className="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 className="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 className="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 className="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 className="tabbar-label">Upload</span>
45+
</Link>
46+
</ToolbarPane>
4447
</Toolbar>
4548

46-
<List strongIos outlineIos dividersIos>
49+
<List strong inset dividersIos>
4750
<ListItem title="Foo Bar" badge="0">
4851
<Icon slot="media" icon="icon-f7" />
4952
</ListItem>

0 commit comments

Comments
 (0)