javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): border radius applies to indicator on ios (#20541)

Browse Source 
fixes #20539
This commit is contained in:
Liam DeBeasi
2020-02-18 13:58:25 -05:00
committed by GitHub
parent e42c85d641
commit 9b5854d797
2 changed files with 8 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/segment-button/segment-button.ios.scss
View File

@ -110,7 +110,7 @@
} }
.segment-button-indicator-background { .segment-button-indicator-background {
@include border-radius($segment-button-ios-border-radius); @include border-radius(var(--border-radius));
background: var(--indicator-color); background: var(--indicator-color);
} }

8
core/src/components/segment/test/custom/index.html
View File

@ -17,7 +17,7 @@
<ion-app> <ion-app>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-segment value="Free"> <ion-segment value="Free" id="custom-radius">
<ion-segment-button value="Paid"> <ion-segment-button value="Paid">
<ion-label>Paid</ion-label> <ion-label>Paid</ion-label>
</ion-segment-button> </ion-segment-button>
@ -242,6 +242,12 @@
margin-bottom: 0; margin-bottom: 0;
} }
#custom-radius ion-segment-button {
--background: rgba(0, 0, 255, 0.1);
--background-checked: rgba(0, 0, 255, 0.3);
--border-radius: 10px;
}
/* /*
* Custom Checked Segment (Paid, Free, Top) * Custom Checked Segment (Paid, Free, Top)
* *