CSS 工具条缩放（无需图标的三角形切换icon）

AvatarGiser

已于 2023-05-29 11:16:06 修改

阅读量164

点赞数

分类专栏： CSS 小知识点文章标签： css 前端

于 2023-05-29 11:12:49 首次发布

本文链接：https://blog.csdn.net/sinat_31213021/article/details/130924328

版权

CSS 小知识点专栏收录该内容

34 篇文章 3 订阅

订阅专栏

效果

代码

html

<div :class="[`index-tool`, showTools ? '' : 'hidden-right-border']" >
    <!-- 收缩按钮 -->
    <div class="visible-btn" @click="showTools=!showTools">
        <div :class="['tangle', showTools ? 'left-tangle' : 'right-tangle']"></div>
    </div>
    <!-- 工具条 -->
    <div v-show="showTools" v-for="(item,index) in icons" :key="index" :title="item.label" class="btn">
        <img src="../assets/images/test.png" >
    </div>
</div>

CSS

代码 25 行，设置三角形的高宽为 5px；
代码 29 - 36，用于切换三角形；
代码 55 - 62，隐藏后将工具条放在 right=100px 固定位；

.index-tool{
    position absolute
    top: 93px;
    left:  50%;
    right: unset;
    transform: translateX(-50%)
    z-index 999
    width max-content
    display flex
    flex-direction row
    color:#ffffff;
    background-color:rgba(0, 61, 61, 0.8);
    border:1px solid #0d8a72;
    .visible-btn {
        display: inline-block;
        width: 14px;
        height: 47px;
        border-right: 1px solid #0d8a72;
        cursor: pointer;
        .tangle {
            display: inline-block;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 5px 5px 5px 5px;
            margin-top: 17px;
            
        }
        .left-tangle {
            margin-left: 5px;
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #e2eaf3;
        }
        .right-tangle {
            // margin-left: 5px;
            border-color: rgba(0,0,0,0) #e2eaf3 rgba(0,0,0,0) rgba(0,0,0,0);
        }
    }
    .btn {
        width: 66px;
        height: 47px;
        text-align: center;
        cursor: pointer;
        img {
            margin-top: 8px;
        }
        .label {
            font-size:15px;
            transform: scale(0.8);
            letter-spacing: 1px;
            margin-top: 3px;
            text-shadow: 0px 4px 6px rgba(0,0,0,.4 );
        }
    }
}
.hidden-right-border {
    border-right: none;
    border-radius:0;
    padding-right: 0;
    left: unset;
    transform: none;
    right: 100px;
}

源码

<template>
	<div class="tool">
		<div :class="[`index-tool`, showTools ? '' : 'hidden-right-border']" >
            <!-- 收缩按钮 -->
            <div class="visible-btn" @click="showTools=!showTools">
                <div :class="['tangle', showTools ? 'left-tangle' : 'right-tangle']"></div>
            </div>
            <!-- 工具条 -->
            <div v-show="showTools" v-for="(item,index) in icons" :key="index" :title="item.label" class="btn">
                <img src="../assets/images/test.png" >
            </div>
        </div>
	</div>
</template>
<script>
export default {
	data() {
		return {
            showTools: true,
            icons: [
                {
                   label: '测试 01 ' 
                },
                {
                   label: '测试 01 ' 
                },
                {
                   label: '测试 01 ' 
                },
                {
                   label: '测试 01 ' 
                },
                {
                   label: '测试 01 ' 
                },
                {
                   label: '测试 01 ' 
                },
            ]

		}
	}
}
</script>
<style lang="stylus" scoped>
.index-tool{
    position absolute
    top: 93px;
    left:  50%;
    right: unset;
    transform: translateX(-50%)
    z-index 999
    width max-content
    display flex
    flex-direction row
    color:#ffffff;
    background-color:rgba(0, 61, 61, 0.8);
    border:1px solid #0d8a72;
    .visible-btn {
        display: inline-block;
        width: 14px;
        height: 47px;
        border-right: 1px solid #0d8a72;
        cursor: pointer;
        .tangle {
            display: inline-block;
            height: 0;
            width: 0;
            border-style: solid;
            border-width: 5px 5px 5px 5px;
            margin-top: 17px;
            
        }
        .left-tangle {
            margin-left: 5px;
            border-color: rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) #e2eaf3;
        }
        .right-tangle {
            // margin-left: 5px;
            border-color: rgba(0,0,0,0) #e2eaf3 rgba(0,0,0,0) rgba(0,0,0,0);
        }
    }
    .btn {
        width: 66px;
        height: 47px;
        text-align: center;
        cursor: pointer;
        img {
            margin-top: 8px;
        }
        .label {
            font-size:15px;
            transform: scale(0.8);
            letter-spacing: 1px;
            margin-top: 3px;
            text-shadow: 0px 4px 6px rgba(0,0,0,.4 );
        }
    }
}
.hidden-right-border {
    border-right: none;
    border-radius:0;
    padding-right: 0;
    left: unset;
    transform: none;
    right: 100px;
}
</style>