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-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

2
core/api.txt
View File

@ -877,7 +877,7 @@ ion-segment-button
ion-segment-button,prop,checked,boolean,false,false
ion-segment-button,prop,color,string | undefined,undefined,false
ion-segment-button,prop,disabled,boolean,false,false
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false
ion-segment-button,prop,mode,"ios" | "md",undefined,false
ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false
ion-segment-button,event,ionSelect,void,true

2
core/src/components/segment-button/readme.md
View File

@ -323,7 +323,7 @@ for (let i = 0; i < segmentButtons.length; i++) {
| `checked` | `checked` | If `true`, the segment button is selected. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |

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

@ -93,6 +93,16 @@
@include margin-horizontal(0, 8px);
}
// Layout: icon only
:host(.segment-button-has-icon-only) ::slotted(ion-icon) {
@include margin(12px, null, 12px, null);
}
// Layout: label only
:host(.segment-button-has-label-only) ::slotted(ion-label) {
@include margin(12px, null, 12px, null);
}
// Segment: Checked & Activated
// --------------------------------------------------

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

@ -149,7 +149,6 @@
// --------------------------------------------------
.segment-button-indicator {
align-self: flex-end;
width: 100%;
@ -162,6 +161,14 @@
}
// Segment Button Icon
// --------------------------------------------------
::slotted(ion-icon) {
order: -1;
}
// Segment Button Label
// --------------------------------------------------
@ -183,28 +190,19 @@
// Segment Button Layout
// --------------------------------------------------
// Layout: icon top
:host(.segment-button-layout-icon-top) ::slotted(ion-icon) {
order: -1;
}
// Layout: icon bottom
:host(.segment-button-layout-icon-bottom) ::slotted(ion-icon) {
order: 1;
}
// Layout: icon start / end
:host(.segment-button-layout-icon-start),
:host(.segment-button-layout-icon-end) {
// Layout: icon start
:host(.segment-button-layout-icon-start) {
flex-direction: row;
}
:host(.segment-button-layout-icon-start) ::slotted(ion-icon) {
order: -1;
// Layout: icon end
:host(.segment-button-layout-icon-end) {
flex-direction: row-reverse;
}
:host(.segment-button-layout-icon-end) ::slotted(ion-icon) {
order: 1;
// Layout: icon bottom
:host(.segment-button-layout-icon-bottom) {
flex-direction: column-reverse;
}
// Layout: icon hide

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
}
};
}

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

@ -64,15 +64,15 @@
<!-- Icon top -->
<ion-segment>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item One</ion-label>
<ion-icon name="call"></ion-icon>
</ion-segment-button>
<ion-segment-button checked layout="icon-top">
<ion-segment-button checked>
<ion-label>Item Two</ion-label>
<ion-icon name="heart"></ion-icon>
</ion-segment-button>
<ion-segment-button layout="icon-top">
<ion-segment-button>
<ion-label>Item Three</ion-label>
<ion-icon name="pin"></ion-icon>
</ion-segment-button>