javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +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; 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;
} }

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

@ -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>