Ionic2圆形分段按钮 [英] Ionic2 round segment-button
本文介绍了Ionic2圆形分段按钮的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
有人知道如何将segment-button的css从正方形更改为圆形吗?
does anyone know how to change the css of a segment- button from square to round ?
我尝试使用普通的 css ,但是当ionic2尝试转换按钮时,它变得很奇怪在segment-activated
上,这是一个柱塞示例
I tried using normal css but it gets wierd when ionic2 tries to transform the button on segment-activated
Here is a Plunker example
<ion-segment [(ngModel)]="date" danger>
<ion-segment-button value="1">
1
</ion-segment-button>
<ion-segment-button value="2">
2
</ion-segment-button>
<ion-segment-button value="3">
3
</ion-segment-button>
</ion-segment>
使用普通CSS,我失败了.当您选择另一个按钮时,它会变得很奇怪
With normal css I failed. and it gets weird when you select another button
推荐答案
找到了一个破解方法. NB :这是一个hack,样式不适合这样做.
Found a hack to do it. NB this is a hack and the style is not intend for this.
Css解决方案:将其放置在您的.scss
文件中
Css solution: place this in your .scss
file
ion-segment-button{
//max-width: 25px;
border-style: solid;
}
.segment-button {
border-style: none;
border-color: #e62100;
color: #e62100;
border-width: thin;
}
.segment-button:first-of-type {
border-radius: 90px 90px 90px 90px;
// margin-right: 0px;
margin-left: 0px;
line-height: 3.4rem;
height: 100%;
width: 100%}
.segment-button:not(:first-of-type) {
border-radius: 90px 90px 90px 90px;
// margin-right: 0px;
margin-left: 20px;
line-height: 3.4rem;
height: 100%;
width: 100%;}
.segment-button:last-of-type {
border-radius: 90px 90px 90px 90px;
margin-right: 0px;
margin-left: 20px;
line-height: 3.4rem;
height: 100%;
width: 100%;}
.segment-activated{
background-color: #e62100;
color: #ffffff;
}
这篇关于Ionic2圆形分段按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文