theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(tabs): 完善卡片和默认类型的位置切换

Browse Source
This commit is contained in:
sight 2022-03-31 15:34:39 +08:00
parent da148ac779
commit 91a04bfde6
2 changed files with 48 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
example/docs/zh-CN/components/tab.md
View File

@ -42,7 +42,7 @@ export default {
::: demo
<template>
<lay-tab type="brief" v-model="current2" tabPosition = "right">
<lay-tab type="brief" v-model="current2">
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
</lay-tab>
@ -236,7 +236,12 @@ export default {
<lay-button type="default" size="sm" @click = "tabPosition = 'top'">top</lay-button>
<lay-button type="default" size="sm" @click = "tabPosition = 'bottom'">bottom</lay-button>
</lay-button-group>
<lay-tab type="brief" v-model="current7" :tabPosition = "tabPosition">
<lay-button-group>
<lay-button type="default" size="sm" @click = "tabType = ''">默认</lay-button>
<lay-button type="default" size="sm" @click = "tabType = 'brief'">简约</lay-button>
<lay-button type="default" size="sm" @click = "tabType = 'card'">卡片</lay-button>
</lay-button-group>
<lay-tab :type="tabType" v-model="current7" :tabPosition = "tabPosition">
<lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
<lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
<lay-tab-item title="选项三" id="3"><div style="padding:20px">选项三</div></lay-tab-item>
@ -252,10 +257,12 @@ export default {
const current7 = ref("1");
const tabPosition = ref("left");
const tabType = ref("brief");
return {
current2,
tabPosition
tabPosition,
tabType
}
}
}

47
src/component/tab/index.less
View File

@ -76,6 +76,7 @@
border: none;
border-radius: 0;
border-right: 2px solid @global-checked-color;
margin-left: 1px;
}
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-more li.layui-this:after,
@ -83,15 +84,16 @@
border: none;
border-radius: 0;
border-left: 2px solid @global-checked-color;
margin-right: 1px;
}
// .layui-tab-title.is-right li{
// border-left: 2px solid @global-neutral-color-6;
// }
.layui-tab-brief > .layui-tab-head.is-right > .layui-tab-title{
border-left: 1px solid @global-neutral-color-3;
}
// .layui-tab-title.is-left li{
// border-right: 2px solid @global-neutral-color-6;
// }
.layui-tab-brief > .layui-tab-head.is-left > .layui-tab-title{
border-right: 1px solid @global-neutral-color-3;
}
/** 位置结束*/
@ -120,6 +122,16 @@
pointer-events: none;
}
.layui-tab-title.is-left .layui-this:after {
border: 1px solid @global-neutral-color-3;
border-right-color: #FFF;
}
.layui-tab-title.is-right .layui-this:after {
border: 1px solid @global-neutral-color-3;
border-left-color: #FFF;
}
.layui-tab-bar {
position: absolute;
right: 0;
@ -236,15 +248,32 @@
margin-left: -1px;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left li,
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right li{
margin-top: -1px;
margin-bottom: -1px;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this {
background-color: #fff;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-this:after {
border-top: none;
border-width: 1px;
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-top .layui-this:after {
border: 1px solid @global-neutral-color-3;
border-bottom-color: #fff;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-bottom .layui-this:after {
border: 1px solid @global-neutral-color-3;
border-top-color: #fff;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-left .layui-this:after {
border: 1px solid @global-neutral-color-3;
border-right-color: #fff;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title.is-right .layui-this:after {
border: 1px solid @global-neutral-color-3;
border-left-color: #fff;
}
.layui-tab-card > .layui-tab-head > .layui-tab-title .layui-tab-bar {
height: 40px;