From 917cd4e99f8bbaac5f8429221790f4a262036682 Mon Sep 17 00:00:00 2001 From: GuoJikun Date: Fri, 3 Nov 2023 14:39:42 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=83=20docs:=20=E6=9B=B4=E6=96=B0?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/docs/src/guide/index.md | 106 +++++++++++++++++++------------ 1 file changed, 65 insertions(+), 41 deletions(-) diff --git a/packages/docs/src/guide/index.md b/packages/docs/src/guide/index.md index 1dc6554..55fc4b8 100644 --- a/packages/docs/src/guide/index.md +++ b/packages/docs/src/guide/index.md @@ -4,9 +4,12 @@ ```html - + - + ``` ## 通过包管理器使用 @@ -14,11 +17,11 @@ ### 安装 ```bash -npm i ivy-ui +npm i @ivy-design/ce #OR -yarn add ivy-ui +yarn add @ivy-design/ce #OR -pnpm add ivy-ui +pnpm add @ivy-design/ce ``` ### vue 中使用 @@ -26,7 +29,9 @@ pnpm add ivy-ui ```js // vue2 import Vue from "vue"; -import "ivy-ui"; +import { registerComponents } from "@ivy-design/wc"; +import "@ivy-design/wc/dist/style.css"; +registerComponents(); Vue.config.ignoredElements = [ // 用一个 `RegExp` 忽略所有“ion-”开头的元素 // 仅在 2.5+ 支持 @@ -35,6 +40,9 @@ Vue.config.ignoredElements = [ // vue3 import { createApp } from "vue"; +import { registerComponents } from "@ivy-design/wc"; +import "@ivy-design/wc/dist/style.css"; +registerComponents(); createApp().config.compilerOptions.isCustomElement = (tag) => tag.startsWith("ivy-"); ``` @@ -42,47 +50,63 @@ createApp().config.compilerOptions.isCustomElement = (tag) => ### react 中使用 ```js -import "ivy-ui"; +import { registerComponents } from "@ivy-design/wc"; +import "@ivy-design/wc/dist/style.css"; +registerComponents(); //如需单独使用 -import "ivy-ui/dist/es/ivy-button.js"; +import { defineCustomElement } from "ivy-ui/dist/components/ivy-button.js"; ReactDOM.render(button, document.body); ``` ## 已有组件 -- [x] `Row` 组件 -- [x] `Col` 组件 -- [x] `Switch` 组件 -- [x] `Collapse` 组件 -- [x] `CollapseItem` 组件 -- [x] `Drawer` 组件 -- [x] `Icon` 组件 -- [x] `Progress` 组件 -- [x] `Button` 组件 -- [x] `card` 组件 -- [x] `timeline` 组件 -- [x] `divider` 组件 -- [x] `Modal` 组件 -- [x] `Rate` 组件 -- [x] `tab` 组件 -- [x] `tab-pane` 组件 -- [x] `Image` 组件 -- [x] `Tooltip` 组件 -- [x] `Table` 组件 -- [x] `Input` 组件 -- [x] `Checkbox` 组件 -- [x] `CheckboxGroup` 组件 -- [x] `Radio` 组件 -- [x] `RadioGroup` 组件 -- [x] `Tag` 组件 -- [x] `Clipboard-copy` 组件 -- [x] `Badge` 组件 -- [x] `Contextmenu` 组件 +| 组件名称 | 组件描述 | +| :-------------: | ---------------------------: | +| Button | 按钮 | +| Space | 间隔 | +| Collapse | 折叠面板 | +| Divider | 分割线 | +| Card | 卡片 | +| Grid | 宫格 | +| Empty | 空状态 | +| Timeline | 时间轴 | +| Breadcrumb | 面包屑导航 | +| Tag | 标签 | +| Badge | 徽章 | +| Row | 行 | +| Col | 列 | +| Result | 结果 | +| Drawer | 抽屉 | +| Input | 输入框 | +| Tip | 提示 | +| Select | 下拉选择 | +| Loading | 加载 | +| Details | 详情-同原生的 `details` 标签 | +| Progress | 进度条 | +| Dialog | 弹框 | +| Dropdown | 下拉菜单 | +| Steps | 步骤条 | +| Switch | 开关 | +| Radio | 单选框 | +| Checkbox | 多选框 | +| AspectRatio | 固定宽高比例容器 | +| Icon | 图标 | +| Circle | 圆形进度条 | +| Image | 图片 | +| Description | 描述列表 | +| Contextmenu | 邮件菜单 | +| rate | 评分 | +| Avatar | 头像 | +| Carousel | 轮播图 | +| CopyToClipboard | 复制到剪切板 | ## 未完成组件 -- [ ] `Message` 组件 -- [ ] `Select` 组件 -- [ ] `Slider` 组件 -- [ ] `Pagination` 组件 -- [ ] `DatePicker` 组件 +| 组件名称 | 组件描述 | +| :----------: | :--------: | +| tabs | 标签页 | +| message | 消息提醒 | +| notification | 通知框 | +| table | 表格 | +| split | 分割面板 | +| datePicker | 日期选择器 |