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

fix(segment-button): allow min-width to be overridden (#21722)

Browse Source 
fixes #21105
This commit is contained in:
Liam DeBeasi
2020-07-14 10:58:40 -04:00
committed by GitHub
parent 020f3cc56c
commit 88f1828bd8
2 changed files with 38 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -159,6 +159,40 @@
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<!-- Non Scrollable, Custom Min Width -->
<ion-segment color="tertiary" value="heart" id="min-width-custom">
<ion-segment-button value="home">
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button value="heart">
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button value="pin">
<ion-icon name="pin"></ion-icon>
</ion-segment-button>
<ion-segment-button value="star">
<ion-icon name="star"></ion-icon>
</ion-segment-button>
<ion-segment-button value="call">
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="globe">
<ion-icon name="globe"></ion-icon>
</ion-segment-button>
<ion-segment-button value="basket">
<ion-icon name="basket"></ion-icon>
</ion-segment-button>
<ion-segment-button value="airplane">
<ion-icon name="airplane"></ion-icon>
</ion-segment-button>
<ion-segment-button value="boat">
<ion-icon name="boat"></ion-icon>
</ion-segment-button>
<ion-segment-button value="baseball">
<ion-icon name="baseball"></ion-icon>
</ion-segment-button>
</ion-segment>
<!-- Scrollable Icons --> <!-- Scrollable Icons -->
<ion-segment scrollable color="tertiary" value="heart"> <ion-segment scrollable color="tertiary" value="heart">
<ion-segment-button value="home"> <ion-segment-button value="home">
@ -212,6 +246,10 @@
</ion-content> </ion-content>
<style> <style>
ion-segment#min-width-custom ion-segment-button {
min-width: auto;
}
ion-content { ion-content {
--padding-top: 16px; --padding-top: 16px;
} }