Skip to content

Commit 7827d2b

Browse files
kagolkagol
committed
feat(api): add component devui api
1 parent f0dbf27 commit 7827d2b

File tree

9 files changed

+471
-7
lines changed

9 files changed

+471
-7
lines changed

‎devui/button/demo/button.route.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import ButtonDemoComponent from './button-demo'
22
import DevUIApiComponent from '../../shared/devui-api/devui-api'
3+
import ApiCn from '../doc/api-cn.md'
4+
import ApiEn from '../doc/api-en.md'
35

46
const routes = [
57
{ path: '', redirectTo: 'demo' },
68
{ path: 'demo', component: ButtonDemoComponent},
79
{ path: 'api', component: DevUIApiComponent, meta: {
8-
'zh-cn': '../doc/api-cn.md',
9-
'en-us': '../doc/api-en.md'
10+
'zh-cn': ApiCn,
11+
'en-us': ApiEn
1012
}}
1113
]
1214

‎devui/button/doc/api-cn.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# 如何使用
2+
3+
在module中引入：
4+
5+
```ts
6+
import { ButtonModule } from 'ng-devui/button';
7+
```
8+
9+
在页面中使用：
10+
11+
```xml
12+
<d-button></d-button>
13+
```
14+
# d-button
15+
## d-button 参数
16+
17+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
18+
| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | --- |
19+
| id | `string` | -- | 可选，button id | [主要按钮](demo#button-primary) |
20+
| type | [`IButtonType`](#ibuttontype) | 'button' | 可选，类型 `'button' \| 'submit' \| 'reset' ` | [警示按钮](demo#button-danger) |
21+
| bsStyle | [`IButtonStyle`](#ibuttonstyle) | 'primary' | 可选，风格 `'primary' \| 'common' \| 'text' \| 'text-dark' \| 'danger'` | [次要按钮](demo#button-common) |
22+
| bsSize | [`IButtonSize`](#ibuttonsize) | 'md' | 可选，大小 `'lg' \| 'md' \| 'sm' \| 'xs'` | [按钮尺寸](demo#button-size) |
23+
| bsPosition |[`IButtonPosition`](#ibuttonposition) |'default' | 可选，按钮位置 `'default' \| 'left' \| 'right'` | [左右按钮](demo#button-left-right) |
24+
| bordered | `boolean` | false | 可选，是否有边框 | [自动获得焦点](demo#button-auto-focus) |
25+
| icon | `string` | -- | 可选， 自定义按钮图标 | [图标按钮](demo#button-icon) |
26+
| showLoading | `boolean` | false | 可选，是否显示加载提示 | [加载中状态](demo#button-loading) |
27+
| width | `number` | -- | 可选，button 宽度 | [主要按钮与次要按钮组合](demo#button-primary-and-common) |
28+
| disabled | `boolean` | false | 可选，是否禁用 button | [主要按钮](demo#button-primary) |
29+
| autofocus | `boolean` | false | 可选，按钮加载时是否自动获得焦点 | [自动获得焦点](demo#button-auto-focus) |
30+
31+
## d-button 事件
32+
33+
| 参数 | 类型 | 说明 | 跳转 Demo |
34+
| :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- |
35+
| btnClick | `EventEmitter<MouseEvent>` | 可选，button 点击事件，解决disabled还会触发 click, 返回点击下后鼠标事件对象 | [加载中状态](demo#button-loading) |
36+
37+
# d-button-group
38+
## d-button-group 参数
39+
40+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
41+
| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | --- |
42+
| size | [`IButtonGroupSize`](#ibuttongroupsize) | 'md' | 可选，大小`'lg' \| 'md' \| 'sm' \| 'xs'` | [按钮组](demo#button-groups) |
43+
44+
45+
# 接口 & 类型定义
46+
### IButtonType
47+
48+
默认值为'button'，表示button类型
49+
50+
```ts
51+
export type IButtonType = 'button' | 'submit' | 'reset';
52+
```
53+
54+
### IButtonStyle
55+
56+
默认值为'primary'，表示button风格
57+
58+
```ts
59+
export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger';
60+
```
61+
62+
### IButtonPosition
63+
64+
默认值为'default'，表示button位置
65+
66+
```ts
67+
export type IButtonPosition = 'left' | 'right' | 'default';
68+
```
69+
70+
### IButtonSize
71+
默认值为'md'，表示button尺寸
72+
73+
```ts
74+
export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
75+
```
76+
77+
### IButtonGroupSize
78+
默认值为'md'，表示button-group尺寸
79+
80+
```ts
81+
export type IButtonGroupSize = 'lg' | 'md' | 'sm' | 'xs';
82+
```

‎devui/button/doc/api-en.md

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# How to use
2+
3+
Import into module:
4+
5+
```ts
6+
import { ButtonModule } from 'ng-devui/button';
7+
```
8+
9+
In the page:
10+
11+
```xml
12+
<d-button></d-button>
13+
```
14+
# d-button
15+
## d-button Parameter
16+
17+
| Parameter | Type | Default | Description | Jump to Demo |
18+
| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | --- |
19+
| id | `string` | -- | Optional. button ID | [Primary Buttons](demo#button-primary)|
20+
| type | [`IButtonType`](#ibuttontype) | 'button' | Optional. The type is `'button' \| 'submit' \| 'reset'` |[Danger Buttons](demo#button-danger) |
21+
| bsStyle | [`IButtonStyle`](#ibuttonstyle) | 'primary' | Optional. The style is `'primary' \| 'common' \| 'text' \| 'text-dark' \| 'danger'` | [Common Buttons](demo#button-common) |
22+
| bsSize | [`IButtonSize`](#ibuttonsize) | 'md' | Optional. The size is `'lg' \| 'md' \| 'sm' \| 'xs'` | [Button Size](demo#button-size) |
23+
| bsPosition |[`IButtonPosition`](#ibuttonposition) |'default'| Optional. The button position is `'default' \| 'left' \| 'right'` | [Left & Right Buttons](demo#button-left-right) |
24+
| bordered | `boolean` | false | Optional. Indicating whether a border exists | [Auto-focus Buttons](demo#button-auto-focus)|
25+
| icon | `string` | -- | Optional. Customized button icon | [Icon Buttons](demo#button-icon) |
26+
| showLoading | `boolean` | false | Optional. Indicating whether to display the loading prompt | [Loading Buttons](demo#button-loading) |
27+
| width | `number` | -- | Optional. Button width |[Combinations of Primary & Common Buttons](demo#button-primary-and-common) |
28+
| disabled | `boolean` | false | Optional. Indicating whether to disable the button | [Primary Buttons](demo#button-primary) |
29+
| autofocus | `boolean` | false | Optional. Indicating whether to automatically obtain the focus during button loading | [Auto-focus Buttons](demo#button-auto-focus) |
30+
31+
## d-button Event
32+
33+
| Parameter | Type | Description | Jump to Demo |
34+
| :------: | :-----------------: | :-------------------------------------------------------------------------------------- | ---------------------------------------------- |
35+
| btnClick | `EventEmitter<MouseEvent>` | Optional. Solve the click event is triggered when button is disabled. After the mouse is clicked, the mouse event object is returned | [Loading Buttons](demo#button-loading)|
36+
37+
# d-button-group
38+
39+
## d-button-group parameter
40+
41+
| Parameter | Type | Default | Description | Jump to Demo |
42+
| :---------: | :------------: | :-----: | :--------------------------------------------------------------------------- | --- |
43+
| size | [`IButtonGroupSize`](#ibuttongroupsize) | 'md' | Optional. The size is `'lg' \| 'md' \| 'sm' \| 'xs'` | [Button Group](demo#button-groups) |
44+
45+
# Interface & Type Definition
46+
### IButtonType
47+
48+
The default value is 'button', indicating the button type.
49+
50+
```ts
51+
export type IButtonType = 'button' | 'submit' | 'reset';
52+
```
53+
54+
### IButtonStyle
55+
56+
The default value is 'primary', indicating the button style.
57+
58+
```ts
59+
export type IButtonStyle = 'common' | 'primary' | 'text' | 'text-dark' | 'danger';
60+
```
61+
62+
### IButtonPosition
63+
64+
The default value is 'default', indicating the button position.
65+
66+
```ts
67+
export type IButtonPosition = 'left' | 'right' | 'default';
68+
```
69+
70+
### IButtonSize
71+
The default value is 'md', indicating the button size.
72+
73+
```ts
74+
export type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
75+
```
76+
77+
### IButtonGroupSize
78+
The default value is 'md', indicating the button-group size.
79+
80+
```ts
81+
export type IButtonGroupSize = 'lg' | 'md' | 'sm' | 'xs';
82+
```

‎devui/shared/devui-api/devui-api.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import { defineComponent } from 'vue'
2+
import { useRoute } from 'vue-router'
23

34
export default defineComponent({
45
name: 'd-api',
56
props: {
67
},
78
setup(props, ctx) {
9+
const route = useRoute()
10+
const ApiCn = route.meta['zh-cn']
11+
812
return () => {
9-
return <div>devui-api</div>
13+
return <div class="markdown"><ApiCn></ApiCn></div>
1014
}
1115
}
1216
})

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@
2727
"sass": "^1.32.2",
2828
"shelljs": "^0.8.4",
2929
"typescript": "^4.1.3",
30-
"vite": "^2.0.0-beta.12"
30+
"vite": "^2.0.0-beta.12",
31+
"vite-plugin-md": "^0.6.0"
3132
},
3233
"husky": {
3334
"hooks": {

‎src/app.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export default defineComponent({
112112
</script>
113113

114114
<style lang="scss">
115+
@import './assets/styles.scss';
115116
@import '../devui/style/devui';
116117
@import '../devui/style/theme/color';
117118
@import '../devui/style/core/font';

0 commit comments

Comments
 (0)