diff --git a/stories/table-of-contents/demo.component.html b/stories/table-of-contents/demo.component.html deleted file mode 100644 index e9207c833..000000000 --- a/stories/table-of-contents/demo.component.html +++ /dev/null @@ -1,53 +0,0 @@ -
-
- Links - -
-
-
Content 1
-
Content 2
-
Content 3
-
Content 4
-
Content 5
-
- {{ item }} -
- -
-
diff --git a/stories/table-of-contents/demo.component.scss b/stories/table-of-contents/demo.component.scss deleted file mode 100644 index ae658a889..000000000 --- a/stories/table-of-contents/demo.component.scss +++ /dev/null @@ -1,51 +0,0 @@ -.demo-container { - position: fixed; - top: 64px; - left: 0; - right: 0; - bottom: 0; - overflow: hidden; - display: flex; - align-items: stretch; - .links { - width: 200px; - ul { - margin: 0; - padding: 0; - list-style: none; - li > a { - display: block; - padding: 20px; - color: gray; - &.isActive { - color: deepskyblue; - } - } - } - } - - /* last content active issue strategies */ - .contents { - display: block; - flex-grow: 1; - overflow: auto; - padding: 20px; - .content { - display: flex; - align-items: center; - justify-content: center; - min-height: 400px; - margin-bottom: 18px; - background-color: gray; - color: white; - // stylelint-disable-next-line plugin/no-low-performance-animation-properties - transition: background-color ease-in 0.3s; - &:last-of-type { - min-height: 100%; - } - &.isActive { - background-color: deepskyblue; - } - } - } -} diff --git a/stories/table-of-contents/demo.component.ts b/stories/table-of-contents/demo.component.ts deleted file mode 100644 index 11294b4d1..000000000 --- a/stories/table-of-contents/demo.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { TocContainerDirective } from '@alauda/ui'; -import { Component } from '@angular/core'; - -@Component({ - templateUrl: 'demo.component.html', - styleUrls: ['demo.component.scss'], -}) -export class DemoComponent { - list: string[] = []; - last = 0; - - add(toc: TocContainerDirective) { - const item = `add content ${++this.last}`; - this.list.push(item); - setTimeout(() => { - toc.scrollTo(item); - }); - } - - remove(item: string) { - const index = this.list.indexOf(item); - this.list.splice(index, 1); - } -} diff --git a/stories/table-of-contents/index.ts b/stories/table-of-contents/index.ts deleted file mode 100644 index d31e0819a..000000000 --- a/stories/table-of-contents/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { TableOfContentsModule } from '@alauda/ui'; -import { storiesOf } from '@storybook/angular'; - -import { DemoComponent } from './demo.component'; - -storiesOf('Toc', module).add('toc', () => ({ - component: DemoComponent, - moduleMetadata: { - imports: [TableOfContentsModule], - declarations: [DemoComponent], - }, -})); diff --git a/stories/table-of-contents/toc.stories.mdx b/stories/table-of-contents/toc.stories.mdx new file mode 100644 index 000000000..ad8fab13a --- /dev/null +++ b/stories/table-of-contents/toc.stories.mdx @@ -0,0 +1,197 @@ +import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'; +import { moduleMetadata } from '@storybook/angular'; + +import { TableOfContentsModule } from '@alauda/ui'; + + + +# Toc + +## 使用方法 + + + + {{ + template: /* HTML */ ` +
+
+ Links: + +
+
+
Content 1
+
Content 2
+
Content 3
+
+ {{ item }} +
+ +
+
+ `, + styles: [ + /* CSS */ ` + .demo-container { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: hidden; + display: flex; + align-items: stretch; + padding: 10px; + } + .demo-container .links { + width: 200px; + overflow: auto; + } + .demo-container .links ul { + margin: 0; + padding: 0; + list-style: none; + display: block; + } + .demo-container .links ul li { + width: unset; + height: unset; + cursor: pointer; + } + .demo-container .links ul li > a { + display: block; + padding: 20px; + color: gray; + } + .demo-container .links ul li > a.isActive { + color: deepskyblue; + } + .demo-container .contents { + display: block; + flex-grow: 1; + overflow: auto; + padding: 20px; + } + .demo-container .contents .content { + display: flex; + align-items: center; + justify-content: center; + min-height: 400px; + margin-bottom: 18px; + background-color: gray; + color: white; + transition: background-color ease-in 0.3s; + } + .demo-container .contents .content:last-of-type { + min-height: 100%; + } + .demo-container .contents .content.isActive { + background-color: deepskyblue; + } + `, + ], + props: { + list: [], + add: (list, toc) => { + const item = `add content ${list.length + 4}`; + list.push(item); + setTimeout(() => { + toc.scrollTo(item); + }); + }, + }, + }} + + + +## 使用场景: + +左侧 link 高亮显示当前 container 中显示的 content。 +点击触发 link 时，container 内平滑滚动至 link 绑定的 content。 +提供 scrollTo 方法支持控制滚动到指定的 content。 +支持 content 内嵌自定义内容。 + +## 使用限制: + +container 必须是可滚动的。 +如果滚动到底部，scrollHeight - scrollTop === clientHeight，则默认选中最后一个 content。 + +## 基本使用方式: + +```html + + + +
+
...
+
...
+
...
+
+``` + +## 样式设置 + +可以在 css 中为 link 和 content 设置 ‘.isActive’, 指定当 link 和 content 被选中时的样式。 + +## Directives: + +### auiTocContainer Outputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------------- | ------ | ------ | --------------------------------- | +| activedChange | string | - | 当 actived 变化时使用该方法获取。 | + +### auiTocContainer Functions + +| 方法以及参数 | 描述 | +| ---------------------------------- | ------------------------------------------- | +| `scrollTo(content: string): void;` | 使用该方法使 container 滚动到指定 content。 | + +### auiTocContent Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| ------------- | ------ | ------ | ------------------------------------------------------ | +| auiTocContent | string | - | 设置 content 名称, 在同一个 container 中名称必须唯一。 | + +### auiTocLink Inputs + +| 名称 | 类型 | 默认值 | 描述 | +| ---------- | --------------------- | ------ | ---------------------------------------- | +| for | TocContainerDirective | - | 目标滚动 container 的 template reference | +| auiTocLink | string | - | link 的目标 content 名称。 |