Skip to content

refactor: 优化部分组件的api/demo命名 #267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kagol merged 1 commit into from
Mar 16, 2022
Merged

refactor: 优化部分组件的api/demo命名 #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions packages/devui-vue/docs/components/alert/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,11 @@ export default {
```vue
<template>
<div class="alert-demo-3">
<d-alert type="success" :showIcon="false">success</d-alert>
<d-alert type="danger" :showIcon="false">danger</d-alert>
<d-alert type="warning" :showIcon="false">warning</d-alert>
<d-alert type="info" :showIcon="false">info</d-alert>
<d-alert type="simple" :showIcon="false">simple</d-alert>
<d-alert type="success" :show-icon="false">success</d-alert>
<d-alert type="danger" :show-icon="false">danger</d-alert>
<d-alert type="warning" :show-icon="false">warning</d-alert>
<d-alert type="info" :show-icon="false">info</d-alert>
<d-alert type="simple" :show-icon="false">simple</d-alert>
</div>
</template>
<style>
Expand All @@ -100,10 +100,10 @@ export default {
| 属性 | 类型 | 默认 | 说明 | 跳转 Demo |
| ----------- | ------------------------- | ------ | --------------------------------------- | --------------------------------- |
| type | [`AlertType`](#AlertType) | 'info' | 必选，指定警告提示的样式 | [基本用法](#基本用法) |
| cssClass | `string` | -- | 可选，自定义 class 名 |
| css-class | `string` | -- | 可选，自定义 class 名 |
| closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](#可关闭的提示) |
| dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间（`ms`） |
| showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](#不使用默认图标) |
| dismiss-time | `number` | -- | 可选，自动关闭 alert 的延迟时间（`ms`） |
| show-icon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](#不使用默认图标) |

### d-alert 事件

Expand Down
2 changes: 1 addition & 1 deletion packages/devui-vue/docs/components/icon/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,4 @@ import "my-icon.css";
| name | `String` | -- | 必选，Icon 名称 | [基本用法](#基本用法) |
| size | `String` | '16px' | 可选，图标大小 | [基本用法](#基本用法) |
| color | `String` | '#252b3a' | 可选，图标颜色 | [基本用法](#基本用法) |
| classPrefix | `String` | 'icon' | 可选，自定义字体图标前缀 | [自定义字体图标](#自定义字体图标) |
| class-prefix | `String` | 'icon' | 可选，自定义字体图标前缀 | [自定义字体图标](#自定义字体图标) |
36 changes: 18 additions & 18 deletions packages/devui-vue/docs/components/panel/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@

```vue
<template>
<d-panel type="primary" :isCollapsed="true" :showAnimation="true">
<d-panel type="primary" :is-collapsed="true" :show-animation="true">
<d-panel-header>Panel with foldable</d-panel-header>
<d-panel-body>This is body</d-panel-body>
</d-panel>
<br />
<br />
<d-panel :toggle="toggle" :isCollapsed="true" :showAnimation="true" :hasLeftPadding="false">
<d-panel :toggle="toggle" :is-collapsed="true" :show-animation="true" :has-left-padding="false">
<d-panel-header>
Panel has no left padding
<em :class="`icon icon-chevron-${toggleState ? 'down' : 'up'}`"></em>
Expand All @@ -27,7 +27,7 @@
</d-panel>
<br />
<br />
<d-panel :isCollapsed="true" :beforeToggle="beforeToggle">
<d-panel :is-collapsed="true" :before-toggle="beforeToggle">
<d-panel-header>Panel with header and footer</d-panel-header>
<d-panel-body>This is body</d-panel-body>
<d-panel-footer>This is footer</d-panel-footer>
Expand Down Expand Up @@ -60,29 +60,29 @@ export default defineComponent({

```vue
<template>
<d-panel type="info" :isCollapsed="true" :showAnimation="true">
<d-panel type="info" :is-collapsed="true" :show-animation="true">
<d-panel-header>Panel with info Type</d-panel-header>
<d-panel-body>This is body</d-panel-body>
</d-panel>
<d-panel type="primary" :isCollapsed="true" :showAnimation="true">
<d-panel type="primary" :is-collapsed="true" :show-animation="true">
<d-panel-header>Panel with Primary Type</d-panel-header>
<d-panel-body>This is body</d-panel-body>
</d-panel>
<br />
<br />
<d-panel type="success" :isCollapsed="true" :showAnimation="true">
<d-panel type="success" :is-collapsed="true" :show-animation="true">
<d-panel-header>Panel with Success Type</d-panel-header>
<d-panel-body>This is body</d-panel-body>
</d-panel>
<br />
<br />
<d-panel type="warning" :isCollapsed="true" :showAnimation="true">
<d-panel type="warning" :is-collapsed="true" :show-animation="true">
<d-panel-header>Panel with Warning Type</d-panel-header>
<d-panel-body>This is body</d-panel-body>
</d-panel>
<br />
<br />
<d-panel type="danger" :isCollapsed="true" :showAnimation="true">
<d-panel type="danger" :is-collapsed="true" :show-animation="true">
<d-panel-header>Panel with danger Type</d-panel-header>
<d-panel-body>This is body</d-panel-body>
</d-panel>
Expand All @@ -103,10 +103,10 @@ export default defineComponent({
<template>
<d-panel
type="primary"
:hasLeftPadding="padding"
:has-left-padding="padding"
:toggle="handleToggle"
:beforeToggle="beforeToggle"
:showAnimation="showAnimation"
:before-toggle="beforeToggle"
:show-animation="showAnimation"
>
<d-panel-header>
Panel with foldable
Expand Down Expand Up @@ -157,15 +157,15 @@ export default defineComponent({

### 动态切换

我们以 hasLeftPadding 为例
我们以 has-left-padding 为例

理论上所有的属性都可以动态切换

:::demo

```vue
<template>
<d-panel :hasLeftPadding="padding" :isCollapsed="true">
<d-panel :has-left-padding="padding" :is-collapsed="true">
<d-panel-header>Panel with foldable</d-panel-header>
<d-panel-body>This is body</d-panel-body>
</d-panel>
Expand Down Expand Up @@ -196,11 +196,11 @@ export default defineComponent({
| 参数 | 类型 | 默认 | 说明 |
| :------------: | :---------------------------: | :-------: | :---------------------------------------------------------------------------------------------------------: |
| type | PanelType | 'default' | 可选，面板的类型 |
| cssClass | string | -- | 可选，自定义 class 名 |
| isCollapsed | boolean | false | 可选，是否展开 |
| hasLeftPadding | boolean | true | 可选，是否显示左侧填充 |
| showAnimation | boolean | true | 可选，是否展示动画 |
| beforeToggle | Function\|Promise\|Observable | -- | 可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态 根据条件阻止折叠 |
| css-class | string | -- | 可选，自定义 class 名 |
| is-collapsed | boolean | false | 可选，是否展开 |
| has-left-padding | boolean | true | 可选，是否显示左侧填充 |
| show-animation | boolean | true | 可选，是否展示动画 |
| before-toggle | Function\|Promise\|Observable | -- | 可选，面板折叠状态改变前的回调函数，返回 boolean 类型，返回 false 可以阻止面板改变折叠状态 根据条件阻止折叠 |
| toggle | Function | -- | 可选，面板当前状态的回调函数，返回 boolean 类型，返回 false 代表面板被收起，返回 true 代表面板展开 |

### 接口&类型定义
Expand Down