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(scrollbar): add scrollbar debug component

Browse Source
This commit is contained in:
07akioni 2019-07-31 17:34:17 +08:00
parent 9375495261
commit f1cea3cf14
5 changed files with 64 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
demo/components/scrollbarDemo/scaffold.demo.vue
View File

@ -1,34 +0,0 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Scrollbar
</div>
<div
class="n-doc-section__view"
style="flex-wrap: nowrap;"
>
<!--EXAMPLE_START-->
<div style="width: 400px; height: 300px;">
<n-scrollbar>
<div style="background: linear-gradient(red, blue); width: 800px; height: 500px;">
666
</div>
</n-scrollbar>
</div>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

0
demo/components/scrollbarDemo/index.vue → demo/debugComponents/scrollbarDebug/index.vue
View File

57
demo/debugComponents/scrollbarDebug/scaffold.demo.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="n-doc-section">
<div class="n-doc-section__header">
Scrollbar
</div>
<div
class="n-doc-section__view"
style="flex-wrap: wrap;"
>
<!--EXAMPLE_START-->
<div style="width: 400px; height: 300px;">
<n-scrollbar fit-content-width>
<div style="background: linear-gradient(red, blue); width: 800px; height: 500px;">
666
</div>
</n-scrollbar>
</div>
<div style="width: 400px; height: 300px;">
<n-scrollbar>
<div style="background: linear-gradient(red, blue); width: 400px; height: 500px;">
666
</div>
</n-scrollbar>
</div>
<div style="width: 400px; height: 300px;">
<n-scrollbar fit-content-width>
<div style="background: linear-gradient(red, blue); width: 800px; height: 300px;">
666
</div>
</n-scrollbar>
</div>
<div style="width: 400px; height: 300px;">
<n-scrollbar>
<div style="background: linear-gradient(red, blue); height: 300px;">
<div style="background: yellow; width: 100%; color: black;">
666
</div>
</div>
</n-scrollbar>
</div>
<!--EXAMPLE_END-->
</div>
<pre class="n-doc-section__inspect">Inspect some value here</pre>
<n-doc-source-block>
<!--SOURCE-->
</n-doc-source-block>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>

9
demo/demo.vue
View File

@ -111,10 +111,7 @@ export default {
name: 'Radio',
path: '/n-radio'
},
{
name: 'Scrollbar',
path: '/n-scrollbar'
},
{
name: 'Select',
path: '/n-select'
@ -155,6 +152,10 @@ export default {
{
name: 'ModalDebug',
path: '/n-modal-debug'
},
{
name: 'ScrollbarDebug',
path: '/n-scrollbar-debug'
}
]
}

4
demo/index.js
View File

@ -28,7 +28,7 @@ import nimbusIconDemo from './components/nimbusIconDemo'
import radioDemo from './components/radioDemo'
import formDemo from './components/formDemo'
import timePickerDemo from './components/timePickerDemo'
import scrollbarDemo from './components/scrollbarDemo'
import scrollbarDebug from './debugComponents/scrollbarDebug'
import notificationDemo from './components/notificationDemo'
import nimbusConfirmCardDemo from './components/nimbusConfirmCardDemo'
@ -87,7 +87,7 @@ const routes = [
{ path: '/n-time-picker', component: timePickerDemo },
{ path: '/n-router-debug', component: routerDebug },
{ path: '/n-modal-debug', component: modalDebug },
{ path: '/n-scrollbar', component: scrollbarDemo }
{ path: '/n-scrollbar-debug', component: scrollbarDebug }
]
},
{