-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
112 additions
and
88 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -4,30 +4,34 @@ | |
|
||
```html | ||
<!--最新版--> | ||
<script type="module" src="//cdn.jsdelivr.net/npm/ivy-ui"></script> | ||
<script type="module" src="//cdn.jsdelivr.net/npm/@ivy-design/ce"></script> | ||
<!--指定版本号--> | ||
<script type="module" src="//cdn.jsdelivr.net/npm/[email protected]"></script> | ||
<script | ||
type="module" | ||
src="//cdn.jsdelivr.net/npm/@ivy-design/[email protected]" | ||
></script> | ||
``` | ||
|
||
## 通过包管理器使用 | ||
|
||
### 安装 | ||
|
||
```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 中使用 | ||
|
||
```js | ||
// vue2 | ||
import Vue from "vue"; | ||
import { defineCustomElements } from "ivy-ui"; | ||
defineCustomElements() | ||
import { registerComponents } from "@ivy-design/wc"; | ||
import "@ivy-design/wc/dist/style.css"; | ||
registerComponents(); | ||
Vue.config.ignoredElements = [ | ||
// 用一个 `RegExp` 忽略所有“ion-”开头的元素 | ||
// 仅在 2.5+ 支持 | ||
|
@@ -36,57 +40,73 @@ Vue.config.ignoredElements = [ | |
|
||
// vue3 | ||
import { createApp } from "vue"; | ||
import { defineCustomElements } from "ivy-ui"; | ||
defineCustomElements() | ||
import { registerComponents } from "@ivy-design/wc"; | ||
import "@ivy-design/wc/dist/style.css"; | ||
registerComponents(); | ||
createApp().config.compilerOptions.isCustomElement = (tag) => | ||
tag.startsWith("ivy-"); | ||
``` | ||
|
||
### react 中使用 | ||
|
||
```js | ||
import { defineCustomElements } from "ivy-ui"; | ||
defineCustomElements() | ||
import { registerComponents } from "@ivy-design/wc"; | ||
import "@ivy-design/wc/dist/style.css"; | ||
registerComponents(); | ||
//如需单独使用 | ||
import {defineCustomElement} from "ivy-ui/dist/components/ivy-button.js"; | ||
import { defineCustomElement } from "ivy-ui/dist/components/ivy-button.js"; | ||
ReactDOM.render(<ivy-button>button</ivy-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 | 日期选择器 | |