mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
not-finished: vertical mode and custom label need to add
This commit is contained in:
mangogan
parent
0f88dfead0
commit
d2bb3901af
@ -11,11 +11,12 @@
|
||||
<div class="n-doc-body">
|
||||
<div class="n-doc-section">
|
||||
<div class="n-doc-section__header">
|
||||
Basic Usage
|
||||
Basic Usage / board mode
|
||||
</div>
|
||||
<div class="n-doc-section__view">
|
||||
<n-tab
|
||||
type="card"
|
||||
type="board"
|
||||
addable
|
||||
>
|
||||
<n-tab-panel label="Select">
|
||||
<n-form
|
||||
@ -58,7 +59,10 @@
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
<textarea v-pre>
|
||||
<n-tab>
|
||||
<n-tab
|
||||
type="board"
|
||||
addable
|
||||
>
|
||||
<n-tab-panel label="form">
|
||||
<n-form
|
||||
inline
|
||||
@ -112,7 +116,7 @@
|
||||
>
|
||||
<n-tab-panel
|
||||
name="a"
|
||||
label="a"
|
||||
label="Select"
|
||||
>
|
||||
Name: a. <br>
|
||||
We can control the element display by setting the tab's name attribute.<br>
|
||||
@ -121,10 +125,14 @@
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
name="b"
|
||||
label="b"
|
||||
label="Hover"
|
||||
>
|
||||
Name: b. <br>
|
||||
</n-tab-panel>
|
||||
<n-tab-panel
|
||||
disabled
|
||||
label="Disabled"
|
||||
/>
|
||||
</n-tab>
|
||||
</div>
|
||||
<div class="n-doc-section__source">
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<div
|
||||
:class="addable ? 'n-tab--label_addable n-tab--label' : 'n-tab--label'"
|
||||
>
|
||||
<div style="display: inline-flex;">
|
||||
<div style="display: inline-flex;margin-bottom: -1px;">
|
||||
<div
|
||||
v-for="(label, i) in labels"
|
||||
:key="i"
|
||||
@ -17,22 +17,23 @@
|
||||
<n-icon
|
||||
class="n-tab--label-delete"
|
||||
type="ios-close"
|
||||
size="20"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<n-icon
|
||||
type="ios-add"
|
||||
type="ios-add-circle-outline"
|
||||
class="n-tab--label-add"
|
||||
@click="addPanelItem"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
ref="slot"
|
||||
class="n-tab--slot"
|
||||
class="n-tab--slot-panel"
|
||||
>
|
||||
<slot />
|
||||
<div class="n-tab--slot">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -102,7 +103,7 @@ export default {
|
||||
tabCls () {
|
||||
let type = ['normal', 'card', 'board']
|
||||
let cls = 'n-tab '
|
||||
return type.indexOf(this.type) > -1 ? cls + 'n-tab_' + this.type + '' : ''
|
||||
return type.indexOf(this.type) > -1 ? cls + 'n-tab_' + this.type + '' : cls + 'n-tab_normal '
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
@ -159,7 +160,8 @@ export default {
|
||||
let newName = this.names[i]
|
||||
let eName = e.target.className
|
||||
let eParentName = e.target.parentElement.className
|
||||
let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1
|
||||
let ePPName = ((e.target.parentElement || {}).parentElement || {}).className
|
||||
let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1 || ePPName.indexOf('n-tab--label-item') > -1
|
||||
if (isLabel) {
|
||||
Promise.resolve(this.beforeLeave(newName, oldName)).then(res => {
|
||||
if (res) {
|
||||
@ -173,7 +175,8 @@ export default {
|
||||
updateActive (e, i) {
|
||||
let eName = e.target.className
|
||||
let eParentName = e.target.parentElement.className
|
||||
let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1
|
||||
let ePPName = ((e.target.parentElement || {}).parentElement || {}).className
|
||||
let isLabel = eName.indexOf('n-tab--label-item') > -1 || eParentName.indexOf('n-tab--label-item') > -1 || ePPName.indexOf('n-tab--label-item') > -1
|
||||
if (eName.indexOf('n-tab--label-delete') > -1) {
|
||||
// steps while deleting, need to set display none to label and the tab panel and then init the display
|
||||
this.labels.splice(i, 1)
|
||||
|
||||
215
styles/Tab.scss
215
styles/Tab.scss
@ -1,94 +1,21 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './theme/default.scss';
|
||||
|
||||
// @include b(tab) {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// padding: 0 10px;
|
||||
// background-color: #171D33;
|
||||
// .n-tab--label {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: space-between;
|
||||
// font-weight: bold;
|
||||
// font-size: 15px;
|
||||
// color: #ffffff;
|
||||
// .n-tab--label-item {
|
||||
// &:not(:last-child) {
|
||||
// margin-right: 25px;
|
||||
// }
|
||||
// padding-bottom: 8px;
|
||||
// .n-tab--label-delete {
|
||||
// display: none;
|
||||
// margin-left: 9px;
|
||||
// }
|
||||
// &:hover {
|
||||
// color: #55E8C7;
|
||||
// }
|
||||
|
||||
// }
|
||||
// .n-tab--label-item_active {
|
||||
// color: #63E2B7;
|
||||
// border-bottom: 2px solid rgba(99, 226, 183, 1);
|
||||
// }
|
||||
// .n-tab--label-item_delete {
|
||||
// .n-tab--label-delete {
|
||||
// display: inline-block;
|
||||
// }
|
||||
// }
|
||||
// .n-tab--label-item_disabled {
|
||||
// color: #FFFFFF;
|
||||
// opacity: 0.3;
|
||||
// pointer-events: none;
|
||||
// }
|
||||
// .n-tab--label-item_card {
|
||||
// margin-left: 0;
|
||||
// margin-right: 6px;
|
||||
// padding: 8px 16px;
|
||||
// border-radius: 6px 6px 0 0;
|
||||
// background-color: rgba(255, 255, 255, 0.3);
|
||||
// .n-tab--label-content {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// border: none;
|
||||
// color: #50E3C2
|
||||
// }
|
||||
// &.n-tab--label-item_active {
|
||||
// border: none;
|
||||
// }
|
||||
// &:hover {
|
||||
// color: #55E8C7;
|
||||
// border: none;
|
||||
// }
|
||||
// &.n-tab--label-item_close {
|
||||
// .n-tab--label-delete {
|
||||
// display: inline-block;
|
||||
// margin-left: 9px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .n-tab--label-add {
|
||||
// display: none;
|
||||
// font-size: 24px;
|
||||
// }
|
||||
// &.n-tab--label_addable {
|
||||
// .n-tab--label-add {
|
||||
// display: inline-block;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .n-tab--slot {
|
||||
// display: flex;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// }
|
||||
|
||||
@include b(tab) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// border-radius: 9px;
|
||||
border-radius: 9px;
|
||||
background-color: rgb(23, 29, 51);
|
||||
.n-tab--label-add {
|
||||
display: none;
|
||||
font-size: 24px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.n-tab--label_addable {
|
||||
.n-tab--label-add {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.n-tab--label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -97,6 +24,7 @@
|
||||
font-size: 15px;
|
||||
.n-tab--label-delete {
|
||||
display: inline-block;
|
||||
font-size: 20px;
|
||||
margin-left: 9px;
|
||||
}
|
||||
}
|
||||
@ -146,6 +74,123 @@
|
||||
color: #63E2B7;
|
||||
}
|
||||
}
|
||||
.n-tab--slot-panel {
|
||||
padding: 12px 24px 16px;
|
||||
}
|
||||
.n-tab--slot {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&.n-tab_board {
|
||||
background-color: rgb(23, 29, 51);
|
||||
.n-tab--label {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, .3);
|
||||
.n-tab--label-item:not(:last-child) {
|
||||
margin-right: 3px;
|
||||
}
|
||||
.n-tab--label-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px 6px 0 0;
|
||||
border: 1px solid rgba(255, 255, 255, .5);
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
color: #ffffff;
|
||||
.n-tab--label-delete {
|
||||
color: #F2F2F4;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.n-tab--label-item_active {
|
||||
.n-tab--label-content {
|
||||
color: #63E2B7;
|
||||
border-color: #63E2B7;
|
||||
border-bottom: none;
|
||||
background: rgb(23, 29, 51);
|
||||
}
|
||||
&:after {
|
||||
display: block;
|
||||
content: '';
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #171D33;
|
||||
}
|
||||
}
|
||||
.n-tab--label-item_disabled {
|
||||
pointer-events: none;
|
||||
.n-tab--label-content {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.n-tab--label-delete {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
.n-tab--label-text:hover {
|
||||
color: #50E3C2;
|
||||
}
|
||||
.n-tab--label-delete:hover {
|
||||
color: #63E2B7;
|
||||
}
|
||||
}
|
||||
.n-tab--slot-panel {
|
||||
padding: 13px 4px 16px 16px;
|
||||
border-radius: 0px 0px 9px 9px;
|
||||
}
|
||||
.n-tab--slot {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
&.n-tab_normal {
|
||||
padding: 14px 23px 20px;
|
||||
background-color: rgb(31, 38, 62);
|
||||
.n-tab--label-add {
|
||||
margin-right: -15px;
|
||||
}
|
||||
.n-tab--label {
|
||||
padding-bottom: 8px;
|
||||
.n-tab--label-item:not(:last-child) {
|
||||
margin-right: 35px;
|
||||
}
|
||||
.n-tab--label-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: none;
|
||||
padding-bottom: 8px;
|
||||
color: #ffffff;
|
||||
.n-tab--label-delete {
|
||||
color: #F2F2F4;
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
.n-tab--label-item_active {
|
||||
.n-tab--label-content {
|
||||
color: #63E2B7;
|
||||
border-bottom: 2px solid #63E2B7;
|
||||
}
|
||||
}
|
||||
.n-tab--label-item_disabled {
|
||||
pointer-events: none;
|
||||
.n-tab--label-content {
|
||||
opacity: 0.3;
|
||||
}
|
||||
.n-tab--label-delete {
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
.n-tab--label-text:hover {
|
||||
color: #50E3C2;
|
||||
}
|
||||
.n-tab--label-delete:hover {
|
||||
color: #63E2B7;
|
||||
}
|
||||
}
|
||||
.n-tab--slot {
|
||||
// margin: 12px 24px 16px;
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user