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

feat(segment): adds scrollable and layout props and updates to follow the spec (#16273)

Browse Source 
Adds the ability to apply a layout to the segment button in order to better match the Material Design spec, updates the design and UI to match the spec more, and separates the segment button styles back into the proper directory.

- moves the segment button css back into segment-button directory
- updates the design to match the MD spec better
- adds layout property to match MD spec
- adds custom properties for better styling
- allows for overscroll / scrolling tabs via scrollable attribute
- changes the indicator to a div - will need to animate it
- updates e2e tests and add spec test

fixes #16232 fixes #16081
references #14853

BREAKING CHANGES

Segment Button now requires the text to be wrapped in an `ion-label` element for improved styling.

*Old usage:*

 ```html
<ion-segment-button>
  Item One
</ion-segment-button>
```
 *New usage:*

 ```html
<ion-segment-button>
  <ion-label>Item One</ion-label>
</ion-segment-button>
```

Note: this will not technically break your app, but the styles may look wrong.
This commit is contained in:
Brandy Carney
2018-11-15 12:22:35 -05:00
committed by GitHub
parent 6d5944613a
commit 256745cd1e
36 changed files with 1699 additions and 632 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
angular/src/directives/proxies.ts
View File

@ -685,27 +685,28 @@ export class Searchbar {
}
export declare interface Segment extends StencilComponents<'IonSegment'> {}
@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'value'] })
@Component({ selector: 'ion-segment', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'scrollable', 'value'] })
export class Segment {
ionChange: EventEmitter<CustomEvent>;
ionStyle: EventEmitter<CustomEvent>;
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode', 'disabled', 'value']);
proxyOutputs(this, el, ['ionChange']);
proxyInputs(this, el, ['color', 'mode', 'disabled', 'scrollable', 'value']);
proxyOutputs(this, el, ['ionChange', 'ionStyle']);
}
}
export declare interface SegmentButton extends StencilComponents<'IonSegmentButton'> {}
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'checked', 'disabled', 'value'] })
@Component({ selector: 'ion-segment-button', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'checked', 'disabled', 'layout', 'value'] })
export class SegmentButton {
ionSelect: EventEmitter<CustomEvent>;
constructor(c: ChangeDetectorRef, r: ElementRef) {
c.detach();
const el = r.nativeElement;
proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'value']);
proxyInputs(this, el, ['color', 'mode', 'checked', 'disabled', 'layout', 'value']);
proxyOutputs(this, el, ['ionSelect']);
}
}