@whouu/geist-design NPM

geist-design

🔑 安装

使用 pnpm 安装

pnpm add @whouu/geist-design

使用 npm 安装

npm install @whouu/geist-design

使用 yarn 安装

yarn add @whouu/geist-design

🎉 快速上手

在 main.ts 中引入下面内容

import { createApp } from 'vue'
import App from './App.vue'
import GeistDesign from '@whouu/geist-design'
import '@whouu/geist-design/dist/index.css'

createApp(App).use(GeistDesign).mount('#app')

🪂 快速体验

<head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@whouu/geist-design/dist/index.css"
  />
</head>

<body>
  <div id="app">
    <g-button auto>欢迎使用 Geist Design！</g-button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.global.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@whouu/geist-design/dist/index.umd.js"></script>
  <script>
    const { createApp } = Vue

    const app = createApp()

    app.use(GeistDesign.default)
    app.mount('#app')
  </script>
</body>

🐳 相关链接

💬 执照

MIT

✨ 组件

通用
- 按钮 Button
- 代码 Code
- 图标 Icons
布局
- 占位符 Spacer
- 栅格 Grid
- 布局 Layout
容器
- 卡片 Card
- 控件组 Fieldset
- 折叠框 Collapse
表单
- 输入框 Input
- 文本输入框 Textarea
- 滑块 Slider
- 开关 Toggle
- 多选框 Checkbox
- 单选框 Radio
- 下拉框 Select
数据展示
- 头像 Avatar
- 徽章 Badge
- 描述 Description
- 陈列框 Display
- 点 Dot
- 键盘 Keyboard
- 标签 Tag
- 用户 User
- 图片 Image
- 下拉菜单 Popover
- 提示框 Tooltip
- 表格 Table
反馈
- 通知 Toast
- 提示 Note
- 评级 Rate
- 指示器 Spinner
- 进度条 Progress
- 更多 More
- 对话框 Dialog
导航
- 链接 Link
- 选项卡 Tabs
其他
- 片段 Snippet