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): decrease icon size on ios and stretch segment buttons to fill height (#17751)

Browse Source 
fixes #17069
This commit is contained in:
Santosh Yadav
2019-04-25 22:16:34 +05:30
committed by Brandy Carney
parent 2457a23e95
commit 0fa645b8cc
5 changed files with 58 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,7 @@ $segment-button-ios-border-radius: 4px !default;
$segment-button-ios-border-color: ion-color(primary, base) !default; $segment-button-ios-border-color: ion-color(primary, base) !default;
/// @prop - Size of an icon in the segment button /// @prop - Size of an icon in the segment button
$segment-button-ios-icon-size: 26px !default; $segment-button-ios-icon-size: 24px !default;
/// @prop - Line height of an icon in the segment button /// @prop - Line height of an icon in the segment button
$segment-button-ios-icon-line-height: 28px !default; $segment-button-ios-icon-line-height: 28px !default;

13
core/src/components/segment-button/segment-button.scss
View File

@ -42,6 +42,8 @@
--padding-top: 0; --padding-top: 0;
--padding-bottom: 0; --padding-bottom: 0;
display: flex;
flex: 1 0 auto; flex: 1 0 auto;
flex-direction: column; flex-direction: column;
@ -86,15 +88,16 @@
position: relative; position: relative;
flex-direction: inherit; flex-direction: inherit;
flex-grow: 1;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
min-width: inherit; min-width: inherit;
max-width: inherit; max-width: inherit;
height: auto;
height: auto;
min-height: inherit; min-height: inherit;
max-height: inherit; max-height: inherit;
@ -192,17 +195,17 @@
// -------------------------------------------------- // --------------------------------------------------
// Layout: icon start // Layout: icon start
:host(.segment-button-layout-icon-start) { :host(.segment-button-layout-icon-start) .button-native {
flex-direction: row; flex-direction: row;
} }
// Layout: icon end // Layout: icon end
:host(.segment-button-layout-icon-end) { :host(.segment-button-layout-icon-end) .button-native {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
// Layout: icon bottom // Layout: icon bottom
:host(.segment-button-layout-icon-bottom) { :host(.segment-button-layout-icon-bottom) .button-native {
flex-direction: column-reverse; flex-direction: column-reverse;
} }

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

@ -12,7 +12,7 @@
display: flex; display: flex;
align-items: center; align-items: stretch;
justify-content: center; justify-content: center;
width: 100%; width: 100%;

15
core/src/components/segment/test/basic/index.html
View File

@ -110,6 +110,21 @@
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-segment>
<ion-segment-button value="330">
<ion-label>330ml</ion-label>
</ion-segment-button>
<ion-segment-button value="440">
<ion-label>440ml</ion-label>
</ion-segment-button>
<ion-segment-button value="500">
<ion-label>500ml</ion-label>
</ion-segment-button>
<ion-segment-button value="custom">
<ion-icon name="create"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-segment name="dynamicPropDisable" disabled color="danger"> <ion-segment name="dynamicPropDisable" disabled color="danger">
<ion-segment-button value="Bookmarks"> <ion-segment-button value="Bookmarks">
<ion-label>Bookmarks</ion-label> <ion-label>Bookmarks</ion-label>

35
core/src/components/segment/test/standalone/index.html
View File

@ -90,6 +90,33 @@
<ion-icon name="logo-slack"></ion-icon> <ion-icon name="logo-slack"></ion-icon>
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-segment value="2" class="custom-indicator">
<ion-segment-button value="1">
<ion-icon name="home"></ion-icon>
</ion-segment-button>
<ion-segment-button class="large-icon" value="2">
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button value="3">
<ion-icon name="person"></ion-icon>
</ion-segment-button>
</ion-segment>
<ion-segment value="2" class="custom-indicator">
<ion-segment-button layout="icon-start" value="1">
<ion-icon name="home"></ion-icon>
<ion-label>Home</ion-label>
</ion-segment-button>
<ion-segment-button layout="icon-start" class="large-icon" value="2">
<ion-icon name="call"></ion-icon>
<ion-label>Call</ion-label>
</ion-segment-button>
<ion-segment-button layout="icon-start" value="3">
<ion-icon name="person"></ion-icon>
<ion-label>Person</ion-label>
</ion-segment-button>
</ion-segment>
</body> </body>
<script> <script>
@ -180,10 +207,14 @@
--color-checked: #3aaf85; --color-checked: #3aaf85;
} }
.custom-icon ion-icon { .custom-indicator {
font-size: 44px; --indicator-color: lightgray;
} }
.custom-icon ion-icon,
.large-icon ion-icon {
font-size: 44px;
}
</style> </style>
</html> </html>