javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment-button): make layout default to icon-top (#16573)

Browse Source 
- updates segment button so that when layout is not provided the following will happen
  - if both label and icon are there, it will apply icon-top
  - if only label or only icon, it will style as such
This commit is contained in:
Brandy Carney
2018-12-03 16:57:12 -05:00
committed by GitHub
parent 2ce986f39f
commit 841375e5c8
6 changed files with 47 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
core/src/components/segment-button/segment-button.tsx
View File

@ -42,7 +42,7 @@ export class SegmentButton implements ComponentInterface {
/**
* Set the layout of the text and icon in the segment.
*/
@Prop() layout?: SegmentButtonLayout;
@Prop() layout?: SegmentButtonLayout = 'icon-top';
/**
* The value of the segment button.
@ -65,17 +65,28 @@ export class SegmentButton implements ComponentInterface {
this.checked = true;
}
private get hasLabel() {
return !!this.el.querySelector('ion-label');
}
private get hasIcon() {
return !!this.el.querySelector('ion-icon');
}
hostData() {
const { disabled, checked, color } = this;
const { disabled, checked, color, layout, hasIcon, hasLabel } = this;
return {
'ion-activatable': 'instant',
'aria-disabled': this.disabled ? 'true' : null,
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(color),
'segment-button-has-label': hasLabel,
'segment-button-has-icon': hasIcon,
'segment-button-has-label-only': hasLabel && !hasIcon,
'segment-button-has-icon-only': hasIcon && !hasLabel,
'segment-button-disabled': disabled,
'segment-button-checked': checked,
[`segment-button-layout-${this.layout}`]: this.layout !== undefined
[`segment-button-layout-${layout}`]: true
}
};
}