Skip to content

Commit fc8cbe7

Browse files
kagolkagol
authored
Merge pull request #12 from kagol/kagol/improve-api
Improve the API documentation
2 parents 95c6b6a + aa46ba2 commit fc8cbe7

File tree

206 files changed

+9032
-2530
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

206 files changed

+9032
-2530
lines changed

‎devui/accordion/demo/accordion.route.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import AccordionDemoComponent from './accordion-demo'
22
import DevUIApiComponent from '../../shared/devui-api/devui-api'
33

4+
import ApiCn from '../doc/api-cn.md'
5+
import ApiEn from '../doc/api-en.md'
46
const routes = [
57
{ path: '', redirectTo: 'demo' },
68
{ path: 'demo', component: AccordionDemoComponent},
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

‎docs/accordion.md renamed to ‎devui/accordion/doc/api-cn.md

Lines changed: 88 additions & 64 deletions
Large diffs are not rendered by default.

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

Lines changed: 189 additions & 0 deletions
Large diffs are not rendered by default.

‎devui/alert/demo/alert.route.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import AlertDemoComponent from './alert-demo'
22
import DevUIApiComponent from '../../shared/devui-api/devui-api'
33

4+
import ApiCn from '../doc/api-cn.md'
5+
import ApiEn from '../doc/api-en.md'
46
const routes = [
57
{ path: '', redirectTo: 'demo' },
68
{ path: 'demo', component: AlertDemoComponent},
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

‎docs/alert.md renamed to ‎devui/alert/doc/api-cn.md

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,38 @@
1-
### d-alert 参数
1+
# 如何使用
2+
3+
在module中引入：
4+
5+
```ts
6+
import { AlertModule } from 'ng-devui/alert';
7+
```
8+
9+
在页面中使用：
10+
11+
```xml
12+
<d-alert></d-alert>
13+
```
14+
# d-alert
15+
## d-alert 参数
216

317
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
418
| :---------: | :--------------------------------------: | :----: | :---------------------------------------- | ------------------------------------------ |
5-
| type | `'success'\|'danger'\|'warning'\|'info'` | 'info' | 必选，指定警告提示的样式 | [基本用法](/components/alert/demo#basic-usage) |
19+
| type | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式 | [基本用法](demo#basic-usage) |
620
| cssClass | `string` | -- | 可选，自定义 class 名 |
7-
| closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](/components/alert/demo#tips-to-close) |
8-
| dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间(单位：ms) |
9-
| showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [基本用法](/components/alert/demo#basic-usage) |
21+
| closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](demo#tips-to-close) |
22+
| dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间（`ms`） |
23+
| showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](demo#without-icon) |
1024

11-
### d-alert 事件
25+
## d-alert 事件
1226

1327
| 参数 | 类型 | 说明 | 跳转 Demo |
1428
| :--------: | :-----------------: | :------------------------- | -------------------------------------------- |
15-
| closeEvent | `EventEmitter<any>` | 可选，关闭时触发的回调函数 | [可关闭的提示](/components/alert/demo#tips-to-close) |
29+
| closeEvent | `EventEmitter<AlertComponent>` | 可选，关闭时触发的回调函数 | [可关闭的提示](demo#tips-to-close) |
30+
31+
# 接口 & 类型定义
32+
### AlertType
33+
34+
默认值为'info'， 指定alert警告提示的类型
35+
36+
```ts
37+
export type AlertType = 'success' | 'danger' | 'warning' | 'info';
38+
```

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# How to use
2+
3+
Import into module:
4+
5+
```ts
6+
import { AlertModule } from 'ng-devui/alert';
7+
```
8+
9+
In the page:
10+
11+
```xml
12+
<d-alert></d-alert>
13+
```
14+
# d-alert
15+
## d-alert Parameter
16+
17+
| Attributes | Type | Default | Description | Jump to Demo |
18+
| :---------: | :--------------------------------------: | :----: | :---------------------------------------- | ------------------------------------------ |
19+
| type | [`AlertType`](#alerttype) | 'info' | Required. Specify the style of the warning prompt | [Basic Usage](demo#basic-usage) |
20+
| cssClass | `string` | -- | Optional. Customize className |
21+
| closeable | `boolean` | true | Optional. The close button is displayed by default | [Basic Usage](demo#tips-to-close) |
22+
| dismissTime | `number` | -- | Optional. Toggle off the delay time of Alert(`ms`) |
23+
| showIcon | `boolean` | true | Optional. Whether to use the default type icon | [Without Icon](demo#without-icon) |
24+
25+
## d-alert Event
26+
27+
| Attributes | Type | Description | Jump to Demo |
28+
| :--------: | :-----------------: | :------------------------- | -------------------------------------------- |
29+
| closeEvent | `EventEmitter<AlertComponent>` | Optional. Callback when alert is closed | [Closable Prompt](demo#tips-to-close) |
30+
31+
# Interface & Type Definition
32+
### AlertType
33+
34+
The default value is 'info', which specifies the type of alert warning.
35+
36+
```ts
37+
export type AlertType = 'success' | 'danger' | 'warning' | 'info';
38+
```

‎devui/anchor/demo/anchor.route.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import AnchorDemoComponent from './anchor-demo'
22
import DevUIApiComponent from '../../shared/devui-api/devui-api'
33

4+
import ApiCn from '../doc/api-cn.md'
5+
import ApiEn from '../doc/api-en.md'
46
const routes = [
57
{ path: '', redirectTo: 'demo' },
68
{ path: 'demo', component: AnchorDemoComponent},
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

‎docs/anchor.md renamed to ‎devui/anchor/doc/api-cn.md

Lines changed: 78 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,60 @@
1-
# Anchor 使用说明
1+
# 如何使用
22

3-
需要三个指令配合使用: 'dAnchor'、'dAnchorLink'、'dAnchorBox'
3+
在 module 中引入：
44

5-
## dAnchor 指令
5+
```ts
6+
import { AnchorModule } from 'ng-devui';
7+
```
8+
9+
在页面中使用：
10+
11+
```html
12+
<div dAnchorBox>
13+
<ul>
14+
<li [dAnchorLink]="anchorlink-one">anchorlink-one</li>
15+
<li [dAnchorLink]="anchorlink-two">anchorlink-two</li>
16+
<li [dAnchorLink]="anchorlink-three">anchorlink-three</li>
17+
<li [dAnchorLink]="anchorlink-four">anchorlink-four</li>
18+
</ul>
19+
<div>
20+
<div [dAnchor]="anchorlink-one">
21+
anchorlink-one
22+
</div>
23+
<div [dAnchor]="anchorlink-two">
24+
anchorlink-two
25+
</div>
26+
<div [dAnchor]="anchorlink-three">
27+
anchorlink-three
28+
</div>
29+
<div [dAnchor]="anchorlink-four">
30+
anchorlink-four
31+
</div>
32+
</div>
33+
</div>
34+
```
35+
36+
```ts
37+
// using router (cross-route), anchorName means your own anchor
38+
this.router.navigateByUrl('../xx/xxx#anchorName');
39+
this.router.navigate(['/xxx'], { fragment: 'anchorName' });
640

7-
定义一个锚点
41+
// using router (at the same level), anchorName means your own anchor
42+
this.router.navigateByUrl('#anchorName');
43+
this.router.navigate([], { fragment: 'anchorName' });
44+
```
45+
# dAnchor
846

47+
定义一个锚点。
948
## dAnchor 参数
1049

11-
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
12-
| :----------: | :------: | :--: | :---------------------------------------------------: | --------- |
13-
| dAnchor | `string` | -- | 必选，设置一个锚点的名字 |[基本用法](/components/anchor/demo#basic-usage) |
14-
| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，模块生效对应的 css 类名 |[基本用法](/components/anchor/demo#basic-usage) |
50+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
51+
| :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- |
52+
| dAnchor | `string` | -- | 必选，设置一个锚点的名字 | [基本用法](demo#basic-usage) |
53+
| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，模块生效对应的 css 类名 | [基本用法](demo#basic-usage) |
1554

16-
### 判断激活锚点的事件
55+
## dAnchor 锚点激活事件
1756

18-
自动会给锚点加上以下类对应不同激活的对象
57+
自动会给锚点加上以下类对应不同激活的对象。
1958

2059
| css 类名 | 代表意义 |
2160
| :---------------------------: | :--------------------: |
@@ -24,69 +63,52 @@
2463
| anchor-active-by-click-inside | 点击锚点内部内容激活 |
2564
| anchor-active-by-initial | 初始化滚动条位置激活 |
2665

27-
## dAnchorLink 指令
66+
# dAnchorLink
2867

29-
定义一个锚点的链接，点击链接会滑动到锚点，锚点处于页面顶部的时候也会激活链接的 class
68+
定义一个锚点的链接，点击链接会滑动到锚点，锚点处于页面顶部的时候也会激活链接的 class。
3069

31-
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
32-
| :----------: | :------: | :--: | :---------------------------------------------------: | --------- |
33-
| dAnchorLink | `string` | -- | 必选，点击滑动的目标锚点的名字 |[基本用法](/components/anchor/demo#basic-usage) |
34-
| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，链接生效对应的 css 类名 |[基本用法](/components/anchor/demo#basic-usage) |
70+
## dAnchorLink 参数
3571

36-
## dAnchorBox 指令
72+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
73+
| :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- |
74+
| dAnchorLink | `string` | -- | 必选，点击滑动的目标锚点的名字 | [基本用法](demo#basic-usage) |
75+
| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，链接生效对应的 css 类名 | [基本用法](demo#basic-usage) |
3776

38-
（必须有一个容器，否则功能无法使用）
77+
# dAnchorBox
3978

40-
定义一个扫描锚点的容器，放在 dAnchor 与 dAnchorLink 的公共父节点上，用于锚点和链接之间的通信
79+
必须有一个容器，否则功能无法使用。
4180

42-
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
43-
| :-----------: | :----------------------------: | :-------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | --------- |
44-
| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 |[基本用法](/components/anchor/demo#basic-usage) |
45-
| defaultAnchor | `string` | -- | 可选，进入页面后默认被激活的锚点链接，一般设置为第一个锚点，如果不设置，那么第一个锚点需要在滑动到顶部位置的时候才能激活链接 |[基本用法](/components/anchor/demo#basic-usage) |
46-
| scrollTarget | `HTMLElement` | document.documentElement(document.body) | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 |[更换滚动容器](/components/anchor/demo#scroll-target) |
81+
定义一个扫描锚点的容器，放在 dAnchor 与 dAnchorLink 的公共父节点上，用于锚点和链接之间的通信。
4782

48-
## dAnchorHashSupport 指令 （dAnchorBox 辅助指令）
83+
## dAnchorBox 参数
4984

50-
以下参数为高级配置参数，一般不需要使用，只需要直接使用dAnchorHashSupport。
85+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
86+
| :-----------: | :----------------------------: | :-------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: | ---------------------------------- |
87+
| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | 可选，用于可视区域的调整，比如顶部有固定位置的头部等，数值对应被遮挡的顶部或底部的高度 | [基本用法](demo#basic-usage) |
88+
| defaultAnchor | `string` | -- | 可选，进入页面后默认被激活的锚点链接，一般设置为第一个锚点，如果不设置，那么第一个锚点需要在滑动到顶部位置的时候才能激活链接 | [基本用法](demo#basic-usage) |
89+
| scrollTarget | `HTMLElement` | document.documentElement(document.body) | 可选，设置要发生滚动的容器，一般为滚动条所在容器，为主页面的滚动条时候可以不设置 | [更换滚动容器](demo#scroll-target) |
5190

52-
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
53-
| :--------------------------: | :-------: | :---: | :-----------------------------------------------------------------------------------: | --------- |
54-
| updateUrlWhenAnchorActive | `boolean` | true | 可选，当激活 anchor 的时候更新 url，用于处理复杂场景, 默认为 true 即可 |[支持url锚点](/components/anchor/demo#support-hash) |
55-
| scrollToAnchorByHashOnlyInit | `boolean` | false | 可选，true 为只有初始化的时候接收来自路由的 fragment 字段变化并接收，用于处理复杂场景 |[支持url锚点](/components/anchor/demo#support-hash) |
91+
# dAnchorHashSupport
5692

57-
dAnchorHashSupport 指令搭配 dAnchorBox 使用， 可以绑定路由的 hash fragment， 举例 xxx.xxx/xxx#foo, foo 字段为哈希字段。
58-
跳转哈希字段可以使用 anchor 组件，路由 navigate，routerLink 的 fragment 字段等。
93+
dAnchorBox 辅助指令。
94+
## dAnchorHashSupport 参数
5995

60-
### 跳转到 anchor 的方法
96+
以下参数为高级配置参数，一般不需要使用，只需要直接使用 dAnchorHashSupport。
6197

62-
```html
63-
<!--使用组内nchor组件, 点击anchor的时候会-->
64-
<div dAnchorBox dAnchorHashSupport>
65-
<div dAnchorLink="foo">xxx</div>
66-
<div dAnchor="foo">xxx</div>
67-
</div>
68-
```
69-
70-
```typescript
71-
// 跨路由跳转锚点
72-
this.router.navigateByUrl('../xxx/xxx#foo');
73-
this.router.navigate(['/xxxx'], { fragment: 'foo' });
74-
// 同路由跳转锚点
75-
this.router.navigateByUrl('#foo');
76-
this.router.navigate([], { fragment: 'foo' });
77-
```
98+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
99+
| :--------------------------: | :-------: | :---: | :-----------------------------------------------------------------------------------: | ---------------------------------- |
100+
| updateUrlWhenAnchorActive | `boolean` | true | 可选，当激活 anchor 的时候更新 url，用于处理复杂场景, 默认为 true 即可 | [支持 url 锚点](demo#support-hash) |
101+
| scrollToAnchorByHashOnlyInit | `boolean` | false | 可选，true 为只有初始化的时候接收来自路由的 fragment 字段变化并接收，用于处理复杂场景 | [支持 url 锚点](demo#support-hash) |
78102

79-
```html
80-
<!--routerLink的fragment-->
81-
<a [routerLink]="['/xxxx']" fragment="foo"></a>
82-
```
103+
dAnchorHashSupport 指令搭配 dAnchorBox 使用， 可以绑定路由的 hash fragment， 举例 xxx.xxx/xxx#foo, foo 字段为哈希字段。
104+
跳转哈希字段可以使用 anchor 组件，路由 navigate，routerLink 的 fragment 字段等。
83105

84-
### 注意事项
106+
# 注意事项
85107

86108
注意不可和 ng6.1 以上路由模块自带的 RouterScoller 混用， routerlScroller 会滚动到传统的 id 锚点。
87-
单独使用 RouterScroller 可以通过配置路由模块
109+
单独使用 RouterScroller 可以通过配置路由模块。
88110

89-
```typescript
111+
```ts
90112
@NgModule({
91113
// ......
92114
imports: [

0 commit comments

Comments
 (0)