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

feat(anchor): scrollTo

Browse Source
This commit is contained in:
07akioni 2019-12-09 12:49:51 +08:00
parent 2b1bf5b91e
commit 1f14a6e72f
6 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
demo/documentation/components/affix/enUS/basic.md
View File

@ -1,18 +1,17 @@
# Basic
Affix has `offset-top`, `top`, `offset-bottom` and `bottom`. `offset-top` is top affixing trigger point. `top` is the style `top` value after top affixing is trigger. `offset-bottom` and `bottom` work in similar way.
```html
<div class="container">
<div class="padding"></div>
<div class="content">
<n-row>
<n-col :span="12">
<n-affix :offset-top="60"><n-tag>Top 50px</n-tag></n-affix>
<n-affix :top="120" :offset-top="60"><n-tag>Top 60px</n-tag></n-affix>
</n-col>
<n-col :span="12">
<n-affix :offset-bottom="60"><n-tag>Bottom 60px</n-tag></n-affix>
<n-affix :bottom="120" :offset-bottom="60"><n-tag>Bottom 60px</n-tag></n-affix>
</n-col>
</n-row>
<!-- <n-affix :bottom="60" style="margin-left: 80px"><n-tag>Bottom 50px</n-tag></n-affix>
<n-affix :top="60" :bottom="60" style="margin-left: 200px"><n-tag>Top 50px & Bottom 50px</n-tag></n-affix> -->
</div>
</div>
```

15
demo/documentation/components/anchor/enUS/affix.md Normal file
View File

@ -0,0 +1,15 @@
# Affix
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-link>
</n-anchor>
</div>
```

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

@ -1,7 +1,7 @@
# Basic
```html
<div style="height: 200px; padding-left: 200px;">
<n-anchor affix :offset-top="24" :top="88" style="z-index: 1;">
<div style="height: 200px;">
<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"/>

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

@ -2,6 +2,8 @@
<!--single-column-->
```demo
basic
affix
scrollto
the-narrator
the-narrator-s-shadow
the-gatekeeper

32
demo/documentation/components/anchor/enUS/scrollto.md Normal file
View File

@ -0,0 +1,32 @@
# 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-link>
</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>
</div>
```
```js
export default {
methods: {
scrollTo (href) {
this.$refs.anchor.scrollTo(href)
}
}
}
```
```css
.n-button {
margin: 0 8px 12px 0;
}
```

11
packages/common/Anchor/src/AnchorAdapter.vue
View File

@ -1,10 +1,11 @@
<template>
<anchor
<n-base-anchor
v-if="!affix"
ref="anchor"
:target="target"
>
<slot />
</anchor>
</n-base-anchor>
<n-affix
v-else
:target="target"
@ -15,6 +16,7 @@
:position="position"
>
<n-base-anchor
ref="anchor"
:target="target"
>
<slot />
@ -61,6 +63,11 @@ export default {
type: Number,
default: undefined
}
},
methods: {
scrollTo (href) {
this.$refs.anchor.setActiveHref(href)
}
}
}
</script>