Skip to content

Commit ac4d097

Browse files
nolimits4webnolimits4web
committed
Phenome: Fab Extended + Fab Labels + Demos
1 parent 5d58b2a commit ac4d097

6 files changed

Lines changed: 133 additions & 145 deletions

File tree

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ export default () => (
1919
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
2020
<Icon ifIos="f7:close" ifMd="material:close"></Icon>
2121
<FabButtons position="top">
22-
<FabButton>1</FabButton>
23-
<FabButton>2</FabButton>
24-
<FabButton>3</FabButton>
22+
<FabButton label="Action 1">1</FabButton>
23+
<FabButton label="Action 2">2</FabButton>
24+
<FabButton label="Third Action">3</FabButton>
2525
</FabButtons>
2626
</Fab>
2727

2828
<Fab position="left-bottom" slot="fixed">
2929
<Icon ifIos="f7:add" ifMd="material:add"></Icon>
3030
<Icon ifIos="f7:close" ifMd="material:close"></Icon>
31-
<FabButtons position="right">
31+
<FabButtons position="top">
3232
<FabButton>1</FabButton>
3333
<FabButton>2</FabButton>
3434
<FabButton>3</FabButton>
@@ -56,6 +56,10 @@ export default () => (
5656
</FabButtons>
5757
</Fab>
5858

59+
<Fab position="center-bottom" slot="fixed" text="Create">
60+
<Icon ios="f7:add" md="material:add"></Icon>
61+
</Fab>
62+
5963
<Block>
6064
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
6165
<p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>

‎kitchen-sink/vue/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<meta name="theme-color" content="#2196f3">
99
<meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap:">
1010
<title>Framework7</title>
11-
<link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
11+
<link rel="stylesheet" href="../../build/core/css/framework7.css">
1212
<link rel="stylesheet" href="css/app.css">
1313
</head>
1414
<body>

‎kitchen-sink/vue/src/pages/fab-morph.vue‎

Lines changed: 35 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,29 @@
11
<template>
2-
<f7-page :page-content="false">
2+
<f7-page>
33
<f7-navbar title="Floating Action Button Morph" back-link="Back"></f7-navbar>
4-
<div class="toolbar tabbar tabbar-labels toolbar-bottom-md fab-morph-target">
5-
<div class="toolbar-inner">
6-
<a class="tab-link tab-link-active">
7-
<i class="icon f7-icons ios-only">email</i>
8-
<i class="icon icon-fill f7-icons ios-only">email_fill</i>
9-
<i class="icon material-icons md-only">email</i>
10-
<span class="tabbar-label">Inbox</span>
11-
</a>
12-
<a class="tab-link">
13-
<i class="icon f7-icons ios-only">today</i>
14-
<i class="icon icon-fill f7-icons ios-only">today_fill</i>
15-
<i class="icon material-icons md-only">today</i>
16-
<span class="tabbar-label">Calendar</span>
17-
</a>
18-
<a class="tab-link">
19-
<i class="icon f7-icons ios-only">cloud</i>
20-
<i class="icon icon-fill f7-icons ios-only">cloud_fill</i>
21-
<i class="icon material-icons md-only">file_upload</i>
22-
<span class="tabbar-label">Upload</span>
23-
</a>
24-
</div>
25-
</div>
26-
<div class="fab fab-right-bottom fab-morph" data-morph-to=".toolbar.fab-morph-target">
27-
<a href="#">
28-
<i class="icon f7-icons ios-only">add</i>
29-
<i class="icon material-icons md-only">add</i>
30-
</a>
31-
</div>
32-
<div class="fab fab-left-bottom fab-morph" data-morph-to=".demo-fab-sheet.fab-morph-target">
33-
<a href="#">
34-
<i class="icon f7-icons ios-only">add</i>
35-
<i class="icon material-icons md-only">add</i>
36-
</a>
37-
</div>
38-
<div class="fab fab-center-bottom fab-morph" data-morph-to=".demo-fab-fullscreen-sheet.fab-morph-target">
39-
<a href="#">
40-
<i class="icon f7-icons ios-only">add</i>
41-
<i class="icon material-icons md-only">add</i>
42-
</a>
43-
</div>
44-
<div class="list links-list demo-fab-sheet fab-morph-target">
4+
<f7-toolbar tabbar labels bottom-md class="fab-morph-target">
5+
<f7-link tab-link tab-link-active icon-if-ios="f7:email_fill" icon-if-md="material:email" text="Inbox"/>
6+
<f7-link tab-link icon-if-ios="f7:today" icon-if-md="material:today" text="Calendar"/>
7+
<f7-link tab-link icon-if-ios="f7:cloud" icon-if-md="material:file_upload" text="Upload"/>
8+
</f7-toolbar>
9+
<f7-fab position="right-bottom" morph-to=".toolbar.fab-morph-target">
10+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
11+
</f7-fab>
12+
<f7-fab position="left-bottom" morph-to=".demo-fab-sheet.fab-morph-target">
13+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
14+
</f7-fab>
15+
<f7-fab position="center-bottom" morph-to=".demo-fab-fullscreen-sheet.fab-morph-target">
16+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
17+
</f7-fab>
18+
<div class="list links-list demo-fab-sheet fab-morph-target" slot="fixed">
4519
<ul>
4620
<li><a href="#" class="fab-close">Link 1</a></li>
4721
<li><a href="#" class="fab-close">Link 2</a></li>
4822
<li><a href="#" class="fab-close">Link 3</a></li>
4923
<li><a href="#" class="fab-close">Link 4</a></li>
5024
</ul>
5125
</div>
52-
<div class="demo-fab-fullscreen-sheet fab-morph-target">
26+
<div class="demo-fab-fullscreen-sheet fab-morph-target" slot="fixed">
5327
<f7-block-title>Choose Something</f7-block-title>
5428
<div class="list links-list">
5529
<ul>
@@ -60,34 +34,30 @@
6034
</ul>
6135
</div>
6236
</div>
63-
<div class="page-content">
64-
<div class="block">
65-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
66-
<p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
67-
<p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
68-
<p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
69-
<p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
70-
</div>
71-
<div class="block">
72-
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
73-
<p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
74-
<p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
75-
<p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
76-
<p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
77-
<p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
78-
<p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
79-
</div>
80-
</div>
37+
<f7-block>
38+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
39+
<p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
40+
<p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
41+
<p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
42+
<p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
43+
</f7-block>
44+
<f7-block>
45+
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
46+
<p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
47+
<p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
48+
<p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
49+
<p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
50+
<p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
51+
<p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
52+
</f7-block>
8153
</f7-page>
8254
</template>
8355
<script>
84-
import { f7Navbar, f7Page, f7BlockTitle } from 'framework7-vue';
56+
import { f7Navbar, f7Page, f7BlockTitle, f7Block, f7Toolbar, f7Fab, f7Icon, f7Link } from 'framework7-vue';
8557
8658
export default {
8759
components: {
88-
f7Navbar,
89-
f7Page,
90-
f7BlockTitle,
60+
f7Navbar, f7Page, f7BlockTitle, f7Block, f7Toolbar, f7Fab, f7Icon, f7Link,
9161
},
9262
};
9363
</script>

‎kitchen-sink/vue/src/pages/fab.vue‎

Lines changed: 62 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,86 @@
11
<template>
22
<f7-page>
33
<f7-navbar title="Floating Action Button" back-link="Back"></f7-navbar>
4-
<div class="fab fab-right-top" slot="fixed">
5-
<a href="#">
6-
<i class="icon f7-icons ios-only">add</i>
7-
<i class="icon f7-icons ios-only">close</i>
8-
<i class="icon material-icons md-only">add</i>
9-
<i class="icon material-icons md-only">close</i>
10-
</a>
11-
<div class="fab-buttons fab-buttons-left">
12-
<a href="">1</a>
13-
<a href="">2</a>
14-
<a href="">3</a>
15-
</div>
16-
</div>
17-
<div class="fab fab-right-bottom" slot="fixed">
18-
<a href="#">
19-
<i class="icon f7-icons ios-only">add</i>
20-
<i class="icon f7-icons ios-only">close</i>
21-
<i class="icon material-icons md-only">add</i>
22-
<i class="icon material-icons md-only">close</i>
23-
</a>
24-
<div class="fab-buttons fab-buttons-top">
25-
<a href="">1</a>
26-
<a href="">2</a>
27-
<a href="">3</a>
28-
</div>
29-
</div>
30-
<div class="fab fab-left-bottom" slot="fixed">
31-
<a href="#">
32-
<i class="icon f7-icons ios-only">add</i>
33-
<i class="icon f7-icons ios-only">close</i>
34-
<i class="icon material-icons md-only">add</i>
35-
<i class="icon material-icons md-only">close</i>
36-
</a>
37-
<div class="fab-buttons fab-buttons-right">
38-
<a href="">1</a>
39-
<a href="">2</a>
40-
<a href="">3</a>
41-
</div>
42-
</div>
43-
<div class="fab fab-left-top" slot="fixed">
44-
<a href="#">
45-
<i class="icon f7-icons ios-only">add</i>
46-
<i class="icon f7-icons ios-only">close</i>
47-
<i class="icon material-icons md-only">add</i>
48-
<i class="icon material-icons md-only">close</i>
49-
</a>
50-
<div class="fab-buttons fab-buttons-bottom">
51-
<a href="">1</a>
52-
<a href="">2</a>
53-
<a href="">3</a>
54-
</div>
55-
</div>
56-
<div class="fab fab-center-center" slot="fixed">
57-
<a href="#">
58-
<i class="icon f7-icons ios-only">add</i>
59-
<i class="icon f7-icons ios-only">close</i>
60-
<i class="icon material-icons md-only">add</i>
61-
<i class="icon material-icons md-only">close</i>
62-
</a>
63-
<div class="fab-buttons fab-buttons-center" slot="fixed">
64-
<a href="">1</a>
65-
<a href="">2</a>
66-
<a href="">3</a>
67-
<a href="">4</a>
68-
</div>
69-
</div>
70-
<div class="block">
4+
5+
<f7-fab position="right-top" slot="fixed">
6+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
7+
<f7-icon if-ios="f7:close" if-md="material:close"></f7-icon>
8+
<f7-fab-buttons position="left">
9+
<f7-fab-button>1</f7-fab-button>
10+
<f7-fab-button>2</f7-fab-button>
11+
<f7-fab-button>3</f7-fab-button>
12+
</f7-fab-buttons>
13+
</f7-fab>
14+
15+
<f7-fab position="right-bottom" slot="fixed">
16+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
17+
<f7-icon if-ios="f7:close" if-md="material:close"></f7-icon>
18+
<f7-fab-buttons position="top">
19+
<f7-fab-button label="Action 1">1</f7-fab-button>
20+
<f7-fab-button label="Action 2">2</f7-fab-button>
21+
<f7-fab-button label="Third Action">3</f7-fab-button>
22+
</f7-fab-buttons>
23+
</f7-fab>
24+
25+
<f7-fab position="left-bottom" slot="fixed">
26+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
27+
<f7-icon if-ios="f7:close" if-md="material:close"></f7-icon>
28+
<f7-fab-buttons position="top">
29+
<f7-fab-button>1</f7-fab-button>
30+
<f7-fab-button>2</f7-fab-button>
31+
<f7-fab-button>3</f7-fab-button>
32+
</f7-fab-buttons>
33+
</f7-fab>
34+
35+
<f7-fab position="left-top" slot="fixed">
36+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
37+
<f7-icon if-ios="f7:close" if-md="material:close"></f7-icon>
38+
<f7-fab-buttons position="bottom">
39+
<f7-fab-button>1</f7-fab-button>
40+
<f7-fab-button>2</f7-fab-button>
41+
<f7-fab-button>3</f7-fab-button>
42+
</f7-fab-buttons>
43+
</f7-fab>
44+
45+
<f7-fab position="center-center" slot="fixed">
46+
<f7-icon if-ios="f7:add" if-md="material:add"></f7-icon>
47+
<f7-icon if-ios="f7:close" if-md="material:close"></f7-icon>
48+
<f7-fab-buttons position="center">
49+
<f7-fab-button>1</f7-fab-button>
50+
<f7-fab-button>2</f7-fab-button>
51+
<f7-fab-button>3</f7-fab-button>
52+
<f7-fab-button>4</f7-fab-button>
53+
</f7-fab-buttons>
54+
</f7-fab>
55+
56+
<f7-fab position="center-bottom" slot="fixed" text="Create">
57+
<f7-icon ios="f7:add" md="material:add"></f7-icon>
58+
</f7-fab>
59+
60+
<f7-block>
7161
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, quo rem beatae, delectus eligendi est saepe molestias perferendis suscipit, commodi labore ipsa non quasi eum magnam neque ducimus! Quasi, numquam.</p>
7262
<p>Maiores culpa, itaque! Eaque natus ab cum ipsam numquam blanditiis a, quia, molestiae aut laudantium recusandae ipsa. Ad iste ex asperiores ipsa, mollitia perferendis consectetur quam eaque, voluptate laboriosam unde.</p>
7363
<p>Sed odit quis aperiam temporibus vitae necessitatibus, laboriosam, exercitationem dolores odio sapiente provident. Accusantium id, itaque aliquam libero ipsum eos fugiat distinctio laboriosam exercitationem sequi facere quas quidem magnam reprehenderit.</p>
7464
<p>Pariatur corporis illo, amet doloremque. Ab veritatis sunt nisi consectetur error modi, nam illo et nostrum quia aliquam ipsam vitae facere voluptates atque similique odit mollitia, rerum placeat nobis est.</p>
7565
<p>Et impedit soluta minus a autem adipisci cupiditate eius dignissimos nihil officia dolore voluptatibus aperiam reprehenderit esse facilis labore qui, officiis consectetur. Ipsa obcaecati aspernatur odio assumenda veniam, ipsum alias.</p>
76-
</div>
77-
<div class="block">
66+
</f7-block>
67+
<f7-block>
7868
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa ipsa debitis sed nihil eaque dolore cum iste quibusdam, accusamus doloribus, tempora quia quos voluptatibus corporis officia at quas dolorem earum!</p>
7969
<p>Quod soluta eos inventore magnam suscipit enim at hic in maiores temporibus pariatur tempora minima blanditiis vero autem est perspiciatis totam dolorum, itaque repellat? Nobis necessitatibus aut odit aliquam adipisci.</p>
8070
<p>Tenetur delectus perspiciatis ex numquam, unde corrupti velit! Quam aperiam, animi fuga veritatis consectetur, voluptatibus atque consequuntur dignissimos itaque, sint impedit cum cumque at. Adipisci sint, iusto blanditiis ullam? Vel?</p>
8171
<p>Dignissimos velit officia quibusdam! Eveniet beatae, aut, omnis temporibus consequatur expedita eaque aliquid quos accusamus fugiat id iusto autem obcaecati repellat fugit cupiditate suscipit natus quas doloribus? Temporibus necessitatibus, libero.</p>
8272
<p>Architecto quisquam ipsa fugit facere, repudiandae asperiores vitae obcaecati possimus, labore excepturi reprehenderit consectetur perferendis, ullam quidem hic, repellat fugiat eaque fuga. Consectetur in eveniet, deleniti recusandae omnis eum quas?</p>
8373
<p>Quos nulla consequatur quo, officia quaerat. Nulla voluptatum, assumenda quibusdam, placeat cum aut illo deleniti dolores commodi odio ipsam, recusandae est pariatur veniam repudiandae blanditiis. Voluptas unde deleniti quisquam, nobis?</p>
8474
<p>Atque qui quaerat quasi officia molestiae, molestias totam incidunt reprehenderit laboriosam facilis veritatis, non iusto! Dolore ipsam obcaecati voluptates minima maxime minus qui mollitia facere. Nostrum esse recusandae voluptatibus eligendi.</p>
85-
</div>
75+
</f7-block>
8676
</f7-page>
8777
</template>
8878
<script>
89-
import { f7Navbar, f7Page } from 'framework7-vue';
79+
import { f7Navbar, f7Page, f7Fab, f7FabButtons, f7FabButton, f7Icon, f7Block } from 'framework7-vue';
9080
9181
export default {
9282
components: {
93-
f7Navbar, f7Page,
83+
f7Navbar, f7Page, f7Fab, f7FabButtons, f7FabButton, f7Icon, f7Block,
9484
},
9585
};
9686
</script>

0 commit comments

Comments
 (0)