mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2024-12-09 04:31:35 +08:00
feat(anchor): scrollTo
This commit is contained in:
parent
2b1bf5b91e
commit
1f14a6e72f
@ -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
15
demo/documentation/components/anchor/enUS/affix.md
Normal 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>
|
||||
```
|
@ -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,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
32
demo/documentation/components/anchor/enUS/scrollto.md
Normal 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;
|
||||
}
|
||||
```
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user