mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
doc(tabs): refactor
This commit is contained in:
07akioni
parent
209f4d0db8
commit
90047b0942
101
demo/documentation/components/tabs/enUS/basic.md
Normal file
101
demo/documentation/components/tabs/enUS/basic.md
Normal file
@ -0,0 +1,101 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
closable
|
||||
>
|
||||
<n-tab-panel
|
||||
name="a"
|
||||
label="aaaaaaaa"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="b"
|
||||
label="bbbbbbbb"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="c"
|
||||
label="cccccccc"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="d"
|
||||
label="dddddddd"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="e"
|
||||
label="eeeeeeee"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="ffffffff"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="i"
|
||||
label="iiiiiiii"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="jjjjjjjj"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="g"
|
||||
label="gggggggg"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="h"
|
||||
label="hhhhhhhh"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</n-tabs>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: 'b'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateName () {
|
||||
this.name = this.name === 'a' ? 'b' : 'a'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
37
demo/documentation/components/tabs/enUS/card.md
Normal file
37
demo/documentation/components/tabs/enUS/card.md
Normal file
@ -0,0 +1,37 @@
|
||||
# Card
|
||||
```html
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
type="card"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
<n-tab-panel
|
||||
v-for="panel in panels"
|
||||
:key="panel"
|
||||
:label="panel.toString()"
|
||||
:name="panel.toString()"
|
||||
>
|
||||
{{ panel }}
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
```
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
panels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
|
||||
name: '1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose (name) {
|
||||
this.$NMessage.info('Close ' + name)
|
||||
const index = this.panels.findIndex(v => name === v.toString())
|
||||
if (~index) {
|
||||
this.panels.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
5
demo/documentation/components/tabs/enUS/index.md
Normal file
5
demo/documentation/components/tabs/enUS/index.md
Normal file
@ -0,0 +1,5 @@
|
||||
# Tabs
|
||||
```demo
|
||||
basic
|
||||
card
|
||||
```
|
||||
0
demo/documentation/components/tabs/index.entry
Normal file
0
demo/documentation/components/tabs/index.entry
Normal file
0
demo/documentation/components/tabs/zhCN/index.md
Normal file
0
demo/documentation/components/tabs/zhCN/index.md
Normal file
@ -1,117 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Panel
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
style="flex-wrap: nowrap;"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
closable
|
||||
>
|
||||
<n-tab-panel
|
||||
name="a"
|
||||
label="aaaaaaaa"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="b"
|
||||
label="bbbbbbbb"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="c"
|
||||
label="cccccccc"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="d"
|
||||
label="dddddddd"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="e"
|
||||
label="eeeeeeee"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="ffffffff"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="i"
|
||||
label="iiiiiiii"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="f"
|
||||
label="jjjjjjjj"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="g"
|
||||
label="gggggggg"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="h"
|
||||
label="hhhhhhhh"
|
||||
>
|
||||
Name: b. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
Also we can use tab-panel's active attribute to init the display.
|
||||
And tab-panels's active attribute is the first priority.
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</n-tabs>
|
||||
<!--EXAMPLE_END-->
|
||||
</div>
|
||||
<pre class="n-doc-section__inspect">name: {{ name }}</pre>
|
||||
<n-doc-source-block>
|
||||
<!--SOURCE-->
|
||||
</n-doc-source-block>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: 'b'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateName () {
|
||||
this.name = this.name === 'a' ? 'b' : 'a'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Card
|
||||
</div>
|
||||
<div
|
||||
class="n-doc-section__view"
|
||||
>
|
||||
<!--EXAMPLE_START-->
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
type="card"
|
||||
closable
|
||||
@close="handleClose"
|
||||
>
|
||||
<n-tab-panel
|
||||
v-for="panel in panels"
|
||||
:key="panel"
|
||||
:label="panel.toString()"
|
||||
:name="panel.toString()"
|
||||
>
|
||||
{{ panel }}
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
<!--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 {
|
||||
panels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
|
||||
name: '1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose (name) {
|
||||
this.$NMessage.info('Close ' + name)
|
||||
const index = this.panels.findIndex(v => name === v.toString())
|
||||
if (~index) {
|
||||
this.panels.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,35 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
ref="doc"
|
||||
class="n-doc"
|
||||
>
|
||||
<div class="n-doc-header">
|
||||
<n-gradient-text :font-size="20">
|
||||
Tabs / n-tabs
|
||||
</n-gradient-text>
|
||||
</div>
|
||||
<div class="n-doc-body">
|
||||
<basic />
|
||||
<card />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import basic from './basic.demo.vue'
|
||||
import card from './card.demo.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
basic,
|
||||
card
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -36,7 +36,7 @@ import inputNumber from './documentation/components/inputNumber'
|
||||
import nimbusIconDemo from './documentation/components/nimbusIconDemo'
|
||||
import radio from './documentation/components/radio'
|
||||
import formDemo from './documentation/components/formDemo'
|
||||
import tabsDemo from './documentation/components/tabsDemo'
|
||||
import tabs from './documentation/components/tabs'
|
||||
import timePicker from './documentation/components/timePicker'
|
||||
import confirm from './documentation/components/confirm'
|
||||
import backTop from './documentation/components/backTop'
|
||||
@ -156,7 +156,7 @@ const routes = [
|
||||
{ path: '/n-nimbus-icon', component: nimbusIconDemo },
|
||||
{ path: '/n-radio', component: radio },
|
||||
{ path: '/n-form', component: formDemo },
|
||||
{ path: '/n-tabs', component: tabsDemo },
|
||||
{ path: '/n-tabs', component: tabs },
|
||||
{ path: '/n-time-picker', component: timePicker },
|
||||
{ path: '/n-confirm', component: confirm },
|
||||
{ path: '/n-router-debug', component: routerDebug },
|
||||
|
||||
@ -12,7 +12,6 @@
|
||||
$--notification-background-end-color 100%
|
||||
);
|
||||
color: $--notification-text-color;
|
||||
|
||||
@include once {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@ -24,7 +23,7 @@
|
||||
max-height: 400px;
|
||||
width: 365px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 2px 25px 0 rgba(0, 0, 0, 0.5);
|
||||
box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.12);
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s $default-cubic-bezier,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user