TailUno Component

Appearance

Breadcrumb 面包屑 ​

响应式面包屑组件。

行内 Tailwind/UnoCSS 用法 ​

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

查看代码
html
<template>
  <nav class="inline-flex items-center space-x-1" aria-label="Breadcrumb">
    <a href="#" class="inline-flex items-center text-sm text-gray-700 hover:text-blue-600">
      <svg class="mr-1.5 size-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
        viewBox="0 0 20 20">
        <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
      </svg>
      首页
    </a>

    <svg class="mr-1 size-[18px] text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
        d="m19 12l12 12l-12 12" />
    </svg>

    <a href="#" class="ml-1 text-sm text-gray-700 hover:text-blue-600">
      项目
    </a>

    <svg class="mr-1 size-[18px] text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
      <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
        d="m19 12l12 12l-12 12" />
    </svg>

    <div aria-current="page" class="ml-1 text-sm text-gray-700">
      当前页面
    </div>
  </nav>
</template>

CSS 类用法 ​

使用预定义的CSS类。复制index.css的样式即可使用

查看代码
html
<template>
  <nav class="breadcrumb" aria-label="Breadcrumb">
    <a href="#" class="separator">
      首页
    </a>
    <a href="#" class="separator">
      项目
    </a>
    <div aria-current="page" class="separator">
      当前页面
    </div>
  </nav>
</template>

<style lang="css" scoped>
  @import './index.css';
</style>
css
.breadcrumb {
  @apply inline-flex items-center;
}

.breadcrumb .home-icon {
  @apply w-3 h-3 mr-2.5;
}

.breadcrumb .separator {
  @apply inline-flex items-center text-sm text-gray-700 hover:text-blue-600 pl-5;
}

.breadcrumb .separator:not(:first-child) {
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><path fill="none" stroke="gray" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m19 12l12 12l-12 12"/></svg>');
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 18px;
}

.breadcrumb .separator:first-child {
  box-sizing: border-box;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1"/></svg>');
  background-repeat: no-repeat;
  background-position: left;
  background-size: auto 16px;
}