Skip to content

Commit a2ed0ed

Browse files
author
liyouzhi
committed
feat: add toc doc
1 parent 8fc3852 commit a2ed0ed

File tree

5 files changed

+190
-140
lines changed

5 files changed

+190
-140
lines changed

Diff for: ‎stories/table-of-contents/demo.component.html

-53
This file was deleted.

Diff for: ‎stories/table-of-contents/demo.component.scss

-51
This file was deleted.

Diff for: ‎stories/table-of-contents/demo.component.ts

-24
This file was deleted.

Diff for: ‎stories/table-of-contents/index.ts

-12
This file was deleted.

Diff for: ‎stories/table-of-contents/toc.stories.mdx

+190
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
2+
import { moduleMetadata } from '@storybook/angular';
3+
4+
import { TableOfContentsModule } from '@alauda/ui';
5+
6+
<Meta
7+
title="Toc"
8+
decorators={[
9+
moduleMetadata({
10+
imports: [TableOfContentsModule],
11+
}),
12+
]}
13+
/>
14+
15+
# Toc
16+
17+
## 使用方法
18+
19+
<Preview>
20+
<Story name="toc" height="400px">
21+
{{
22+
template: /* HTML */ `
23+
<div class="demo-container">
24+
<div class="links">
25+
Links:
26+
<ul>
27+
<li>
28+
<a auiTocLink="content1" [for]="toc1">
29+
content 1
30+
</a>
31+
</li>
32+
<li>
33+
<a auiTocLink="content2" [for]="toc1">
34+
content 2
35+
</a>
36+
</li>
37+
<li>
38+
<a auiTocLink="content3" [for]="toc1">
39+
content 3
40+
</a>
41+
</li>
42+
<li *ngFor="let item of list">
43+
<a [auiTocLink]="item" [for]="toc1">
44+
{{ item }}
45+
</a>
46+
</li>
47+
</ul>
48+
</div>
49+
<div class="contents" auiTocContainer #toc1="auiTocContainer">
50+
<div class="content" auiTocContent="content1">Content 1</div>
51+
<div class="content" auiTocContent="content2">Content 2</div>
52+
<div class="content" auiTocContent="content3">Content 3</div>
53+
<div
54+
*ngFor="let item of list"
55+
class="content"
56+
[auiTocContent]="item"
57+
(click)="remove(item)"
58+
>
59+
{{ item }}
60+
</div>
61+
<button (click)="add(list, toc1)">{{ 'add' }}</button>
62+
</div>
63+
</div>
64+
`,
65+
styles: [
66+
/* CSS */ `
67+
.demo-container {
68+
position: fixed;
69+
top: 0;
70+
left: 0;
71+
right: 0;
72+
bottom: 0;
73+
overflow: hidden;
74+
display: flex;
75+
align-items: stretch;
76+
padding: 10px;
77+
}
78+
.demo-container .links {
79+
width: 200px;
80+
overflow: auto;
81+
}
82+
.demo-container .links ul {
83+
margin: 0;
84+
padding: 0;
85+
list-style: none;
86+
display: block;
87+
}
88+
.demo-container .links ul li {
89+
width: unset;
90+
height: unset;
91+
cursor: pointer;
92+
}
93+
.demo-container .links ul li > a {
94+
display: block;
95+
padding: 20px;
96+
color: gray;
97+
}
98+
.demo-container .links ul li > a.isActive {
99+
color: deepskyblue;
100+
}
101+
.demo-container .contents {
102+
display: block;
103+
flex-grow: 1;
104+
overflow: auto;
105+
padding: 20px;
106+
}
107+
.demo-container .contents .content {
108+
display: flex;
109+
align-items: center;
110+
justify-content: center;
111+
min-height: 400px;
112+
margin-bottom: 18px;
113+
background-color: gray;
114+
color: white;
115+
transition: background-color ease-in 0.3s;
116+
}
117+
.demo-container .contents .content:last-of-type {
118+
min-height: 100%;
119+
}
120+
.demo-container .contents .content.isActive {
121+
background-color: deepskyblue;
122+
}
123+
`,
124+
],
125+
props: {
126+
list: [],
127+
add: (list, toc) => {
128+
const item = `add content ${list.length + 4}`;
129+
list.push(item);
130+
setTimeout(() => {
131+
toc.scrollTo(item);
132+
});
133+
},
134+
},
135+
}}
136+
</Story>
137+
</Preview>
138+
139+
## 说明场景:
140+
141+
左侧 link 高亮显示当前 container 中显示的 content。
142+
点击触发 link 时，container 内平滑滚动至 link 绑定的 content。
143+
提供 scrollTo 方法支持控制滚动到指定的 content。
144+
支持 content 内嵌自定义内容。
145+
146+
## 使用限制:
147+
148+
container 必须是可滚动的。
149+
如果滚动到底部，scrollHeight - scrollTop === clientHeight，则默认选中最后一个 content。
150+
151+
## 基本使用方式:
152+
153+
```html
154+
<!-- links -->
155+
<aside>
156+
<a auiTocLink="content1" [for]="toc">content1</a>
157+
<a auiTocLink="content2" [for]="toc">content2</a>
158+
<a auiTocLink="content3" [for]="toc">content3</a>
159+
</aside>
160+
<!-- scroll container -->
161+
<article auiTocContainer #toc="auiTocContainer">
162+
<section auiTocContent="content1">...</section>
163+
<section auiTocContent="content2">...</section>
164+
<section auiTocContent="content3">...</section>
165+
</article>
166+
```
167+
168+
## Directives:
169+
170+
### auiTocContainer
171+
172+
| 属性和方法 | 描述 |
173+
| ------------------------------------------------ | ------------------------------------------- |
174+
| `@Output() activedChange: EventEmitter<string>;` | 当 actived 变化时使用该方法获取。 |
175+
| `scrollTo(content: string): void;` | 使用该方法使 container 滚动到指定 content。 |
176+
177+
### auiTocContent
178+
179+
| 属性和方法 | 描述 |
180+
| ------------------------------------------------- | --------------------------------------------------------------- |
181+
| `@Input('auiTocContent') auiTocContent: string;` | 设置 content 名称, 在同一个 container 中名称必须唯一。 |
182+
| `@HostBinding('class.isActive') active: boolean;` | 当 content 为 active 状态时需要设置 content 的 `isActive` class |
183+
184+
### auiTocLink
185+
186+
| 属性和方法 | 描述 |
187+
| ------------------------------------------------- | --------------------------------------------------------- |
188+
| `@Input() for: TocContainerDirective;` | 目标滚动 container 的 template reference |
189+
| `@Input('auiTocLink') auiTocLink: string;` | link 的目标 content 名称。 |
190+
| `@HostBinding('class.isActive') active: boolean;` | 当 link 为 active 状态时需要设置 link 的 `isActive` class |

0 commit comments

Comments
 (0)