Skip to content

Commit 177fb0a

Browse files
kagolkagol
committed
feat: add transfer api scripts and improve api
1 parent 965b878 commit 177fb0a

File tree

176 files changed

+9720
-128
lines changed

Some content is hidden

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

176 files changed

+9720
-128
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

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

Lines changed: 193 additions & 0 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

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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 参数
16+
17+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
18+
| :---------: | :--------------------------------------: | :----: | :---------------------------------------- | ------------------------------------------ |
19+
| type | [`AlertType`](#alerttype) | 'info' | 必选，指定警告提示的样式 | [基本用法](demo#basic-usage) |
20+
| cssClass | `string` | -- | 可选，自定义 class 名 |
21+
| closeable | `boolean` | true | 可选，默认显示关闭按钮 | [基本用法](demo#tips-to-close) |
22+
| dismissTime | `number` | -- | 可选，自动关闭 alert 的延迟时间（`ms`） |
23+
| showIcon | `boolean` | true | 可选，是否使用默认的类型图标 | [不使用默认图标](demo#without-icon) |
24+
25+
## d-alert 事件
26+
27+
| 参数 | 类型 | 说明 | 跳转 Demo |
28+
| :--------: | :-----------------: | :------------------------- | -------------------------------------------- |
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

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

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# 如何使用
2+
3+
在 module 中引入：
4+
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' });
40+
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
46+
47+
定义一个锚点。
48+
## dAnchor 参数
49+
50+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
51+
| :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- |
52+
| dAnchor | `string` | -- | 必选，设置一个锚点的名字 | [基本用法](demo#basic-usage) |
53+
| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，模块生效对应的 css 类名 | [基本用法](demo#basic-usage) |
54+
55+
## dAnchor 锚点激活事件
56+
57+
自动会给锚点加上以下类对应不同激活的对象。
58+
59+
| css 类名 | 代表意义 |
60+
| :---------------------------: | :--------------------: |
61+
| anchor-active-by-anchor-link | 点击锚点链接激活 |
62+
| anchor-active-by-scroll | 容器滚动到锚点位置激活 |
63+
| anchor-active-by-click-inside | 点击锚点内部内容激活 |
64+
| anchor-active-by-initial | 初始化滚动条位置激活 |
65+
66+
# dAnchorLink
67+
68+
定义一个锚点的链接，点击链接会滑动到锚点，锚点处于页面顶部的时候也会激活链接的 class。
69+
70+
## dAnchorLink 参数
71+
72+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
73+
| :----------: | :------: | :--: | :---------------------------------------------------: | ---------------------------- |
74+
| dAnchorLink | `string` | -- | 必选，点击滑动的目标锚点的名字 | [基本用法](demo#basic-usage) |
75+
| anchorActive | `string` | -- | 可选，锚点处于激活状态的时候，链接生效对应的 css 类名 | [基本用法](demo#basic-usage) |
76+
77+
# dAnchorBox
78+
79+
必须有一个容器，否则功能无法使用。
80+
81+
定义一个扫描锚点的容器，放在 dAnchor 与 dAnchorLink 的公共父节点上，用于锚点和链接之间的通信。
82+
83+
## dAnchorBox 参数
84+
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) |
90+
91+
# dAnchorHashSupport
92+
93+
dAnchorBox 辅助指令。
94+
## dAnchorHashSupport 参数
95+
96+
以下参数为高级配置参数，一般不需要使用，只需要直接使用 dAnchorHashSupport。
97+
98+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo |
99+
| :--------------------------: | :-------: | :---: | :-----------------------------------------------------------------------------------: | ---------------------------------- |
100+
| updateUrlWhenAnchorActive | `boolean` | true | 可选，当激活 anchor 的时候更新 url，用于处理复杂场景, 默认为 true 即可 | [支持 url 锚点](demo#support-hash) |
101+
| scrollToAnchorByHashOnlyInit | `boolean` | false | 可选，true 为只有初始化的时候接收来自路由的 fragment 字段变化并接收，用于处理复杂场景 | [支持 url 锚点](demo#support-hash) |
102+
103+
dAnchorHashSupport 指令搭配 dAnchorBox 使用， 可以绑定路由的 hash fragment， 举例 xxx.xxx/xxx#foo, foo 字段为哈希字段。
104+
跳转哈希字段可以使用 anchor 组件，路由 navigate，routerLink 的 fragment 字段等。
105+
106+
# 注意事项
107+
108+
注意不可和 ng6.1 以上路由模块自带的 RouterScoller 混用， routerlScroller 会滚动到传统的 id 锚点。
109+
单独使用 RouterScroller 可以通过配置路由模块。
110+
111+
```ts
112+
@NgModule({
113+
// ......
114+
imports: [
115+
// ......
116+
RouterModule.forRoot(routes, {
117+
anchorScrolling: 'enabled', // 该策略与锚点组件的dAnchorHashSupport指令相冲突
118+
}),
119+
],
120+
// ......
121+
})
122+
export class DemoModule {}
123+
```

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

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
# How to use
2+
3+
Import into module：
4+
5+
```ts
6+
import { AnchorModule } from 'ng-devui';
7+
```
8+
9+
In the page:
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' });
40+
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+
46+
# dAnchor
47+
48+
Define an anchor point
49+
50+
## dAnchor Parameters
51+
52+
| Parameter | Type | Default | Description | Jump to Demo |
53+
| :----------: | :------: | :-----: | :---------------------------------------------------------------------------------------------------: | -------------------------------------------------- |
54+
| dAnchor | `string` | -- | Required. Sets an anchor name. | [Basic Usage](demo#basic-usage) |
55+
| anchorActive | `string` | -- | Optional. When the anchor is activated, the corresponding CSS class name takes effect for the module. | [Basic Usage](demo#basic-usage) |
56+
57+
## dAnchor Anchor Activation Event
58+
59+
The following classes are automatically added to the anchor to correspond to different activated objects:
60+
61+
| css class name | Meaning |
62+
| :---------------------------: | :-------------------------------------------------------: |
63+
| anchor-active-by-anchor-link | Click the anchor link to activate it. |
64+
| anchor-active-by-scroll | The container scrolls to the anchor point for activation. |
65+
| anchor-active-by-click-inside | Click the anchor content to activate it. |
66+
| anchor-active-by-initial | Initialize the scroll bar position. |
67+
68+
# dAnchorLink
69+
70+
Define a link of an anchor point. Click the link to slide to the anchor point. When the anchor point is at the top of the page, the link class is activated.
71+
72+
## dAnchorLink Parameters
73+
74+
| Parameter | Type | Default | Description | Jump to Demo |
75+
| :----------: | :------: | :-----: | :------------------------------------------------------------------------------------------------: | -------------------------------------------------- |
76+
| dAnchorLink | `string` | -- | Required. Name of the target anchor point for sliding. | [Basic Usage](demo#basic-usage) |
77+
| anchorActive | `string` | -- | Optional. CSS class name corresponding to the link that takes effect when the anchor is activated. | [Basic Usage](demo#basic-usage) |
78+
79+
# dAnchorBox
80+
81+
There must be one container. Otherwise, the function cannot be used.
82+
83+
Defines a container for scanning anchor points, placed on the common parent node of dAnchor and dAnchorLink, for communication between anchor points and links.
84+
85+
## dAnchorBox Parameters
86+
87+
| Parameter | Type | Default | Description | Jump to Demo |
88+
| :-----------: | :----------------------------: | :-------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | --------------------------------------------------------------------- |
89+
| view | `{top?:number,bottom?:number}` | {top:0,bottom:0} | Optional. It is used to adjust the visible region, for example, the head with a fixed position on the top. The value corresponds to the height of the blocked top or bottom. | [Basic Usage](demo#basic-usage) |
90+
| defaultAnchor | `string` | -- | Optional. An anchor link that is activated by default after a page is displayed. Generally, the first anchor link is set to the first anchor link. If this parameter is not set, the first anchor link can be activated only when the first anchor is moved to the top position. | [Basic Usage](demo#basic-usage) |
91+
| scrollTarget | `HTMLElement` | document.documentElement(document.body) | Optional. Sets the container where the scroll bar is located. This parameter is optional when the scroll bar is on the home page. | [Replace Rolling Container](demo#scroll-target) |
92+
93+
# dAnchorHashSupport
94+
95+
dAnchorBox support instruction
96+
97+
## dAnchorHashSupport Parameters
98+
99+
The following parameters are advanced configuration parameters and are not required. You only need to use dAnchorHashSupport.
100+
101+
| Parameter | Type | Default | Description | Jump to Demo |
102+
| :--------------------------: | :-------: | :-----: | :-----------------------------------------------------------------------------------------------------------------------------------------------------: | ------------------------------------------------------------------ |
103+
| updateUrlWhenAnchorActive | `boolean` | true | Optional. The URL is updated when the anchor is activated. The default value is true. | [URL Hash Anchor](demo#support-hash) |
104+
| scrollToAnchorByHashOnlyInit | `boolean` | false | Optional. True indicates that the fragment field changes from routes are received only during initialization. This field is used for complex scenarios. | [URL Hash Anchor](demo#support-hash) |
105+
106+
The dAnchorHashSupport command is used together with the dAnchorBox command to bind the hash fragment of a route. For example, xxx.xxx/xxx#foo, where the foo field is a hash field.
107+
The hop hash field can be the anchor component, route navigate, and routerLink fragment field.
108+
109+
# Note
110+
111+
Note that this parameter cannot be used together with the RouterScoller of the routing module of ng6.1 or later. The routerlScroller will scroll to the traditional ID anchor point.
112+
Using RouterScroller alone, you can configure the routing module.
113+
114+
```ts
115+
@NgModule({
116+
//......
117+
imports: [
118+
//......
119+
RouterModule.forRoot(routes, {
120+
anchorScrolling: 'enabled', // This policy conflicts with the dAnchorHashSupport instruction of the anchor component.
121+
}),
122+
],
123+
//......
124+
})
125+
export class DemoModule {}
126+
```

‎devui/auto-complete/demo/auto-complete.route.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import AutoCompleteDemoComponent from './auto-complete-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: AutoCompleteDemoComponent},
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

0 commit comments

Comments
 (0)