feat: add switch,autocomplete,backtop docs

alauda · Jun 4, 2020 · 6e0b8b2 · 6e0b8b2
1 parent 085ec93
commit 6e0b8b2
Show file tree

Hide file tree

Showing 8 changed files with 376 additions and 202 deletions.
diff --git a/stories/autocomplete/autocomplete.stories.mdx b/stories/autocomplete/autocomplete.stories.mdx
@@ -0,0 +1,146 @@
+import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
+import { moduleMetadata } from '@storybook/angular';
+
+import { AutocompleteModule, InputModule } from '@alauda/ui';
+
+<Meta
+  title="Autocomplete"
+  decorators={[
+    moduleMetadata({
+      imports: [AutocompleteModule, InputModule],
+    }),
+  ]}
+/>
+
+# Autocomplete
+
+自动补全组件
+
+## 基本自动补全
+
+<Preview>
+  <Story name="basic" height="260px">
+    {{
+      template: /* HTML */ `
+        <input aui-input [auiAutocomplete]="suggestions" placeholder="爱好" />
+        <aui-autocomplete #suggestions>
+          <aui-suggestion value="basketball">basketball</aui-suggestion>
+          <aui-suggestion value="swimming">swimming</aui-suggestion>
+          <aui-suggestion value="reading">reading</aui-suggestion>
+          <aui-suggestion value="baking">baking</aui-suggestion>
+          <aui-autocomplete-placeholder>
+            no suggestions
+          </aui-autocomplete-placeholder>
+        </aui-autocomplete>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## 自动补全分组
+
+<Preview>
+  <Story name="suggestions group" height="360px">
+    {{
+      template: /* HTML */ `
+        <input aui-input [auiAutocomplete]="suggestions" placeholder="雇员" />
+        <aui-autocomplete #suggestions>
+          <aui-suggestion-group>
+            <div auiSuggestionGroupTitle>女性</div>
+            <aui-suggestion value="susan">susan</aui-suggestion>
+            <aui-suggestion value="mary">mary</aui-suggestion>
+            <aui-suggestion value="avril">avril</aui-suggestion>
+          </aui-suggestion-group>
+          <aui-suggestion-group>
+            <div auiSuggestionGroupTitle>男性</div>
+            <aui-suggestion value="john">john</aui-suggestion>
+            <aui-suggestion value="bob">bob</aui-suggestion>
+            <aui-suggestion value="david" [disabled]="true">
+              david
+            </aui-suggestion>
+          </aui-suggestion-group>
+          <aui-autocomplete-placeholder>
+            no suggestions
+          </aui-autocomplete-placeholder>
+        </aui-autocomplete>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## 不默认选中第一个
+
+<Preview>
+  <Story name="not first" height="260px">
+    {{
+      template: /* HTML */ `
+        <input
+          aui-input
+          [auiAutocomplete]="suggestions"
+          [auiAutocompleteDefaultFirstSuggestion]="false"
+          placeholder="爱好"
+        />
+        <aui-autocomplete #suggestions>
+          <aui-suggestion value="basketball">basketball</aui-suggestion>
+          <aui-suggestion value="swimming">swimming</aui-suggestion>
+          <aui-suggestion value="reading">reading</aui-suggestion>
+          <aui-suggestion value="baking">baking</aui-suggestion>
+          <aui-autocomplete-placeholder>
+            no suggestions
+          </aui-autocomplete-placeholder>
+        </aui-autocomplete>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## 点击不显示推荐项
+
+<Preview>
+  <Story name="no trigger" height="260px">
+    {{
+      template: /* HTML */ `
+        <input
+          aui-input
+          [auiAutocomplete]="suggestions"
+          auiAutocompleteTrigger="input"
+          placeholder="国家"
+        />
+        <aui-autocomplete #suggestions>
+          <aui-suggestion value="china">china</aui-suggestion>
+          <aui-suggestion value="america">america</aui-suggestion>
+          <aui-suggestion value="austria">austria</aui-suggestion>
+          <aui-suggestion value="english">english</aui-suggestion>
+          <aui-suggestion value="singapore">singapore</aui-suggestion>
+          <aui-autocomplete-placeholder>
+            no suggestions
+          </aui-autocomplete-placeholder>
+        </aui-autocomplete>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## Autocomplete Inputs
+
+| 名称                                  | 类型                                              | 默认值 | 描述                                                                           |
+| ------------------------------------- | ------------------------------------------------- | ------ | ------------------------------------------------------------------------------ |
+| auiAutocomplete                       | NgTemplate                                        | -      | 自动补全组件模板引用                                                           |
+| auiAutocompleteClass                  | string                                            | -      | 向自动补全组件添加类名                                                         |
+| auiAutocompleteFilterFn               | function: (inputValue,suggestionValue) => boolean | -      | 自动补全过滤器,传入参数为当前输入文本和 suggestion 的 value 值，符合条件的显示 |
+| auiAutocompleteDefaultFirstSuggestion | boolean                                           | true   | 下拉时自动选中第一个，回车即可选中                                             |
+| auiAutocompleteTrigger                | 'auto' \| 'input'                                 | 'auto' | 点击输入框时是否显示推荐项，默认 auto 为显示                                   |
+
+## Autocomplete Outputs
+
+| 名称                | 回调参数 | 描述         |
+| ------------------- | -------- | ------------ |
+| auiAutocompleteShow | void     | 自动补全打开 |
+| auiAutocompleteHide | void     | 自动补全关闭 |
+
+## Suggestion Inputs
+
+| 名称     | 类型    | 默认值 | 描述                      |
+| -------- | ------- | ------ | ------------------------- |
+| value    | string  | -      | suggestion 条目对应的值   |
+| disabled | boolean | false  | 禁用 suggestion，不可选择 |
diff --git a/stories/autocomplete/index.ts b/stories/autocomplete/index.ts
diff --git a/stories/back-top/back-top.stories.mdx b/stories/back-top/back-top.stories.mdx
@@ -0,0 +1,97 @@
+import { Meta, Preview, Story } from '@storybook/addon-docs/blocks';
+import { moduleMetadata } from '@storybook/angular';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+import { BackTopModule } from '@alauda/ui';
+
+<Meta
+  title="BackTop"
+  decorators={[
+    moduleMetadata({
+      imports: [BackTopModule, ScrollingModule],
+    }),
+  ]}
+/>
+
+# BackTop
+
+返回顶部组件
+
+## 默认指定外部的 cdkScrollable 组件
+
+<Preview>
+  <Story name="inscroll" height="300px">
+    {{
+      template: /* HTML */ `
+        <div style="height:300px;overflow:auto;" cdkScrollable>
+          <div style="height:1000px">
+            选择外部的 cdkScrollable 组件作为指定滚动容器，尝试滚动此元素
+          </div>
+          <aui-back-top></aui-back-top>
+        </div>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## 通过模板变量选择滚动容器
+
+<Preview>
+  <Story name="use element ref" height="300px">
+    {{
+      template: /* HTML */ `
+        <div style="height:300px;overflow:auto;" #containerRef>
+          <div style="height:1000px">
+            通过指定的 ElementRef 选择滚动容器，尝试滚动此元素
+          </div>
+        </div>
+        <aui-back-top [target]="containerRef"></aui-back-top>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## 无外部滚动容器，默认根据 window
+
+<Preview>
+  <Story name="default window" height="300px">
+    {{
+      template: /* HTML */ `
+        <div style="height:1000px">
+          默认选择 window 作为滚动对象，尝试滚动此元素
+        </div>
+        <aui-back-top></aui-back-top>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## 根据 selector 指定滚动容器
+
+<Preview>
+  <Story name="use selector" height="300px">
+    {{
+      template: /* HTML */ `
+        <div style="height:300px;overflow:auto;" class="target">
+          <div style="height:1000px">
+            通过选择器指定滚动容器，尝试滚动此元素
+          </div>
+        </div>
+        <aui-back-top target=".target"></aui-back-top>
+      `,
+    }}
+  </Story>
+</Preview>
+
+## Backtop Inputs
+
+| 名称             | 类型                        | 默认值 | 描述                                                                                                                       |
+| ---------------- | --------------------------- | ------ | -------------------------------------------------------------------------------------------------------------------------- |
+| visibilityHeight | number                      | 400    | 目标容器滚动到多高的距离，展示 backtop 按钮                                                                                |
+| target           | Element \| Window \| string | -      | 指定目标容器，可以指定 ElementRef，selector 来选择目标组件，不指定时优先选择外部的 cdkScrollable 组件，若没有则选择 window |
+
+## Backtop Outputs
+
+| 名称  | 回调参数 | 描述                   |
+| ----- | -------- | ---------------------- |
+| click | Event    | 点击返回顶部按钮时触发 |