feat(admin): 2nav-components

packages/admin/src/components/components/bottom-nav-component.tsx

@@ -0,0 +1,63 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+
+import '@omiu/bottom-nav'
+import '@omiu/icon/favorite'
+import '@omiu/icon/location-on'
+import '@omiu/icon/restore'
+
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'bottom-nav-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = sheet.target
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="底部导航"
+          describe={'移动端底部导航'}
+          code={`
+\`\`\`jsx
+<m-bottom-nav selected-color='#07c160' id='myNav' items={[
+  { icon: 'favorite', label: 'Favorites', selected: true },
+  { icon: 'location-on', label: 'Nearby' },
+  { icon: 'restore', label: 'Recents' }
+]}>
+</m-bottom-nav>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex justify-around px-5 py-5`}>
+
+          <m-bottom-nav selected-color='#07c160' id='myNav' items={[
+            { icon: 'favorite', label: 'Favorites', selected: true },
+            { icon: 'location-on', label: 'Nearby' },
+            { icon: 'restore', label: 'Recents' }
+          ]}>
+          </m-bottom-nav>
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}

packages/admin/src/components/components/breadcrumb-component.tsx

@@ -0,0 +1,73 @@
+import { WeElement, h, tag } from 'omi'
+import { tw, sheet } from 'omi-twind'
+
+import '@omiu/breadcrumb'
+import '@omiu/icon/help'
+import '@omiu/icon/people'
+import '../docs/admin-docs'
+import './code-demo'
+import './code-demo/container'
+
+interface Props { }
+
+const tagName = 'breadcrumb-component'
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      [tagName]: Omi.Props & Props
+    }
+  }
+}
+
+@tag(tagName)
+export default class extends WeElement<Props> {
+
+  static css = sheet.target
+
+  install() { }
+
+  render() {
+    return (
+      <code-demo-container>
+        <code-demo
+          title="面包屑"
+          describe={'显示当前页面在系统层级结构中的位置，并能导航'}
+          code={`
+\`\`\`jsx
+<o-breadcrumb split="/" items={[
+  { text: 'Home' },
+  { text: 'Helper' },
+  { text: 'About' }
+]}></o-breadcrumb>
+
+
+<o-breadcrumb split="/" items={[
+  { text: 'Home', href:'https://tencent.github.io/omi/', icon:'home' },
+  { text: 'Helper', icon:'help' },
+  { text: 'About', icon: 'people' }
+]}></o-breadcrumb>
+\`\`\`
+          `}
+        >
+          <div slot="demo" class={tw`flex justify-around px-5 py-5`}>
+
+          <o-breadcrumb split="/" items={[
+            { text: 'Home' },
+            { text: 'Helper' },
+            { text: 'About' }
+          ]}></o-breadcrumb>
+
+
+          <o-breadcrumb split="/" items={[
+            { text: 'Home', href:'https://tencent.github.io/omi/', icon:'home' },
+            { text: 'Helper', icon:'help' },
+            { text: 'About', icon: 'people' }
+          ]}></o-breadcrumb>
+
+          </div>
+        </code-demo>
+
+      </code-demo-container>
+    )
+  }
+}