javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): get segment button working with no values

Browse Source
This commit is contained in:
Brandy Carney
2018-02-06 10:15:28 -05:00
parent 3c82b1f639
commit 1c9cf53f09
4 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,11 +1,11 @@
# ion-segment-button # ion-segment-button
The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value. Segment buttons are a group of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. Only one segment button can be selected at a time.
```html ```html
<ion-content> <ion-content>
<!-- Segment buttons with icons --> <!-- Segment buttons with icons -->
<ion-segment [(ngModel)]="icons" color="secondary"> <ion-segment>
<ion-segment-button value="camera"> <ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon> <ion-icon name="camera"></ion-icon>
</ion-segment-button> </ion-segment-button>
@ -15,11 +15,11 @@ The child buttons of the `ion-segment` component. Each `ion-segment-button` must
</ion-segment> </ion-segment>
<!-- Segment buttons with text --> <!-- Segment buttons with text -->
<ion-segment [(ngModel)]="relationship" color="primary"> <ion-segment>
<ion-segment-button value="friends" (ionSelect)="selectedFriends()"> <ion-segment-button value="friends">
Friends Friends
</ion-segment-button> </ion-segment-button>
<ion-segment-button value="enemies" (ionSelect)="selectedEnemies()"> <ion-segment-button value="enemies">
Enemies Enemies
</ion-segment-button> </ion-segment-button>
</ion-segment> </ion-segment>

29
packages/core/src/components/segment-button/segment-button.tsx
View File

@ -1,6 +1,7 @@
import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core'; import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { createThemedClasses, getElementClassMap } from '../../utils/theme'; import { createThemedClasses, getElementClassMap } from '../../utils/theme';
let ids = 0;
@Component({ @Component({
tag: 'ion-segment-button' tag: 'ion-segment-button'
@ -10,11 +11,6 @@ export class SegmentButton {
@Element() private el: HTMLElement; @Element() private el: HTMLElement;
/**
* Emitted when the segment button is clicked.
*/
@Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
@Prop({ mutable: true }) activated = false; @Prop({ mutable: true }) activated = false;
/** /**
@ -32,12 +28,12 @@ export class SegmentButton {
/** /**
* If true, the segment button is selected. Defaults to `false`. * If true, the segment button is selected. Defaults to `false`.
*/ */
@Prop({ mutable: true }) checked = false; @Prop() checked = false;
/* /*
* If true, the user cannot interact with the segment button. Default false. * If true, the user cannot interact with the segment button. Default false.
*/ */
@Prop({ mutable: true }) disabled = false; @Prop() disabled = false;
/** /**
* Contains a URL or a URL fragment that the hyperlink points to. * Contains a URL or a URL fragment that the hyperlink points to.
@ -50,6 +46,17 @@ export class SegmentButton {
*/ */
@Prop({ mutable: true }) value: string; @Prop({ mutable: true }) value: string;
/**
* Emitted when the segment button is clicked.
*/
@Event() ionClick: EventEmitter;
componentWillLoad() {
if (!this.value) {
this.value = `ion-sb-${ids++}`;
}
}
/** /**
* Emit the click event to the parent segment * Emit the click event to the parent segment
*/ */
@ -87,11 +94,3 @@ export class SegmentButton {
]; ];
} }
} }
export interface SegmentButtonEvent extends CustomEvent {
detail: SegmentButtonEventDetail;
}
export interface SegmentButtonEventDetail {
}

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

@ -44,6 +44,18 @@
</ion-toolbar> </ion-toolbar>
<div padding> <div padding>
<ion-segment>
<ion-segment-button>Seg 1</ion-segment-button>
<ion-segment-button>Seg 2</ion-segment-button>
<ion-segment-button>Seg 3</ion-segment-button>
</ion-segment>
<ion-segment disabled>
<ion-segment-button>Seg 2 1</ion-segment-button>
<ion-segment-button checked>Seg 2 2</ion-segment-button>
<ion-segment-button>Seg 2 3</ion-segment-button>
</ion-segment>
<ion-segment color="dark" value="Reading List"> <ion-segment color="dark" value="Reading List">
<ion-segment-button value="Bookmarks"> <ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon> <ion-icon name="book"></ion-icon>

2
packages/core/src/index.d.ts vendored
View File

@ -89,7 +89,7 @@ export { Reorder } from './components/reorder/reorder';
export { Scroll, ScrollCallback, ScrollDetail } from './components/scroll/scroll'; export { Scroll, ScrollCallback, ScrollDetail } from './components/scroll/scroll';
export { Searchbar } from './components/searchbar/searchbar'; export { Searchbar } from './components/searchbar/searchbar';
export { Segment } from './components/segment/segment'; export { Segment } from './components/segment/segment';
export { SegmentButton, SegmentButtonEvent } from './components/segment-button/segment-button'; export { SegmentButton } from './components/segment-button/segment-button';
export { SelectPopoverOption, SelectPopover } from './components/select-popover/select-popover'; export { SelectPopoverOption, SelectPopover } from './components/select-popover/select-popover';
export { Select } from './components/select/select'; export { Select } from './components/select/select';
export { SelectOption } from './components/select-option/select-option'; export { SelectOption } from './components/select-option/select-option';