feat(vue): new breadcrumbs component

framework7io · Feb 15, 2022 · b63676d · b63676d
1 parent 70d626a
commit b63676d
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 3 deletions.
diff --git a/kitchen-sink/react/src/pages/breadcrumbs.jsx b/kitchen-sink/react/src/pages/breadcrumbs.jsx
@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from 'react';
+import React from 'react';
 import {
   Navbar,
   Page,
@@ -13,7 +13,6 @@ import {
   List,
   ListItem,
   Link,
-  f7,
 } from 'framework7-react';
 
 export default () => {
@@ -120,7 +119,6 @@ export default () => {
           <BreadcrumbsSeparator />
           <BreadcrumbsItem>
             <Link iconF7="logo_apple" text="Apple" />
-            <Link></Link>
           </BreadcrumbsItem>
           <BreadcrumbsSeparator />
           <BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>

diff --git a/kitchen-sink/vue/src/pages/breadcrumbs.vue b/kitchen-sink/vue/src/pages/breadcrumbs.vue
@@ -0,0 +1,145 @@
+<template>
+  <f7-page>
+    <f7-navbar sliding back-link="Back" title="Breadcrumbs" />
+    <f7-block strong>
+      <p>
+        Breadcrumbs allow users to keep track and maintain awareness of their locations within the
+        app or website. They should be used for large sites and apps with hierarchically arranged
+        pages.
+      </p>
+    </f7-block>
+
+    <f7-block-title>Basic</f7-block-title>
+    <f7-block strong>
+      <f7-breadcrumbs>
+        <f7-breadcrumbs-item>
+          <f7-link>Home</f7-link>
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item>
+          <f7-link>Catalog</f7-link>
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item active>Phones</f7-breadcrumbs-item>
+      </f7-breadcrumbs>
+    </f7-block>
+
+    <f7-block-title>Scrollable</f7-block-title>
+    <f7-block-header>Breadcrumbs will be scrollable if they don't fit the screen</f7-block-header>
+    <f7-block strong>
+      <f7-breadcrumbs>
+        <f7-breadcrumbs-item>
+          <f7-link>Home</f7-link>
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item>
+          <f7-link>Catalog</f7-link>
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item>
+          <f7-link>Phones</f7-link>
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item>
+          <f7-link>Apple</f7-link>
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
+      </f7-breadcrumbs>
+    </f7-block>
+
+    <f7-block-title>Collapsed</f7-block-title>
+    <f7-block strong>
+      <f7-breadcrumbs>
+        <f7-breadcrumbs-item>
+          <f7-link>Home</f7-link>
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-collapsed class="popover-open" data-popover=".breadcrumbs-popover">
+          <f7-popover class="breadcrumbs-popover" style="width: 120px">
+            <f7-list>
+              <f7-list-item link title="Catalog" popover-close />
+              <f7-list-item link title="Phones" popover-close />
+              <f7-list-item link title="Apple" popover-close />
+            </f7-list>
+          </f7-popover>
+        </f7-breadcrumbs-collapsed>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
+      </f7-breadcrumbs>
+    </f7-block>
+
+    <f7-block-title>With Icons</f7-block-title>
+    <f7-block strong>
+      <f7-breadcrumbs>
+        <f7-breadcrumbs-item>
+          <f7-link
+            icon-ios="f7:house_fill"
+            icon-aurora="f7:house_fill"
+            icon-md="material:home"
+            text="Home"
+          />
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item>
+          <f7-link
+            icon-ios="f7:square_list_fill"
+            icon-aurora="f7:square_list_fill"
+            icon-md="material:list_alt"
+            text="Catalog"
+          />
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item>
+          <f7-link
+            icon-ios="f7:device_phone_portrait"
+            icon-aurora="f7:device_phone_portrait"
+            icon-md="material:smartphone"
+            text="Phones"
+          />
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item>
+          <f7-link icon-f7="logo_apple" text="Apple" />
+        </f7-breadcrumbs-item>
+        <f7-breadcrumbs-separator />
+        <f7-breadcrumbs-item active>iPhone 12</f7-breadcrumbs-item>
+      </f7-breadcrumbs>
+    </f7-block>
+  </f7-page>
+</template>
+<script>
+import {
+  f7Navbar,
+  f7Page,
+  f7Link,
+  f7Block,
+  f7BlockTitle,
+  f7BlockHeader,
+  f7Breadcrumbs,
+  f7BreadcrumbsItem,
+  f7BreadcrumbsSeparator,
+  f7BreadcrumbsCollapsed,
+  f7Popover,
+  f7List,
+  f7ListItem,
+} from 'framework7-vue';
+
+export default {
+  components: {
+    f7Navbar,
+    f7Page,
+    f7Link,
+    f7Block,
+    f7BlockTitle,
+    f7BlockHeader,
+    f7Breadcrumbs,
+    f7BreadcrumbsItem,
+    f7BreadcrumbsSeparator,
+    f7BreadcrumbsCollapsed,
+    f7Popover,
+    f7List,
+    f7ListItem,
+  },
+};
+</script>
diff --git a/kitchen-sink/vue/src/pages/home.vue b/kitchen-sink/vue/src/pages/home.vue
@@ -69,6 +69,11 @@
           <f7-icon icon="icon-f7" />
         </template>
       </f7-list-item>
+      <f7-list-item reload-detail link="/breadcrumbs/" title="Breadcrumbs">
+        <template #media>
+          <f7-icon icon="icon-f7" />
+        </template>
+      </f7-list-item>
       <f7-list-item reload-detail link="/buttons/" title="Buttons">
         <template #media>
           <f7-icon icon="icon-f7" />

diff --git a/kitchen-sink/vue/src/routes.js b/kitchen-sink/vue/src/routes.js
@@ -9,6 +9,7 @@ import Appbar from './pages/appbar.vue';
 import AreaChart from './pages/area-chart.vue';
 import Autocomplete from './pages/autocomplete.vue';
 import Badge from './pages/badge.vue';
+import Breadcrumbs from './pages/breadcrumbs.vue';
 import Buttons from './pages/buttons.vue';
 import Calendar from './pages/calendar.vue';
 import CalendarPage from './pages/calendar-page.vue';
@@ -219,6 +220,10 @@ export default [
     path: '/badge/',
     component: Badge,
   },
+  {
+    path: '/breadcrumbs/',
+    component: Breadcrumbs,
+  },
   {
     path: '/buttons/',
     component: Buttons,

diff --git a/src/vue/components/breadcrumbs-collapsed.vue b/src/vue/components/breadcrumbs-collapsed.vue
@@ -0,0 +1,21 @@
+<template>
+  <div ref="elRef" class="breadcrumbs-collapsed">
+    <span />
+    <slot />
+  </div>
+</template>
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'f7-breadcrumbs-collapsed',
+  props: {},
+  setup() {
+    const elRef = ref(null);
+
+    return {
+      elRef,
+    };
+  },
+};
+</script>
diff --git a/src/vue/components/breadcrumbs-item.vue b/src/vue/components/breadcrumbs-item.vue
@@ -0,0 +1,22 @@
+<template>
+  <div ref="elRef" :class="{ 'breadcrumbs-item': true, 'breadcrumbs-item-active': active }">
+    <slot />
+  </div>
+</template>
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'f7-breadcrumbs-item',
+  props: {
+    active: Boolean,
+  },
+  setup() {
+    const elRef = ref(null);
+
+    return {
+      elRef,
+    };
+  },
+};
+</script>
diff --git a/src/vue/components/breadcrumbs-separator.vue b/src/vue/components/breadcrumbs-separator.vue
@@ -0,0 +1,18 @@
+<template>
+  <div ref="elRef" class="breadcrumbs-separator" />
+</template>
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'f7-breadcrumbs-separator',
+  props: {},
+  setup() {
+    const elRef = ref(null);
+
+    return {
+      elRef,
+    };
+  },
+};
+</script>
diff --git a/src/vue/components/breadcrumbs.vue b/src/vue/components/breadcrumbs.vue
@@ -0,0 +1,20 @@
+<template>
+  <div ref="elRef" class="breadcrumbs">
+    <slot />
+  </div>
+</template>
+<script>
+import { ref } from 'vue';
+
+export default {
+  name: 'f7-breadcrumbs',
+  props: {},
+  setup() {
+    const elRef = ref(null);
+
+    return {
+      elRef,
+    };
+  },
+};
+</script>