@antfu/设计

一个可定制的, 可堆叠 devtools-style Vue apps的设计系统: a UnoCSS 预设 (presetAnthonyDesign),一组Vue原始人,一个地基上 设计技能, 和颜色相通的a11y检查。 介于组件之间的东西 图书馆和阴影.

安装

pnpm add @antfu/design unocss vue

快开始

// uno.config.ts
import { presetAnthonyDesign } from '@antfu/design/unocss'
import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig, presetIcons, presetWebFonts, presetWind4 } from 'unocss'

export default defineConfig({
  presets: [
    presetAnthonyDesign({ primary: '#49833E' }),
    presetWind4(), // a base preset is required — bring your own
    presetIcons(),
    presetWebFonts({ fonts: { sans: 'DM Sans', mono: 'DM Mono' } }),
  ],
  // Required — most shipped styles recolor overlays with token `--at-apply`
  // directives; this transformer expands them (and lets you reuse tokens in CSS).
  // (vue-afloat.css is the exception — it themes via vue-afloat's own
  // `--vue-afloat-*` CSS variables and needs no transformer.)
  transformers: [transformerDirectives()],
  // The preset ships no z-index scale (stacking is the app's to own) and blocks
  // plain `z-<number>`. Define the named layers the overlay components use here —
  // these values are yours; tune them to fit your app's stack.
  shortcuts: {
    'z-nav': 'z-[30]',
    'z-dropdown': 'z-[40]',
    'z-tooltip': 'z-[45]',
    'z-toast': 'z-[50]',
    'z-modal-backdrop': 'z-[60]',
    'z-modal-content': 'z-[70]',
    'z-drawer-backdrop': 'z-[80]',
    'z-drawer-content': 'z-[90]',
  },
})

说对了 @unocss/eslint-plugin 对于反馈回路——它会显示块列表提示(例如平面) z-50(单位:千美元) 您的编辑器和CI 而不是静静地在建设时间下降.

// Components are imported by full path (no barrel) — categorized and prefixed:
import ActionButton from '@antfu/design/components/Action/ActionButton.vue'
import DisplayBadge from '@antfu/design/components/Display/DisplayBadge.vue'
import OverlayModal from '@antfu/design/components/Overlay/OverlayModal.vue'
import '@antfu/design/styles.css' // everything, incl. splitpanes/reka/vue-afloat overrides

