javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): automatically expand width for scrollable segment buttons (#20763)

Browse Source 
fixes #20566
This commit is contained in:
Liam DeBeasi
2020-03-18 16:14:06 -04:00
committed by Liam DeBeasi
parent 7bc51911f6
commit cdfd50b554
3 changed files with 32 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
core/src/components/segment-button/segment-button.md.scss
View File

@ -44,6 +44,10 @@
text-transform: uppercase; text-transform: uppercase;
} }
.button-native {
min-width: $segment-button-md-min-width;
}
// Segment Button: Disabled // Segment Button: Disabled
// -------------------------------------------------- // --------------------------------------------------

2
core/src/components/segment/segment.md.scss
View File

@ -13,5 +13,5 @@
// -------------------------------------------------- // --------------------------------------------------
:host(.segment-scrollable) ::slotted(ion-segment-button) { :host(.segment-scrollable) ::slotted(ion-segment-button) {
min-width: $segment-button-md-min-width; min-width: auto;
} }

29
core/src/components/segment/test/spec/index.html
View File

@ -45,7 +45,7 @@
<ion-segment-button value="two"> <ion-segment-button value="two">
<ion-label>Item Two</ion-label> <ion-label>Item Two</ion-label>
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="three"> <ion-segment-button value="three">
<ion-label>Item Three</ion-label> <ion-label>Item Three</ion-label>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
@ -184,6 +184,31 @@
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<!-- Scrollable text -->
<ion-segment scrollable color="tertiary" value="heart">
<ion-segment-button value="home">
This is some long text
</ion-segment-button>
<ion-segment-button value="heart">
Short text
</ion-segment-button>
<ion-segment-button value="pin">
This is some long text
</ion-segment-button>
<ion-segment-button value="star">
Short text
</ion-segment-button>
<ion-segment-button value="call">
Short text
</ion-segment-button>
<ion-segment-button value="globe">
Medium long text
</ion-segment-button>
<ion-segment-button value="basket">
Medium long text
</ion-segment-button>
</ion-segment>
</ion-content> </ion-content>
<style> <style>
@ -202,7 +227,7 @@
.md ion-content ion-segment { .md ion-content ion-segment {
background: white; background: white;
} }
#multi-color ion-segment-button:first-of-type { #multi-color ion-segment-button:first-of-type {
--indicator-color: rgba(255, 0, 0, 0.5); --indicator-color: rgba(255, 0, 0, 0.5);
} }