@aaronshaf/panda-ui 中文文档教程

Question

Panda UI 是一套实验性的样式表和网络组件，类似于（并基于）InstUI。

Theme stylesheets

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/@aaronshaf/panda-ui@1/dist/themes/canvas.css"
/>
<!-- or -->
<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/@aaronshaf/panda-ui@1/dist/themes/canvas-high-contrast.css"
/>

.body {
  font-family: var(--typography-fontFamily);
}

Web components

Alert

<script
  src="https://unpkg.com/@aaronshaf/panda-ui@1/dist/elements/alert.js"
  defer
></script>
<script
  src="https://unpkg.com/@aaronshaf/panda-ui@1/dist/icons/checkmark.js"
  defer
></script>

或

import "@aaronshaf/panda-ui/dist/elements/alert.js";
import "@aaronshaf/panda-ui/dist/icons/checkmark.js";

<panda-alert variant="success">
  <div slot="icon">
    <panda-icon-checkmark></panda-icon-checkmark>
  </div>
  <div slot="content">
    Sample success alert text.
  </div>
</panda-alert>

Button

<script src="https://unpkg.com/@aaronshaf/panda-ui@1/dist/elements/button.js"></script>

或

import "@aaronshaf/panda-ui/dist/elements/button.js";

<panda-button variant="primary">
  Primary button
</panda-button>

Progress Bar

<script
  src="https://unpkg.com/@aaronshaf/panda-ui@1/dist/elements/progress-bar.js"
  defer
></script>

或

import "@aaronshaf/panda-ui/dist/elements/progress-bar.js";

<panda-progress-bar
  label="Loading completion"
  max="60"
  value="20"
  variant="primary"
>
  Primary button
</panda-progress-bar>

Dev

yarn
yarn run prepare
yarn run dev