styles.css 捆绑每个覆盖引擎的覆盖。 如果你不全部使用他们, 樱桃选手没有使用(splitpanes编号 :reka-ui海军陆战队从来就没有过船:

import '@antfu/design/styles/base.css'
import '@antfu/design/styles/scrollbar.css'
import '@antfu/design/styles/vue-afloat.css' // only if you use tooltips

货船 原始内容 .ts 编号 : .vue 来源 (不捆绑)——你的建筑 编成. 没有额外 content 需要配置: UnoCSS 默认扫描匹配 .vue编号 :.tsx (仅将其默认排除为CSS,而非 node_modules, (中文(简体) ), 因此您导入的组件会被自动取出 。 狦 对 设定 content.pipeline.include,注意这一点 替换 默认扫描而不是 扩展它 —— 重复默认值, 否则您自己的源已停止生成 .

这是一个 单人 预设为 非自定义: 它只贡献 antfu设计层(主题符号,语义快捷键,动态规则,严重程度). 由您组成基础预设,图标,字体和重置自己——并添加 @unocss/transformer-directives (运出样式使用符号) --at-apply +,建议, @unocss/eslint-plugin 用于反馈循环.

出口

软件包是 无国籍人 ——无暗相/剪贴板/托斯状态. 构成部分 不同计划的不同 colorScheme 道具;道克被控制. 使用 Vue 用户 直接为州.

两个 选入 帮助者减少锅炉板而不添加全局状态: provideColorScheme(() => isDark ? 'dark' : 'light') (从) @antfu/design/composables/colorScheme(中文(简体) ) 让了解计划的组成部分继承计划,而不是对道具进行线化,以及 useToast() (从) @antfu/design/composables/toast) 拥有敬酒队 FeedbackToasts两者都只读到你的状态.

正在移动已存在的应用程序

如果你的应用早于设计系统, 收养主要是 删除数字 :

• 删除本地符号快捷键 . 应用软件已经在 *-base 方言 (单位:千美元)bg-base, (中文(简体) ), color-base, (中文(简体) ), border-base, (中文(简体) ), op-fade, (中文(简体) ), btn-action, (中文(简体) ), badge-color-*, (中文(简体) ), color-scale-*,...)可以放下手卷 uno.config.ts shortcuts 块 -- -- 经常为20-170行 -- -- 并从 presetAnthonyDesign设置 primary 编号 : darkBackground 切换到您的现有值 (并保持你现有的 presetWebFonts 配置为- is —— 此预设没有 关于字体的意见),用于近零可视的diff.
• 地方公用事业 输入 @antfu/design/utils: 已复制 getHashColorFromString 编号 : getPluginColor, 字节 / 持续时间 / 时间 格式化器,模块-id / 路径解析器,以及 semver-range 解析器都存在那里.
• 跳出遗产 presetUno 别名. presetUno 是旧名 presetWind3; 切换到当前基数 (presetWind4 建议,或 presetWind3因此语义快捷键有可以扩展为的公用功能. 还是你 带上自己的图标、字体和 @unocss/reset ——预设的捆绑没有.
• 绕行计划,不是状态. 软件包没有暗/托斯状态:通过 :color-scheme (或打电话) provideColorScheme() 移动 {\fn黑体\fs22\bord1\shad0\3ahbe\4ah00\fscx67\fscy66\2chffffff\3ch808080}必须的土司单子 useToast() 队列.

那就跟着 重新设计协议 技术advanced-patterns: 原始地图 彩色 符号 一次将原始元素交换给一个家庭 然后运行 每一步后,对比扫描为光+暗.

嵌入阴影根

将组件挂入阴影根内——网络组件,devtools码头, 被支持的插入上覆线,但有两样东西不会在 他们自己的:

• 计划课开始 祖先,从不在您风格的元素上. 这个 暗变体编译为 a 后裔 选择器( e).dark .bg-base),所以一个节点 那个 实值 .dark 这不符合它自己的黑暗规则 有光主题的暗黑主机 切换 dark编号 :light (和 color-scheme在一个 包装.. display: contents 工作,所以不花费布局——放地表 对孩子的公用事业. :host(.dark) 这不是一个替代办法: 后人选取者,而相去相去相去也.
• Global CSS无法穿透分界线——内含样式. @antfu/design/styles/* (crollbar,reka-ui动画,vue-afloat,.) 必须是工作表的一部分你 与 UnoCSS 输出一起注入根。 他们写着 * 编号 : 未瞄准的选取者 正好让他们在任一地点工作 添加 scrollbar-gutter: stable 在您自己的滚动容器上,如果您想要地沟 保留.

门户内容不需要设置 。 每个传送的组件——对话框 (单位:千美元)OverlayModal, (中文(简体) ), OverlayDrawer, (中文(简体) ), OverlayConfirm),即弹出者FormSelect, (中文(简体) ), FormCombobox, (中文(简体) ), OverlayDropdown, (中文(简体) ), OverlayHoverCard, (中文(简体) ), OverlayContextMenu, (中文(简体) ), LayoutMenubar和 FeedbackToasts ——检测被包围的阴影根并 电传传送器装入附在容器内的容器,该容器还反映 dark编号 :light 最接近的图案包装器的分类 如此黑暗的代号 总是在那里解决。 过 明确 to (一个选择器或元素)来覆盖目标. 这个 水电/电车 故事把它们都挂在了阴影根里.

无障碍

彩相扫描( 轴- 核心 + Playwright) 运行一个 URL 财务报告和审定财务报表 阴暗 模式。 在程序上使用它:

import { formatContrastReport, runContrastScan } from '@antfu/design/a11y'

const result = await runContrastScan({ url: 'http://localhost:6006/iframe.html' })
console.log(formatContrastReport(result))

...或用 tsx数字 :

tsx node_modules/@antfu/design/a11y/cli.ts http://localhost:6006/iframe.html

构成部分

行动

显示

表单

重叠

版式

反馈

有导入路径的完整目录 : 核心组件。 。 。 .

键

语义快捷键( M)

严重性尺度

类型大小

动态

许可证

麻省理工学院 © 傅安东尼