feat(omi-templates): breadcrumb component

packages/omi-templates/src/components/navbar.tsx

@@ -251,7 +251,7 @@ export class Navbar extends Component<Props> {
                       </svg>
                     )}
                     {navbarItem.children && (
-                      <ul class="md:absolute md:left-1/2 md:-translate-x-1/2 w-auto  mt-2 text-sm md:text-base dark:bg-background bg-[#fafafa] md:border static text-zinc-600 overflow-hidden md:shadow-md md:invisible group-hover:visible transition-all duration-150 delay-100 rounded-md hover:text-primary">
+                      <ul class="md:absolute md:left-1/2 md:-translate-x-1/2 w-auto  mt-2 text-sm md:text-base dark:bg-background bg-[#fafafa] md:border static text-zinc-600 overflow-hidden md:shadow-md md:invisible group-hover:visible transition-all duration-150 delay-100 rounded-md hover:text-primary z-50">
                         {navbarItem.children.map((navbarItemChild: NavbarItem) => {
                           return this.renderNavbarItemChild(navbarItemChild)
                         })}

packages/omi-templates/src/components/omiu/breadcrumb.tsx

@@ -0,0 +1,65 @@
+import { Component, tag } from 'omi'
+
+type BreadcrumbItem = {
+  label: string
+  href: string
+  icon: string
+  separator?: string
+}
+
+type BreadcrumbProps = {
+  items?: BreadcrumbItem[]
+}
+
+@tag('o-breadcrumb')
+export class Breadcrumb extends Component<BreadcrumbProps> {
+  static css = `
+  :host {
+    display: inline-flex;
+  }
+  `
+  static defaultProps = {
+    items: [],
+  }
+
+  render() {
+    return (
+      <nav class="flex" aria-label="Breadcrumb">
+        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+          {this.props.items?.map((item, index) => {
+            return (
+              <li class="inline-flex items-center">
+                <div class="flex items-center">
+                  {index > 0 && (
+                    <svg
+                      class="rtl:rotate-180 w-3 h-3 text-zinc-400 mx-1"
+                      aria-hidden="true"
+                      xmlns="http://www.w3.org/2000/svg"
+                      fill="none"
+                      viewBox="0 0 6 10"
+                    >
+                      <path
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1"
+                        d="m1 9 4-4-4-4"
+                      />
+                    </svg>
+                  )}
+                  <a
+                    href={item.href}
+                    class="inline-flex items-center ms-1 text-sm font-medium text-zinc-700 hover:text-primary md:ms-2 dark:text-zinc-400 dark:hover:text-white"
+                  >
+                    {item.icon && <i class={`t-icon t-icon-${item.icon} mr-1`}></i>}
+                    {item.label}
+                  </a>
+                </div>
+              </li>
+            )
+          })}
+        </ol>
+      </nav>
+    )
+  }
+}

packages/omi-templates/src/pages/components.tsx

@@ -1,6 +1,7 @@
 import '../components/omiu/calendar/index'
 import '../components/omiu/button'
 import '../components/omiu/switch'
+import '../components/omiu/breadcrumb'
 
 export function Questionnaire() {
   return (
@@ -105,7 +106,8 @@ export function Questionnaire() {
         </div>
       </div>
 
-      <h1 class="text-3xl font-bold mb-6">Switch 开关</h1>
+      <hr class="my-3"></hr>
+      <h1 class="text-3xl font-bold my-6">Switch 开关</h1>
       <p>用于两个互斥选项，用来打开或关闭选项的选择控件。</p>
 
       <h2 class="text-2xl font-bold my-6">不同尺寸</h2>
@@ -121,6 +123,28 @@ export function Questionnaire() {
         <o-switch disabled size="medium"></o-switch>
         <o-switch disabled size="large"></o-switch>
       </div>
+
+      <hr class="my-3"></hr>
+      <h1 class="text-3xl font-bold my-6">Breadcrumb 面包屑</h1>
+      <p>显示当前页面在系统层级结构的位置，并能返回之前任意层级的页面。</p>
+
+      <h2 class="text-2xl font-bold my-6">默认</h2>
+      <div class="flex gap-6 items-center">
+        <o-breadcrumb
+          items={[
+            {
+              label: 'Home',
+              icon: 'home',
+            },
+            {
+              label: 'Project',
+            },
+            {
+              label: 'OMI',
+            },
+          ]}
+        ></o-breadcrumb>
+      </div>
     </div>
   )
 }