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): 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 GitHub
parent de28bd3b79
commit f86c82639f
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;
}
.button-native {
min-width: $segment-button-md-min-width;
}
// Segment Button: Disabled
// --------------------------------------------------

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

@ -13,5 +13,5 @@
// --------------------------------------------------
: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-label>Item Two</ion-label>
</ion-segment-button>
<ion-segment-button value="three">
<ion-segment-button value="three">
<ion-label>Item Three</ion-label>
</ion-segment-button>
</ion-segment>
@ -184,6 +184,31 @@
</ion-segment-button>
</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>
<style>
@ -202,7 +227,7 @@
.md ion-content ion-segment {
background: white;
}
#multi-color ion-segment-button:first-of-type {
--indicator-color: rgba(255, 0, 0, 0.5);
}