🔥 新プロジェクトのご紹介 t0ggles -究極のプロジェクト管理ツール！ 🔥

パンくずリスト Vue コンポーネント

パンくずリストは、ユーザーがアプリやウェブサイト内での現在位置を追跡し、認識を維持できるようにします。階層的に配置されたページを持つ大規模なサイトやアプリで使用することをお勧めします。

パンくずリストコンポーネント

以下のコンポーネントが含まれています。

  • パンくずリスト
  • BreadcrumbsItem
  • BreadcrumbsSeparator
  • BreadcrumbsCollapsed

パンくずリストプロパティ

名前型デフォルト説明
component文字列'div'

コンポーネントのHTML要素

fontSizeIos文字列'text-[17px]'

iOSテーマのフォントサイズ

fontSizeMaterial文字列'text-[14px]'

Materialテーマのフォントサイズ

パンくずリストアイテムプロパティ

名前型デフォルト説明
activeブール値false

パンくずリストアイテムをアクティブ/現在（通常はパンくずリストの最後のアイテム）としてマークします。

colorsオブジェクト

Tailwind CSSカラークラスを含むオブジェクト

colors.bgIos文字列''
colors.bgMaterial文字列'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.textActiveIos文字列'text-black dark:text-white'
colors.textActiveMaterial文字列'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.textIos文字列'text-black text-opacity-55 dark:text-white dark:text-opacity-55'
colors.textMaterial文字列'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
component文字列'div'

コンポーネントのHTML要素

パンくずリスト折りたたみプロパティ

名前型デフォルト説明
colorsオブジェクト

Tailwind CSSカラークラスを含むオブジェクト

colors.bgIos文字列'bg-black bg-opacity-15 dark:bg-white dark:bg-opacity-15'
colors.bgMaterial文字列'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.dotBgIos文字列'bg-black dark:bg-white'
colors.dotBgMaterial文字列'bg-md-light-primary dark:bg-md-dark-primary'
component文字列'div'

コンポーネントのHTML要素

例

Breadcrumbs.vue
<template>
  <k-page>
    <k-navbar title="Breadcrumbs" />


    <k-block strong inset>
      <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>
    </k-block>


    <k-block-title>Basic</k-block-title>
    <k-block strong-ios outline-ios>
      <k-breadcrumbs>
        <k-breadcrumbs-item>
          <k-link>Home</k-link>
        </k-breadcrumbs-item>
        <k-breadcrumbs-separator />
        <k-breadcrumbs-item>
          <k-link>Catalog</k-link>
        </k-breadcrumbs-item>
        <k-breadcrumbs-separator />
        <k-breadcrumbs-item active>Phones</k-breadcrumbs-item>
      </k-breadcrumbs>
    </k-block>


    <k-block-title>Scrollable</k-block-title>
    <k-block-header
      >Breadcrumbs will be scrollable if they don't fit the
      screen</k-block-header
    >
    <k-block strong-ios outline-ios>
      <k-breadcrumbs>
        <k-breadcrumbs-item>
          <k-link>Home</k-link>
        </k-breadcrumbs-item>
        <k-breadcrumbs-separator />
        <k-breadcrumbs-item>
          <k-link>Catalog</k-link>
        </k-breadcrumbs-item>
        <k-breadcrumbs-separator />
        <k-breadcrumbs-item>
          <k-link>Phones</k-link>
        </k-breadcrumbs-item>
        <k-breadcrumbs-separator />
        <k-breadcrumbs-item>
          <k-link>Apple</k-link>
        </k-breadcrumbs-item>
        <k-breadcrumbs-separator />
        <k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
      </k-breadcrumbs>
    </k-block>


    <k-block-title>Collapsed</k-block-title>
    <k-block strong-ios outline-ios>
      <k-breadcrumbs>
        <k-breadcrumbs-item>
          <k-link>Home</k-link>
        </k-breadcrumbs-item>
        <k-breadcrumbs-separator />
        <k-breadcrumbs-collapsed
          ref="popoverTargetRef"
          @click="() => (popoverOpened = true)"
        />


        <k-breadcrumbs-separator />
        <k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
      </k-breadcrumbs>
    </k-block>
    <k-popover
      :opened="popoverOpened"
      :target="popoverTargetRef"
      style="width: 120px"
      @backdropclick="() => (popoverOpened = false)"
    >
      <k-list nested>
        <k-list-item
          link
          title="Catalog"
          @click="() => (popoverOpened = false)"
        />
        <k-list-item
          link
          title="Phones"
          @click="() => (popoverOpened = false)"
        />
        <k-list-item
          link
          title="Apple"
          @click="() => (popoverOpened = false)"
        />
      </k-list>
    </k-popover>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kLink,
    kBlock,
    kBlockTitle,
    kBlockHeader,
    kBreadcrumbs,
    kBreadcrumbsItem,
    kBreadcrumbsSeparator,
    kBreadcrumbsCollapsed,
    kPopover,
    kList,
    kListItem,
  } from 'konsta/vue';


  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kLink,
      kBlock,
      kBlockTitle,
      kBlockHeader,
      kBreadcrumbs,
      kBreadcrumbsItem,
      kBreadcrumbsSeparator,
      kBreadcrumbsCollapsed,
      kPopover,
      kList,
      kListItem,
    },
    setup() {
      const popoverOpened = ref(false);
      const popoverTargetRef = ref(null);
      return {
        popoverOpened,
        popoverTargetRef,
      };
    },
  };
</script>
ライセンス MIT.
2022 © Konsta UI by nolimits4web.