ionic页面footer按钮右下方的小三角实现

最新推荐文章于 2021-04-21 15:17:27 发布

aitangyong

最新推荐文章于 2021-04-21 15:17:27 发布

阅读量2.8k

点赞数

分类专栏： ionic 文章标签： popover小三角 ionic按钮右下方的小三角

本文链接：https://blog.csdn.net/aitangyong/article/details/50929691

版权

ionic 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

之前的这篇博客被问到，如何实现footer按钮右下方的小三角：

下面给出html代码和css样式：

<ion-footer-bar class="bar-footer bar-balanced">
	<div class="button-bar">
		<button class="button button-light">group1</button>
		<button class="button button-light">group2</button>
		<button class="button button-light">group3</button>
		<button class="button button-light">group4</button>
		<button class="button button-light">group5</button>
		<button class="button button-light">group6</button>
		<button class="button button-light">group7</button>
	</div>
</ion-footer-bar>

对应样式：

<style>
.bar-footer .button-bar .button, .sign-button {background-color: #fff; border-color: #b5b5b5; font-size: 16px;}
.bar-footer .button-bar > .button:first-child {border-radius:0px 0px 0px 0px; border-left:none;}
.bar-footer {padding: 0 0 0 0;}
.bar-footer .button:after {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0;
    content: ' '; 
    background: url("triangle.png") no-repeat 90% 32px;
}
</style>

这样就可以显示小三角了：