frappe-ui

frappe-ui

通过组合 frappe-ui 组件，并使用该库的 语义化 Tailwind 令牌进行样式设置，构建外观和体验都与 Frappe 产品一致的 UI。

快速开始

<script setup>
import { Button, Dialog, FormControl } from 'frappe-ui'
import { ref } from 'vue'

const open = ref(false)
const name = ref('')
</script>

<template>
  <div class="p-4 bg-surface-base text-ink-gray-8">
    <Button variant="solid" theme="gray" @click="open = true">New Task</Button>
    <Dialog v-model:open="open" title="Create Task">
      <FormControl v-model="name" label="Title" required />
    </Dialog>
  </div>
</template>

查阅位置

属性名、属性值类型、插槽名和令牌名都在这些文件中，而不在本文中。编写标记之前，请先打开所需的文件。

编写内容	先打开此文件
任意组件、任意页面、任意 Tailwind 类	CORE.md
任何获取或写入数据的内容	DATA.md
全新的 Vite + Vue 3 项目	SETUP.md

约定

以下约定适用于所有组件。其他内容因组件而异，详见 CORE.md。

1. 选择组件。 每个交互元素都来自 CORE.md。原生 HTML 仅用于布局：网格、弹性布局、间距容器。
2. 颜色由两个属性控制：variant 和 theme。 可用值因组件而异—— CORE.md 列出了每个组件的可用值。在自定义标记中，颜色来自 语义色阶：bg-surface-*、text-ink-*、border-outline-*。
3. 双向状态使用 v-model。 输入组件使用 v-model。覆盖层使用 v-model:open。Combobox 和 MultiSelect 还支持可选的 v-model:query。 List 还支持 v-model:selection 和 v-model:active。
4. 图标是 CSS 类。 <span class="lucide-edit size-4" aria-hidden="true" />。 名为 icon 的属性接受字符串 "lucide-edit"。
5. 插槽名因组件而异，不能通用。 编写 <template #…> 之前，请先阅读 CORE.md 中对应组件的条目。
6. Frappe API 调用通过 use* 组合式函数进行——useCall、 useList、useDoc、useDoctype、useNewDoc，均由 frappe-ui 导出。每个函数都有自己的选项集和返回结构； DATA.md 分别列出了这些函数。