DuoyunUI 模式

DuoyunUI 提供一些比较复杂的元素,通常由多个 DuoyunUI 元素组成,使用它们可以快速完成一些特定需求,比如创建一个落地页、控制后台,它们有一些独特的特点:

  • 元素名称为 <dy-pat-*>
  • 元素类名为 DyPat*Element

使用方式

和普通自定义元素一样使用它们,如有必要,可以通过复制粘贴进行自定义。

import { render, html } from '@mantou/gem';
import 'duoyun-ui/patterns/console';

render(
  html`
    <dy-pat-console
      name="DuoyunUI"
      .logo=${'https://duoyun-ui.gemjs.org/logo.png'}
      .routes=${routes}
      .navItems=${navItems}
      .contextMenus=${contextMenus}
      .userInfo=${userInfo}
      .keyboardAccess=${true}
    ></dy-pat-console>
  `,
  document.body,
);

NOTE

在 React/Vue/Svelte 中使用时无需指定 pattern 路径,但需要添加 pat 前缀,例如:

import { DyPatConsole } from 'duoyun-ui/react/pat-console';

例子