admin管理员组文章数量:1538748
css 水平很差,还得多练,这里分享给大家谷歌标签栏的模仿效果
效果
普通效果
压缩到最小时
鼠标移动效果
源码
<template>
<div class="tabs">
<div class="tab " media="tab" :class="active" @mouseover="active='active'" @mouseleave="active=''">
<div><img v-if="icon" class="icon" :src="icon" /></div>
<div class="title">{{title}}</div>
<div class="closer">
<a-icon v-show="active=='active'" type="close" class="closer-icon" />
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: String,
icon: String,
},
data() {
return {
active: '',
}
},
methods: {},
mounted() {
},
}
</script>
<style scoped>
.tabs {
line-height: 34px;
height: 34px;
}
.tab {
display: flex;
flex-wrap: nowrap;
justify-content: start;
min-width: 10px;
overflow:hidden;
line-height: 34px;
height: 34px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 0px;
border-radius: 2px;
background-color: ghostwhite;
-webkit-app-region: no-drag;
}
@media screen and (max-width: 500px) {
.tabs {
min-width: 5%;
}
.tabs .title{
width: 0px;
min-width: 0px;
}
}
@media screen and (min-width: 500px) {
.tabs .tab{
min-width: 100px;
}
.tabs .title{
}
}
/* 悬停样式 */
.tab:hover {
background-color: white;
}
/* 当前的tab */
.tab.active {
background-color: white;
}
.icon {
min-width: 20px;
margin: 0px 6px 6px 6px ;
width: 20px;
border-radius: 4px;
}
.title {
/* transform: translate(10px,0); */
line-height: 34px;
cursor: default;
min-width: 0px;
width: 100%;
/* 禁止文字复制 */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.closer{
display: flex;
justify-content: flex-end;
background: linear-gradient(to left, ghostwhite, transparent);
width: 20px;
}
.tab.active .closer-icon {
transform: translateX(-5px);
margin-top: 5px;
padding: 3px;
height: 20px;
width: 20px;
justify-content: flex-end;
border-radius: 50%;
}
.tab.active .closer-icon:hover {
background-color: rgba(0, 0, 0, 0.1);
}
</style>
版权声明:本文标题:CSS 模仿谷歌浏览器 tab 标签栏 效果 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1726982579a1092973.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论