mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(anchor): zh-cn

Browse Source
This commit is contained in:
07akioni 2020-02-04 12:40:06 +08:00
parent 06117393b3
commit 142371ea3e
5 changed files with 83 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demo/documentation/components/anchor/enUS/index.md
View File

@ -1,6 +1,6 @@
# Anchor
<!--single-column-->
The demo used to use some charactor names from *Hard-Boiled Wonderland and the End of the World* as anchor links, but if so there will be too wired in this page. So I rewrite them. What a pity.
These demos used to use some charactor names from *Hard-Boiled Wonderland and the End of the World* as anchor links, but if so there will be too wired in this page compared with other pages. So I rewrite them. What a pity.
## Demos
```demo
basic
@ -11,10 +11,10 @@ scrollto
|Name|Type|Default|Description|
|-|-|-|-|
|affix|`boolean`|`false`|If it works like a affix. If set to `true`, it will recieve props from [affix](n-affix#Props)|
|target|`() => HTMLElement`|A function that returns the nearest scrollable ascendant element|The element that anchor listens to scroll event.|
|target|`() => HTMLElement`|A function that returns the nearest scrollable ascendant element|The element that anchor listens to scroll event. (If you want affix & anchor to listen to different target, manually warp anchor in affix instead.)|
|bound|`number`|`12`||
## Methods
|Method|Description|
|-|-|
|`scrollTo(href: string)`||
|Name|Type|Description|
|-|-|-|
|scrollTo|`(href: string): void`||

14
demo/documentation/components/anchor/zhCN/affix.md Normal file
View File

@ -0,0 +1,14 @@
# 固定
在固定模式下，Anchor 还接受和 Affix 一样的 Props。
```html
<div style="height: 200px;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" :bound="24">
<n-anchor-link title="演示" href="#Demos">
<n-anchor-link title="基础用法" href="#basic"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```

13
demo/documentation/components/anchor/zhCN/basic.md Normal file
View File

@ -0,0 +1,13 @@
# 基础用法
```html
<div>
<n-anchor>
<n-anchor-link title="演示" href="#Demos">
<n-anchor-link title="基础用法" href="#basic"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```

20
demo/documentation/components/anchor/zhCN/index.md
View File

@ -0,0 +1,20 @@
# 页面导航 Anchor
<!--single-column-->
下面的演示曾经用的是《世界尽头与冷酷仙境》的一些角色名称作为 Anchor 的子标题，但是这样的话和其他页面差的就有点远了。所以最后还是重写了这个页面，表示遗憾。
## 演示
```demo
basic
affix
scrollto
```
## Props
|名称|类型|默认值|介绍|
|-|-|-|-|
|affix|`boolean`|`false`|Anchor 是否像 Affix 一样展示，如果设定为 `true`，它还会接受 [Affix](n-affix#Props) 的 Props|
|target|`() => HTMLElement`|一个返回最邻近可滚动祖先元素的函数|需要监听滚动的元素（如果你希望 Anchor 和 Affix 分别监听不同的元素，可以手动的组合 Anchor 和 Affix）|
|bound|`number`|`12`||
## Methods
|名称|类型|介绍|
|-|-|-|
|scrollTo|`(href: string): void`||

31
demo/documentation/components/anchor/zhCN/scrollto.md Normal file
View File

@ -0,0 +1,31 @@
# 滚动到
```html
<div style="height: 200px; padding-left: 200px;">
<n-anchor affix :offset-top="24" :top="88" :bound="24" style="z-index: 1;" ref="anchor">
<n-anchor-link title="演示" href="#Demos">
<n-anchor-link title="基础用法" href="#basic"/>
<n-anchor-link title="固定" href="#affix"/>
<n-anchor-link title="滚动到" href="#scrollto"/>
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
<div style="padding-left: 400px;">
<n-button @click="scrollTo('#basic')">基础用法</n-button>
<n-button @click="scrollTo('#affix')">固定</n-button>
</div>
```
```js
export default {
methods: {
scrollTo (href) {
this.$refs.anchor.scrollTo(href)
}
}
}
```
```css
.n-button {
margin: 0 8px 12px 0;
}
```