导航路径

导航路径使用户能够跟踪和了解其在应用或网站中的位置。它们应该用于具有分层排列页面的大型网站和应用。

导航路径布局

常见的导航路径布局如下

<div class="breadcrumbs">

  <div class="breadcrumbs-item">
    <a href="/home/" class="link">
      Home
    </a>
  </div>

  <div class="breadcrumbs-separator"></div>

  <div class="breadcrumbs-item">
    <a href="/catalog/" class="link">
      Catalog
    </a>
  </div>

  <div class="breadcrumbs-separator"></div>

  <div class="breadcrumbs-item breadcrumbs-item-active">
    Phones
  </div>

  ...
</div>

其中

breadcrumbs - 主导航路径容器
- breadcrumbs-item - 单个导航路径项。可以包含任何内容
- breadcrumbs-item-active - 当前/活动导航项
- breadcrumbs-separator - 项目之间的分隔符图标

折叠面包屑布局

当面包屑项目过多时，可以添加自定义的“折叠”按钮，例如在其中使用弹出窗口

<div class="breadcrumbs">

  <div class="breadcrumbs-item">
    <a href="/home/" class="link">
      Home
    </a>
  </div>

  <!-- Collapsed button, also triggers Popover -->
  <div class="breadcrumbs-collapsed link popover-open" data-popover=".my-popover">
    <span></span>
    <!-- Popover inside of collapsed button -->
    <div class="popover my-popover">
      <div class="popover-inner">
        <div class="list">
          <ul>
            <li>
              <a href="#" class="item-link item-content popover-close">
                <div class="item-inner">
                  <div class="item-title">Catalog</div>
                </div>
              </a>
            </li>
            ...
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="breadcrumbs-item breadcrumbs-item-active">
    Phones
  </div>

  ...
</div>

示例

breadcrumbs.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Breadcrumbs</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block block-strong-ios block-outline-ios">
        <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>
      </div>
      <div class="block-title">Basic</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              Home
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              Catalog
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item breadcrumbs-item-active">
            Phones
          </div>
        </div>
      </div>

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

      <div class="block-title">Collapsed</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              Home
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-collapsed link popover-open" data-popover=".breadcrumbs-popover">
            <span></span>
            <div class="popover breadcrumbs-popover" style="width: 120px">
              <div class="popover-inner">
                <div class="list">
                  <ul>
                    <li>
                      <a class="item-link item-content popover-close">
                        <div class="item-inner">
                          <div class="item-title">Catalog</div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a class="item-link item-content popover-close">
                        <div class="item-inner">
                          <div class="item-title">Phones</div>
                        </div>
                      </a>
                    </li>
                    <li>
                      <a class="item-link item-content popover-close">
                        <div class="item-inner">
                          <div class="item-title">Apple</div>
                        </div>
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item breadcrumbs-item-active">
            iPhone 12
          </div>
        </div>
      </div>

      <div class="block-title">With Icons</div>
      <div class="block block-strong-ios block-outline-ios">
        <div class="breadcrumbs">
          <div class="breadcrumbs-item">
            <a class="link">
              <i class="icon f7-icons if-not-md">house_fill</i>
              <i class="icon material-icons if-md">home</i>
              <span>Home</span>
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              <i class="icon f7-icons if-not-md">square_list_fill</i>
              <i class="icon material-icons if-md">list_alt</i>
              <span>Catalog</span>
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              <i class="icon f7-icons if-not-md">device_phone_portrait</i>
              <i class="icon material-icons if-md">smartphone</i>
              <span>Phones</span>
            </a>
          </div>
          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item">
            <a class="link">
              <i class="icon f7-icons if-not-md">logo_apple</i>
              <i class="icon f7-icons if-md">logo_apple</i>
              <span>Apple</span>
            </a>
          </div>

          <div class="breadcrumbs-separator"></div>
          <div class="breadcrumbs-item breadcrumbs-item-active">
            iPhone 12
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, ctx) => {


    return $render;
  }

</script>

CSS 变量

以下是相关的 CSS 变量（CSS 自定义属性）列表。

:root {
  --f7-breadcrumbs-spacing: 12px;
  --f7-breadcrumbs-padding: 2px 0;
  --f7-breadcrumbs-icon-size: 24px;
  --f7-breadcrumbs-separator-color: rgba(0, 0, 0, 0.35);
}
:root .dark,
:root.dark {
  --f7-breadcrumbs-separator-color: rgba(255, 255, 255, 0.35);
}
.ios {
  --f7-breadcrumbs-item-bg-color: transparent;
  --f7-breadcrumbs-collapsed-border-radius: 4px;
  --f7-breadcrumbs-collapsed-padding: 0px 6px;
  --f7-breadcrumbs-separator-icon: 'chevron_right_ios';
  --f7-breadcrumbs-font-size: 17px;
  --f7-breadcrumbs-item-border-radius: 0px;
  --f7-breadcrumbs-item-padding: 0px;
  --f7-breadcrumbs-item-font-weight: normal;
  --f7-breadcrumbs-item-active-font-weight: 600;
  --f7-breadcrumbs-item-color: rgba(0, 0, 0, 0.55);
  --f7-breadcrumbs-item-active-color: #000;
  --f7-breadcrumbs-collapsed-bg-color: rgba(0, 0, 0, 0.15);
  --f7-breadcrumbs-collapsed-color: rgba(0, 0, 0, 0.75);
}
.ios .dark,
.ios.dark {
  --f7-breadcrumbs-item-color: rgba(255, 255, 255, 0.75);
  --f7-breadcrumbs-item-active-color: #fff;
  --f7-breadcrumbs-collapsed-bg-color: rgba(255, 255, 255, 0.15);
  --f7-breadcrumbs-collapsed-color: rgba(255, 255, 255, 0.75);
}
.md {
  --f7-breadcrumbs-collapsed-border-radius: 8px;
  --f7-breadcrumbs-collapsed-padding: 12px 8px;
  --f7-breadcrumbs-separator-icon: 'chevron_right_md';
  --f7-breadcrumbs-font-size: 14px;
  --f7-breadcrumbs-item-border-radius: 8px;
  --f7-breadcrumbs-item-padding: 4px 8px;
  --f7-breadcrumbs-item-font-weight: 500;
  --f7-breadcrumbs-item-active-font-weight: 500;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-breadcrumbs-item-color: var(--f7-theme-color);
  --f7-breadcrumbs-item-bg-color: var(--f7-md-secondary-container);
  --f7-breadcrumbs-item-active-color: var(--f7-md-on-secondary-container);
  --f7-breadcrumbs-collapsed-color: var(--f7-theme-color);
  --f7-breadcrumbs-collapsed-bg-color: var(--f7-md-secondary-container);
}

改进此文档

本页内容

导航路径布局
折叠面包屑布局
示例
CSS 变量