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): 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/segment.scss
View File

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

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

@ -110,6 +110,21 @@
</ion-segment-button>
</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-button value="Bookmarks">
<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-segment-button>
</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>
<script>
@ -180,10 +207,14 @@
--color-checked: #3aaf85;
}
.custom-icon ion-icon {
font-size: 44px;
.custom-indicator {
--indicator-color: lightgray;
}
.custom-icon ion-icon,
.large-icon ion-icon {
font-size: 44px;
}
</style>
</html>