Skip to content

Commit b63676d

Browse files
nolimits4webnolimits4web
committed
feat(vue): new breadcrumbs component
1 parent 70d626a commit b63676d

File tree

8 files changed

+237
-3
lines changed

8 files changed

+237
-3
lines changed

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useRef, useState, useEffect } from 'react';
1+
import React from 'react';
22
import {
33
Navbar,
44
Page,
@@ -13,7 +13,6 @@ import {
1313
List,
1414
ListItem,
1515
Link,
16-
f7,
1716
} from 'framework7-react';
1817

1918
export default () => {
@@ -120,7 +119,6 @@ export default () => {
120119
<BreadcrumbsSeparator />
121120
<BreadcrumbsItem>
122121
<Link iconF7="logo_apple" text="Apple" />
123-
<Link></Link>
124122
</BreadcrumbsItem>
125123
<BreadcrumbsSeparator />
126124
<BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>

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

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
<template>
2+
<f7-page>
3+
<f7-navbar sliding back-link="Back" title="Breadcrumbs" />
4+
<f7-block strong>
5+
<p>
6+
Breadcrumbs allow users to keep track and maintain awareness of their locations within the
7+
app or website. They should be used for large sites and apps with hierarchically arranged
8+
pages.
9+
</p>
10+
</f7-block>
11+
12+
<f7-block-title>Basic</f7-block-title>
13+
<f7-block strong>
14+
<f7-breadcrumbs>
15+
<f7-breadcrumbs-item>
16+
<f7-link>Home</f7-link>
17+
</f7-breadcrumbs-item>
18+
<f7-breadcrumbs-separator />
19+
<f7-breadcrumbs-item>
20+
<f7-link>Catalog</f7-link>
21+
</f7-breadcrumbs-item>
22+
<f7-breadcrumbs-separator />
23+
<f7-breadcrumbs-item active>Phones</f7-breadcrumbs-item>
24+
</f7-breadcrumbs>
25+
</f7-block>
26+
27+
<f7-block-title>Scrollable</f7-block-title>
28+
<f7-block-header>Breadcrumbs will be scrollable if they don't fit the screen</f7-block-header>
29+
<f7-block strong>
30+
<f7-breadcrumbs>
31+
<f7-breadcrumbs-item>
32+
<f7-link>Home</f7-link>
33+
</f7-breadcrumbs-item>
34+
<f7-breadcrumbs-separator />
35+
<f7-breadcrumbs-item>
36+
<f7-link>Catalog</f7-link>
37+
</f7-breadcrumbs-item>
38+
<f7-breadcrumbs-separator />
39+
<f7-breadcrumbs-item>
40+
<f7-link>Phones</f7-link>
41+
</f7-breadcrumbs-item>
42+
<f7-breadcrumbs-separator />
43+
<f7-breadcrumbs-item>
44+
<f7-link>Apple</f7-link>
45+
</f7-breadcrumbs-item>
46+
<f7-breadcrumbs-separator />
47+
<f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
48+
</f7-breadcrumbs>
49+
</f7-block>
50+
51+
<f7-block-title>Collapsed</f7-block-title>
52+
<f7-block strong>
53+
<f7-breadcrumbs>
54+
<f7-breadcrumbs-item>
55+
<f7-link>Home</f7-link>
56+
</f7-breadcrumbs-item>
57+
<f7-breadcrumbs-separator />
58+
<f7-breadcrumbs-collapsed class="popover-open" data-popover=".breadcrumbs-popover">
59+
<f7-popover class="breadcrumbs-popover" style="width: 120px">
60+
<f7-list>
61+
<f7-list-item link title="Catalog" popover-close />
62+
<f7-list-item link title="Phones" popover-close />
63+
<f7-list-item link title="Apple" popover-close />
64+
</f7-list>
65+
</f7-popover>
66+
</f7-breadcrumbs-collapsed>
67+
<f7-breadcrumbs-separator />
68+
<f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
69+
</f7-breadcrumbs>
70+
</f7-block>
71+
72+
<f7-block-title>With Icons</f7-block-title>
73+
<f7-block strong>
74+
<f7-breadcrumbs>
75+
<f7-breadcrumbs-item>
76+
<f7-link
77+
icon-ios="f7:house_fill"
78+
icon-aurora="f7:house_fill"
79+
icon-md="material:home"
80+
text="Home"
81+
/>
82+
</f7-breadcrumbs-item>
83+
<f7-breadcrumbs-separator />
84+
<f7-breadcrumbs-item>
85+
<f7-link
86+
icon-ios="f7:square_list_fill"
87+
icon-aurora="f7:square_list_fill"
88+
icon-md="material:list_alt"
89+
text="Catalog"
90+
/>
91+
</f7-breadcrumbs-item>
92+
<f7-breadcrumbs-separator />
93+
<f7-breadcrumbs-item>
94+
<f7-link
95+
icon-ios="f7:device_phone_portrait"
96+
icon-aurora="f7:device_phone_portrait"
97+
icon-md="material:smartphone"
98+
text="Phones"
99+
/>
100+
</f7-breadcrumbs-item>
101+
<f7-breadcrumbs-separator />
102+
<f7-breadcrumbs-item>
103+
<f7-link icon-f7="logo_apple" text="Apple" />
104+
</f7-breadcrumbs-item>
105+
<f7-breadcrumbs-separator />
106+
<f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
107+
</f7-breadcrumbs>
108+
</f7-block>
109+
</f7-page>
110+
</template>
111+
<script>
112+
import {
113+
f7Navbar,
114+
f7Page,
115+
f7Link,
116+
f7Block,
117+
f7BlockTitle,
118+
f7BlockHeader,
119+
f7Breadcrumbs,
120+
f7BreadcrumbsItem,
121+
f7BreadcrumbsSeparator,
122+
f7BreadcrumbsCollapsed,
123+
f7Popover,
124+
f7List,
125+
f7ListItem,
126+
} from 'framework7-vue';
127+
128+
export default {
129+
components: {
130+
f7Navbar,
131+
f7Page,
132+
f7Link,
133+
f7Block,
134+
f7BlockTitle,
135+
f7BlockHeader,
136+
f7Breadcrumbs,
137+
f7BreadcrumbsItem,
138+
f7BreadcrumbsSeparator,
139+
f7BreadcrumbsCollapsed,
140+
f7Popover,
141+
f7List,
142+
f7ListItem,
143+
},
144+
};
145+
</script>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@
6969
<f7-icon icon="icon-f7" />
7070
</template>
7171
</f7-list-item>
72+
<f7-list-item reload-detail link="/breadcrumbs/" title="Breadcrumbs">
73+
<template #media>
74+
<f7-icon icon="icon-f7" />
75+
</template>
76+
</f7-list-item>
7277
<f7-list-item reload-detail link="/buttons/" title="Buttons">
7378
<template #media>
7479
<f7-icon icon="icon-f7" />

‎kitchen-sink/vue/src/routes.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Appbar from './pages/appbar.vue';
99
import AreaChart from './pages/area-chart.vue';
1010
import Autocomplete from './pages/autocomplete.vue';
1111
import Badge from './pages/badge.vue';
12+
import Breadcrumbs from './pages/breadcrumbs.vue';
1213
import Buttons from './pages/buttons.vue';
1314
import Calendar from './pages/calendar.vue';
1415
import CalendarPage from './pages/calendar-page.vue';
@@ -219,6 +220,10 @@ export default [
219220
path: '/badge/',
220221
component: Badge,
221222
},
223+
{
224+
path: '/breadcrumbs/',
225+
component: Breadcrumbs,
226+
},
222227
{
223228
path: '/buttons/',
224229
component: Buttons,

‎src/vue/components/breadcrumbs-collapsed.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div ref="elRef" class="breadcrumbs-collapsed">
3+
<span />
4+
<slot />
5+
</div>
6+
</template>
7+
<script>
8+
import { ref } from 'vue';
9+
10+
export default {
11+
name: 'f7-breadcrumbs-collapsed',
12+
props: {},
13+
setup() {
14+
const elRef = ref(null);
15+
16+
return {
17+
elRef,
18+
};
19+
},
20+
};
21+
</script>

‎src/vue/components/breadcrumbs-item.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div ref="elRef" :class="{ 'breadcrumbs-item': true, 'breadcrumbs-item-active': active }">
3+
<slot />
4+
</div>
5+
</template>
6+
<script>
7+
import { ref } from 'vue';
8+
9+
export default {
10+
name: 'f7-breadcrumbs-item',
11+
props: {
12+
active: Boolean,
13+
},
14+
setup() {
15+
const elRef = ref(null);
16+
17+
return {
18+
elRef,
19+
};
20+
},
21+
};
22+
</script>

‎src/vue/components/breadcrumbs-separator.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div ref="elRef" class="breadcrumbs-separator" />
3+
</template>
4+
<script>
5+
import { ref } from 'vue';
6+
7+
export default {
8+
name: 'f7-breadcrumbs-separator',
9+
props: {},
10+
setup() {
11+
const elRef = ref(null);
12+
13+
return {
14+
elRef,
15+
};
16+
},
17+
};
18+
</script>

‎src/vue/components/breadcrumbs.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div ref="elRef" class="breadcrumbs">
3+
<slot />
4+
</div>
5+
</template>
6+
<script>
7+
import { ref } from 'vue';
8+
9+
export default {
10+
name: 'f7-breadcrumbs',
11+
props: {},
12+
setup() {
13+
const elRef = ref(null);
14+
15+
return {
16+
elRef,
17+
};
18+
},
19+
};
20+
</script>

0 commit comments

Comments
 (0)