mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

doc(anchor)

Browse Source
This commit is contained in:
07akioni 2020-01-29 20:51:51 +08:00
parent a46b5d3dfd
commit 09c3b8d73f
13 changed files with 37 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
demo/documentation/components/anchor/enUS/affix.md
View File

@ -2,14 +2,13 @@
When in affix mode, Anchor can recieve addition props as same as Affix.
```html
<div style="height: 200px;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
<n-anchor-link title="The Narrator" href="#the-narrator"/>
<n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
<n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
<n-anchor-link title="The Librarian" href="#the-librarian">
<n-anchor-link title="The Colonel" href="#the-colonel"/>
<n-anchor-link title="The Caretaker" href="#the-caretaker"/>
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" :bound="24">
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Basic" href="#basic"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```

13
demo/documentation/components/anchor/enUS/basic.md
View File

@ -1,14 +1,13 @@
# Basic
```html
<div style="height: 200px;">
<div>
<n-anchor>
<n-anchor-link title="The Narrator" href="#the-narrator"/>
<n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
<n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
<n-anchor-link title="The Librarian" href="#the-librarian">
<n-anchor-link title="The Colonel" href="#the-colonel"/>
<n-anchor-link title="The Caretaker" href="#the-caretaker"/>
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Basic" href="#basic"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
```

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

@ -1,14 +1,20 @@
# Anchor
<!--single-column-->
## Demos
```demo
basic
affix
scrollto
the-narrator
the-narrator-s-shadow
the-gatekeeper
the-librarian
the-colonel
the-caretaker
placeholder
```
```
## Props
|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.|
|bound|`number`|`12`||
## Methods
|Method|Description|
|-|-|
|`scrollTo(href: string)`||

4
demo/documentation/components/anchor/enUS/placeholder.md
View File

@ -1,4 +0,0 @@
# Placeholder
```html
<div style="height: 1200px;"></div>
```

17
demo/documentation/components/anchor/enUS/scrollto.md
View File

@ -1,19 +1,18 @@
# Scroll To
```html
<div style="height: 200px; padding-left: 200px;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;" ref="anchor">
<n-anchor-link title="The Narrator" href="#the-narrator"/>
<n-anchor-link title="The Narrator's Shadow" href="#the-narrator-s-shadow"/>
<n-anchor-link title="The Gatekeeper" href="#the-gatekeeper"/>
<n-anchor-link title="The Librarian" href="#the-librarian">
<n-anchor-link title="The Colonel" href="#the-colonel"/>
<n-anchor-link title="The Caretaker" href="#the-caretaker"/>
<n-anchor affix :offset-top="24" :top="88" :bound="24" style="z-index: 1;" ref="anchor">
<n-anchor-link title="Demos" href="#Demos">
<n-anchor-link title="Basic" href="#basic"/>
<n-anchor-link title="Affix" href="#affix"/>
<n-anchor-link title="Scroll To" href="#scrollto"/>
</n-anchor-link>
<n-anchor-link title="Props" href="#Props" />
</n-anchor>
</div>
<div style="padding-left: 400px;">
<n-button @click="scrollTo('#the-librarian')">Librarian</n-button>
<n-button @click="scrollTo('#the-caretaker')">Caretaker</n-button>
<n-button @click="scrollTo('#basic')">Basic</n-button>
<n-button @click="scrollTo('#affix')">Affix</n-button>
</div>
```
```js

3
demo/documentation/components/anchor/enUS/theCaretaker.md
View File

@ -1,3 +0,0 @@
# The Caretaker
```html
```

3
demo/documentation/components/anchor/enUS/theColonel.md
View File

@ -1,3 +0,0 @@
# The Colonel
```html
```

3
demo/documentation/components/anchor/enUS/theGatekeeper.md
View File

@ -1,3 +0,0 @@
# The Gatekeeper
```html
```

3
demo/documentation/components/anchor/enUS/theLibrarian.md
View File

@ -1,3 +0,0 @@
# The Librarian
```html
```

3
demo/documentation/components/anchor/enUS/theNarrator.md
View File

@ -1,3 +0,0 @@
# The Narrator
```html
```

3
demo/documentation/components/anchor/enUS/theNarratorSShadow.md
View File

@ -1,3 +0,0 @@
# The Narrators's Shadow
```html
```

4
demo/header.vue
View File

@ -39,7 +39,7 @@
:value="lang"
size="small"
:options="langOptions"
@input="handleLangInput"
@change="handleLanguageChange"
/>
</div>
</div>
@ -110,7 +110,7 @@ export default {
handleThemeChange (theme) {
this.NConfigProvider.$parent.theme = theme
},
handleLangInput (lang) {
handleLanguageChange (lang) {
this.$emit('lang-change', lang)
}
}

1
think.md
View File

@ -122,6 +122,7 @@ Safari select lightbar container overflow 边角
Chrome lightbar offset @table fitler
cascader
form required css
anchor 还是有点问题 bound 不够的时候切换
// pref hollowout, cache next bg color
// issue fix, add delay prop