mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-30 12:52:43 +08:00
refactor(tab): wip
This commit is contained in:
07akioni
parent
31f79fc454
commit
4a4eb267c9
@ -1,101 +1,82 @@
|
||||
# Basic
|
||||
```html
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
closable
|
||||
>
|
||||
<n-tab-panel
|
||||
name="a"
|
||||
label="aaaaaaaa"
|
||||
<n-card title="Song of" style="margin-bottom: 16px;">
|
||||
<n-tabs
|
||||
v-model="name"
|
||||
>
|
||||
Name: a. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="b"
|
||||
label="bbbbbbbb"
|
||||
<n-tab-panel
|
||||
name="oasis"
|
||||
label="Oasis"
|
||||
>
|
||||
Wonderwall
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="the beatles"
|
||||
label="the Beatles"
|
||||
>
|
||||
Hey Jude
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="jay chou"
|
||||
label="Jay Chou"
|
||||
>
|
||||
Qilixiang
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
<n-card>
|
||||
<n-tabs
|
||||
v-model="func"
|
||||
size="large"
|
||||
>
|
||||
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>
|
||||
<n-tab-panel
|
||||
name="signin"
|
||||
label="Sign in"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item-row label="Username">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Password">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
</n-form>
|
||||
<n-button type="primary" block>Sign In</n-button>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="signup"
|
||||
label="Sign Up"
|
||||
>
|
||||
<n-form>
|
||||
<n-form-item-row label="Username">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Password">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
<n-form-item-row label="Reenter Password">
|
||||
<n-input />
|
||||
</n-form-item-row>
|
||||
</n-form>
|
||||
<n-button type="primary" block>Sign Up</n-button>
|
||||
</n-tab-panel>
|
||||
</n-tabs>
|
||||
</n-card>
|
||||
```
|
||||
|
||||
```js
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
name: 'b'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateName () {
|
||||
this.name = this.name === 'a' ? 'b' : 'a'
|
||||
name: 'oasis',
|
||||
func: 'signin'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
.n-button {
|
||||
margin-top: 12px;
|
||||
}
|
||||
```
|
||||
@ -1,4 +1,4 @@
|
||||
import Tab from './src/main.vue'
|
||||
import Tab from './src/Tabs.vue'
|
||||
import NTabPanel from './src/TabPanel.vue'
|
||||
|
||||
Tab.install = function (Vue) {
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
:class="{
|
||||
[`n-tabs--${type}-type`]: true,
|
||||
'n-tabs--scroll': showScrollButton,
|
||||
[`n-tabs--${size}-size`]: size,
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
>
|
||||
@ -127,9 +128,13 @@ export default {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
addable: {
|
||||
bodered: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -6,6 +6,27 @@
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
@include m(medium-size) {
|
||||
@include b(tab-label) {
|
||||
@include e(label) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(large-size) {
|
||||
@include b(tab-label) {
|
||||
@include e(label) {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(huge-size) {
|
||||
@include b(tab-label) {
|
||||
@include e(label) {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(tab-nav) {
|
||||
display: flex;
|
||||
@include e(scroll) {
|
||||
@ -57,9 +78,9 @@
|
||||
@include e(close) {
|
||||
fill: map-get($--tabs-tab-close-button-color, 'default');
|
||||
margin-left: 8px;
|
||||
font-size: 20px;
|
||||
line-height: 20px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
transition: color .3s $default-cubic-bezier;
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
'disabled': rgba(255, 255, 255, .2)
|
||||
) !global;
|
||||
$--tabs-tab-close-button-color: (
|
||||
'default': rgba(255, 255, 255, .3),
|
||||
'default': $--n-close-color
|
||||
) !global;
|
||||
$--tabs-card-tab-background-color: $--n-table-header-color !global;
|
||||
$--tabs-card-tab-panel-background-color: $--n-card-color !global;
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
'disabled': rgba(0, 0, 0, .2)
|
||||
) !global;
|
||||
$--tabs-tab-close-button-color: (
|
||||
'default': rgba(0, 0, 0, .3),
|
||||
'default': $--n-close-color
|
||||
) !global;
|
||||
$--tabs-card-tab-background-color: $--neutral-8 !global;
|
||||
$--tabs-card-tab-panel-background-color: white !global;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user