@serverless-cd/goat-ui v0.0.28
组件库开发文档
组件库预览
https://unpkg.com/@serverless-cd/goat-ui/example/dist/index.html
开发
组件库结构
src/
组件开发目录
src/ui
普通组件
src/widgets
业务组件
example/
组件测试与预览目录
开发规范
以 src/ui/Test 下组件为例
src/ui(widgets)/
目录下新建目录,如src/ui/Test/
- 使用
index.ts
导出需要被导出的组件 - 使用
xxx.mdx
测试组件 - 启动 demo:
npm run demo
- 在
src/index.ts
中导出组件
注意事项: src 下新增目录(文件)需要重新启动npm run demo
注意事项:删除 src 下目录(文件)需要检查example/src/content/docs/ui
或example/src/content/docs/widgets
下是否有对应的xxx.mdx
一并删除
使用
组件库
astro.config.js
中配置:
import { autoImportComponents } from "@serverless-cd/goat-ui/src/utils";
import icon from "astro-icon";
export default defineConfig({
integrations: [
starlight(),
autoImportComponents(), //必须在starlight()后面注入
icon(),
],
});
- 在任意.mdx 文件中使用组件
<Test />
goatUIPlugin
提供默认 goat ui 主题
- 按照官方文档配置 tailwind
- 在
tailwind.config.js
中配置:
- 使用 goat UI 默认主题配置:
import { goatuiPlugins } from "@serverless-cd/goat-ui/src/plugins";
import { GOAT_UI_CONTENT_PATH } from "@serverless-cd/goat-ui/src/common";
/** @type {import('tailwindcss').Config} */
export default {
content: [GOAT_UI_CONTENT_PATH],
plugins: [...goatuiPlugins],
};
- 自定义主题配置
其中 accent 和 gray 支持按照字符串和对象格式配置
import {
goatuiPlugins,
} from "@serverless-cd/goat-ui/src/plugins";
import {GOAT_UI_CONTENT_PATH} from '@serverless-cd/goat-ui/src/common'
const accent = {
200: "#BEFFB3",
600: "#36FF39",
900: "#187559",
950: "#134F33",
};
const gray = {
100: "#F9AEA4",
200: "#F68787",
300: "#F65D5D",
400: "#F83D3D",
500: "#F73838",
700: "#F52323",
800: "#F64538",
900: "#F02D2D",
};
/** @type {import('tailwindcss').Config} */
export default {
content: [GOAT_UI_CONTENT_PATH],
plugins: [...goatuiPlugins],
daisyui: {
themes: [
{
light: {
gray: "#cccccc",
accent: "#00ffff",
primary: "#ff00ff",
secondary: "#ff00ff",
neutral: "#ff00ff",
"base-100": "#ffffff",
info: "#0000ff",
success: "#00ff00",
warning: "#00ff00",
error: "#ff0000",
},
},
{
dark: {
accent : {
200: "#BEFFB3",
600: "#36FF39",
900: "#187559",
950: "#134F33",
};
gray:{
100: "#F9AEA4",
200: "#F68787",
300: "#F65D5D",
400: "#F83D3D",
500: "#F73838",
700: "#F52323",
800: "#F64538",
900: "#F02D2D",
}
},
},
],
},
};
组件开发规范
- 组件开发中避免使用 script 标签 (需要存在的话,要拿出来讨论)
如果组件中存在 script 标签,并且设置 is:inline 指令,则会在使用该组件的页面中,自动将 script 标签中的内容插入到页面中,多次使用时会生成重复的 script 内容。 如果组件中存在 script 标签,不设置 is:inline 指令,则会在使用该组件的页面中,自动将 script 标签中的内容插入到页面中,多次使用时不会生成重复的 script 内容。
- 组件开发中避免使用 style 标签 (以 tailwindcss 为主)
如果组件中存在 style 标签,则会在使用该组件的页面中,自动将 style 标签中的内容插入到页面中,多次使用时会生成重复的style内容。
17 days ago
20 days ago
26 days ago
27 days ago
27 days ago
27 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago