Skip to content

Commit

Permalink
feat: 优化 tabs 样式细节
Browse files Browse the repository at this point in the history
  • Loading branch information
@Tyh2001
Tyh2001 committed Jul 28, 2023
1 parent d953cfb commit f9d0310
Show file tree
Hide file tree
Showing 4 changed files with 158 additions and 73 deletions.
8 changes: 6 additions & 2 deletions packages/fighting-design/tabs/src/tabs.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,9 @@
<!-- 头部内容 -->
<div class="f-tabs__head">
<!-- 前缀插槽 -->
<slot v-if="$slots.prefix" name="prefix" />
<div v-if="$slots.prefix" class="f-tabs__prefix">
<slot name="prefix" />
</div>

<!-- 标签列表 -->
<div class="f-tabs__navs">
Expand All @@ -159,7 +161,9 @@
</div>

<!-- 后缀插槽 -->
<slot v-if="$slots.suffix" name="suffix" />
<div v-if="$slots.suffix" class="f-tabs__suffix">
<slot name="suffix" />
</div>
</div>

<!-- 主要展示的内容 -->
Expand Down
2 changes: 1 addition & 1 deletion packages/fighting-theme/src/radio-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@

.f-radio {
.f-radio__text {
color: rgb(142, 142, 160);
color: #8e8ea0;
}

// 选中的
Expand Down
215 changes: 147 additions & 68 deletions packages/fighting-theme/src/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,140 +2,219 @@
display: flex;
flex-direction: column;

// 头部
&__head {
display: flex;
justify-content: space-between;
align-items: center;
column-gap: 13px;

// 前缀后缀
.f-tabs__prefix,
.f-tabs__suffix {
display: flex;
padding: 6px 12px;
box-sizing: border-box;
}

// 菜单栏
.f-tabs__navs {
width: 100%;
}
}
}

// 菜单栏
// 线性类型
&__line {
.f-tabs__navs {
display: flex;
justify-content: var(--tabs-justify-content);
.f-tabs__head {
.f-tabs__navs {
display: flex;
justify-content: var(--tabs-justify-content);

// 每一项
.f-tabs__nav-item {
cursor: pointer;
padding: 10px 7px;
box-sizing: border-box;
font-size: 15px;
user-select: none;

// 选中状态
&.f-tabs__nav-active {
color: #2d5af1;
border-color: #2d5af1;
}
}
}
}

&.f-tabs__bottom .f-tabs__navs {
column-gap: 12px;

// 每一项
.f-tabs__nav-item {
cursor: pointer;
padding: 10px 7px;
box-sizing: border-box;
font-size: 15px;
user-select: none;
border-top: 2px solid transparent;
}
}

// 选中状态
&.f-tabs__nav-active {
color: #2d5af1;
border-color: #2d5af1;
}
&.f-tabs__top .f-tabs__navs {
column-gap: 12px;

.f-tabs__nav-item {
border-bottom: 2px solid transparent;
}
}

&.f-tabs__right .f-tabs__nav-item {
border-left: 2px solid transparent;
}

&.f-tabs__left .f-tabs__nav-item {
border-right: 2px solid transparent;
}
}

// 卡片类型
&__card {
.f-tabs__navs {
display: flex;
justify-content: var(--tabs-justify-content);

.f-tabs__nav-item {
padding: 4px 12px;
border: 1px solid #ddd;
cursor: pointer;
.f-tabs__head {
.f-tabs__navs {
display: flex;
align-items: center;
user-select: none;
background-color: #f5f7fa;
justify-content: var(--tabs-justify-content);

.f-tabs__nav-item {
padding: 4px 12px;
border: 1px solid #ddd;
cursor: pointer;
display: flex;
align-items: center;
user-select: none;
background-color: #f5f7fa;
color: #8e8ea0;

// 选中状态
&.f-tabs__nav-active {
color: #2d5af1;
background-color: #fff;
}
}
}
}

// 右侧的圆角
&.f-tabs__right .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
border-bottom-right-radius: 8px;
border-top-right-radius: 8px;
}

// 左侧的圆角
&.f-tabs__left .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
border-bottom-left-radius: 8px;
border-top-left-radius: 8px;
}

// 上侧的圆角
&.f-tabs__top .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}

// 下侧的圆角
&.f-tabs__bottom .f-tabs__head .f-tabs__navs .f-tabs__nav-item {
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
}

// 分段类型
&__segment {
.f-tabs__navs {
display: flex;
justify-content: var(--tabs-justify-content);
background: #f7f7f7;
padding: 4px;
box-sizing: border-box;

.f-tabs__nav-item {
flex: 1;
padding: 4px 12px;
cursor: pointer;
.f-tabs__head {
.f-tabs__navs {
display: flex;
justify-content: center;
align-items: center;
user-select: none;
background-color: transparent;
text-align: center;
word-break: keep-all;
padding: 4px 8px;

// 选中状态
&.f-tabs__nav-active {
color: #2d5af1;
background-color: #fff;
justify-content: var(--tabs-justify-content);
background: #f7f7f7;
padding: 4px;
box-sizing: border-box;

.f-tabs__nav-item {
flex: 1;
padding: 4px 12px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
user-select: none;
background-color: transparent;
text-align: center;
word-break: keep-all;
padding: 4px 8px;
color: #8e8ea0;

// 选中状态
&.f-tabs__nav-active {
color: #2d5af1;
background-color: #fff;
}
}
}
}
}

// 不同的 nav 列表方向
// 上
// 上部
&__top {
flex-direction: column;

.f-tabs__navs {
column-gap: 12px;
.f-tabs__head {
border-bottom: 1px solid #ddd;

.f-tabs__nav-item {
border-bottom: 2px solid transparent;
}
align-items: end;
}
}

// 底部
&__bottom {
flex-direction: column-reverse;

.f-tabs__navs {
column-gap: 12px;
.f-tabs__head {
border-top: 1px solid #ddd;

.f-tabs__nav-item {
border-top: 2px solid transparent;
}
align-items: start;
}
}

// 左侧
&__left {
flex-direction: row;

.f-tabs__navs {
.f-tabs__head {
flex-direction: column;
border-right: 1px solid #ddd;

.f-tabs__nav-item {
border-right: 2px solid transparent;
// 前缀后缀
.f-tabs__prefix,
.f-tabs__suffix {
width: 100%;
}

.f-tabs__navs {
flex-direction: column;
}
}
}

// 右侧
&__right {
flex-direction: row-reverse;

.f-tabs__navs {
.f-tabs__head {
flex-direction: column;
border-left: 1px solid #ddd;

.f-tabs__nav-item {
border-left: 2px solid transparent;
// 前缀后缀
.f-tabs__prefix,
.f-tabs__suffix {
width: 100%;
}

.f-tabs__navs {
flex-direction: column;
}
}
}
Expand Down
6 changes: 4 additions & 2 deletions start/src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
{{ act }}
<f-tabs
v-model="act"
position="top"
position="left"
trigger="click"
type="line"
>
<template #prefix>
<f-button type="primary">前缀</f-button>
Expand All @@ -19,7 +20,8 @@
</template>

<f-tabs-item label="如烟">
<p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p>
等哈时间的哈市绝对会撒娇
<!-- <p>七岁的那一年，抓住那只蝉，以为能抓住夏天；</p> -->
<!-- <p>十七岁的那年，吻过他的脸，就以为和他能永远。</p> -->
</f-tabs-item>
<f-tabs-item label="盛夏光年" name="222">
Expand Down

0 comments on commit f9d0310

Please sign in to comment.