mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-02-17 13:20:52 +08:00
add backTop document
This commit is contained in:
songwanli2025@163.com
parent
4dddf37671
commit
98f97c09ec
4
demo/documentation/components/backTop/enUS/basic.md
Normal file
4
demo/documentation/components/backTop/enUS/basic.md
Normal file
@ -0,0 +1,4 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-back-top content-selector=".n-code-box" />
|
||||
```
|
||||
13
demo/documentation/components/backTop/enUS/changePosition.md
Normal file
13
demo/documentation/components/backTop/enUS/changePosition.md
Normal file
@ -0,0 +1,13 @@
|
||||
# Change Position
|
||||
```html
|
||||
<n-back-top
|
||||
content-selector=".n-code-box"
|
||||
:right="40"
|
||||
:bottom="100"
|
||||
:visibility-height="200"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
3
|
||||
</div>
|
||||
</n-back-top>
|
||||
```
|
||||
8
demo/documentation/components/backTop/enUS/index.md
Normal file
8
demo/documentation/components/backTop/enUS/index.md
Normal file
@ -0,0 +1,8 @@
|
||||
# BackTop
|
||||
<!--single-column-->
|
||||
```demo
|
||||
basic
|
||||
targetContainerSelector
|
||||
changePosition
|
||||
visibilityHeight
|
||||
```
|
||||
@ -0,0 +1,52 @@
|
||||
# About `content-selector` and `container-selector`
|
||||
```html
|
||||
<n-back-top
|
||||
content-selector=".n-code-box"
|
||||
:right="100"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
2.1
|
||||
</div>
|
||||
</n-back-top>
|
||||
<n-back-top
|
||||
container-selector=".n-code-box"
|
||||
:right="160"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
2.2
|
||||
</div>
|
||||
</n-back-top>
|
||||
<!--EXAMPLE_END-->
|
||||
<pre
|
||||
class="n-code-box-section__inspect"
|
||||
style="width:100%"
|
||||
>{{ explain }}</pre>
|
||||
```
|
||||
```js
|
||||
const explain = `确定 <n-back-top /> 会让哪一个元素的 scrollTop 为 0，有两种方式。
|
||||
第一种是使用 content-selector，在你无法控制外部容器的时候尽量使用它。
|
||||
例如
|
||||
<others-layout>
|
||||
<your-content class="content" />
|
||||
<n-back-top content-selector=".content" />
|
||||
</others-layout>
|
||||
当你不方便控制 <others-layout> 的时候，使用 content-selector 来选择你希望滚动的内容，
|
||||
naive-ui 会自动帮你找到它首个可滚动的祖先节点。
|
||||
|
||||
<your-container class="container">
|
||||
<your-content>
|
||||
</your-content>
|
||||
<n-back-top container-selector=".container" />
|
||||
</your-container>
|
||||
当你可以控制滚动容器的时候，可以使用 container-selector 来选择你合适的滚动容器。
|
||||
当然，如果滚动的是 document，你什么都不用写。
|
||||
`
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
explain
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,13 @@
|
||||
# Visibility Height
|
||||
```html
|
||||
<n-back-top
|
||||
:right="100"
|
||||
:bottom="100"
|
||||
content-selector=".n-code-box"
|
||||
:visibility-height="600"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
4
|
||||
</div>
|
||||
</n-back-top>
|
||||
```
|
||||
0
demo/documentation/components/backTop/index.entry
Normal file
0
demo/documentation/components/backTop/index.entry
Normal file
0
demo/documentation/components/backTop/zhCN/index.md
Normal file
0
demo/documentation/components/backTop/zhCN/index.md
Normal file
@ -1,18 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top content-selector=".n-doc" />
|
||||
<!--EXAMPLE_END-->
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
3. Change Position
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top
|
||||
content-selector=".n-doc"
|
||||
:right="40"
|
||||
:bottom="100"
|
||||
:visibility-height="200"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
3
|
||||
</div>
|
||||
</n-back-top>
|
||||
<!--EXAMPLE_END-->
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
BackTop / n-back-top
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic-usage />
|
||||
<target-container-selector />
|
||||
<change-position />
|
||||
<visibility-height />
|
||||
<div style="height: 1200px; width: 100%;" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basicUsage from './basicUsage.demo.vue'
|
||||
import changePosition from './changePosition.demo.vue'
|
||||
import visibilityHeight from './visibilityHeight.demo.vue'
|
||||
import targetContainerSelector from './targetContainerSelector.demo'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basicUsage,
|
||||
changePosition,
|
||||
visibilityHeight,
|
||||
targetContainerSelector
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,60 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
2. About `content-selector` and `container-selector`
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top
|
||||
content-selector=".n-doc"
|
||||
:right="100"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
2.1
|
||||
</div>
|
||||
</n-back-top>
|
||||
<n-back-top
|
||||
container-selector=".n-scrollbar-container"
|
||||
:right="160"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
2.2
|
||||
</div>
|
||||
</n-back-top>
|
||||
<!--EXAMPLE_END-->
|
||||
<pre
|
||||
class="n-doc-section__inspect"
|
||||
>{{ explain }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const explain = `确定 <n-back-top /> 会让哪一个元素的 scrollTop 为 0，有两种方式。
|
||||
第一种是使用 content-selector，在你无法控制外部容器的时候尽量使用它。
|
||||
例如
|
||||
<others-layout>
|
||||
<your-content class="content" />
|
||||
<n-back-top content-selector=".content" />
|
||||
</others-layout>
|
||||
当你不方便控制 <others-layout> 的时候，使用 content-selector 来选择你希望滚动的内容，
|
||||
naive-ui 会自动帮你找到它首个可滚动的祖先节点。
|
||||
|
||||
<your-container class="container">
|
||||
<your-content>
|
||||
</your-content>
|
||||
<n-back-top container-selector=".container" />
|
||||
</your-container>
|
||||
当你可以控制滚动容器的时候，可以使用 container-selector 来选择你合适的滚动容器。
|
||||
当然，如果滚动的是 document，你什么都不用写。
|
||||
`
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
explain
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,27 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
4. Visibility Height
|
||||
</div>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-back-top
|
||||
:right="100"
|
||||
:bottom="100"
|
||||
content-selector=".n-doc"
|
||||
:visibility-height="600"
|
||||
>
|
||||
<div style="width: 40px; height: 40px; line-height: 40px; text-align: center;">
|
||||
4
|
||||
</div>
|
||||
</n-back-top>
|
||||
<!--EXAMPLE_END-->
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}
|
||||
</script>
|
||||
@ -41,7 +41,7 @@ import formDemo from './documentation/components/formDemo'
|
||||
import tabsDemo from './documentation/components/tabsDemo'
|
||||
import timePickerDemo from './documentation/components/timePickerDemo'
|
||||
import confirm from './documentation/components/confirm'
|
||||
import backTopDemo from './documentation/components/backTopDemo'
|
||||
import backTop from './documentation/components/backTop'
|
||||
import dropdownDemo from './documentation/components/dropdownDemo'
|
||||
import scrollbarDebug from './debugComponents/scrollbarDebug'
|
||||
import scrollbarDebug2 from './debugComponents/scrollbarDebug2'
|
||||
@ -171,7 +171,7 @@ const routes = [
|
||||
{ path: '/n-tag', component: tag },
|
||||
{ path: '/n-timeline', component: timelineDemo },
|
||||
{ path: '/n-scrollbar-debug2', component: scrollbarDebug2 },
|
||||
{ path: '/n-back-top', component: backTopDemo },
|
||||
{ path: '/n-back-top', component: backTop },
|
||||
{ path: '/n-date-picker-debug', component: datePickerDebug },
|
||||
{ path: '/n-divider', component: divider },
|
||||
{ path: '/n-popconfirm', component: popconfirmDemo },
|
||||
|
||||
Loading…
Reference in New Issue
Block a user