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): inner div no longer interferes with click events (#20522)

Browse Source 
fixes #20381
This commit is contained in:
Liam DeBeasi
2020-02-19 09:40:10 -05:00
committed by GitHub
parent 3252c2f8dc
commit 06b828b4ff
2 changed files with 33 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -72,6 +72,8 @@
white-space: nowrap; white-space: nowrap;
font-kerning: none; font-kerning: none;
cursor: pointer;
} }
.button-native { .button-native {
@ -107,7 +109,7 @@
background: transparent; background: transparent;
contain: content; contain: content;
cursor: pointer; pointer-events: none;
overflow: hidden; overflow: hidden;

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

@ -164,6 +164,18 @@
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>
<ion-segment>
<ion-segment-button value="active">
<div class="square red"></div>
</ion-segment-button>
<ion-segment-button name="dynamicAttrDisable">
<div class="square green"></div>
</ion-segment-button>
<ion-segment-button value="inactive">
<div class="square blue"></div>
</ion-segment-button>
</ion-segment>
<!-- Dynamic Buttons --> <!-- Dynamic Buttons -->
<ion-segment id="dynamicButtons"></ion-segment> <ion-segment id="dynamicButtons"></ion-segment>
</div> </div>
@ -236,6 +248,24 @@
</ion-content> </ion-content>
<style> <style>
.square {
width: 20px;
height: 20px;
background: black;
}
.square.red {
background: red;
}
.square.green {
background: green;
}
.square.blue {
background: blue;
}
ion-content ion-segment { ion-content ion-segment {
margin-bottom: 10px; margin-bottom: 10px;
} }