mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
docs(picker): add some basic documentation for picker
This commit is contained in:
Brandy Carney
@ -31,8 +31,63 @@ export class Picker {
|
||||
private durationTimeout: any;
|
||||
private mode: string;
|
||||
|
||||
pickerId: number;
|
||||
|
||||
@Element() private el: HTMLElement;
|
||||
|
||||
@State() private showSpinner: boolean = null;
|
||||
@State() private spinner: string;
|
||||
|
||||
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop({ context: 'dom' }) dom: DomController;
|
||||
|
||||
/**
|
||||
* Animation to use when the picker is presented.
|
||||
*/
|
||||
@Prop() enterAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Animation to use when the picker is dismissed.
|
||||
*/
|
||||
@Prop() leaveAnimation: AnimationBuilder;
|
||||
|
||||
/**
|
||||
* Array of buttons to be displayed at the top of the picker.
|
||||
*/
|
||||
@Prop() buttons: PickerButton[] = [];
|
||||
|
||||
/**
|
||||
* Array of columns to be displayed in the picker.
|
||||
*/
|
||||
@Prop() columns: PickerColumn[] = [];
|
||||
|
||||
/**
|
||||
* Additional classes to apply for custom CSS. If multiple classes are
|
||||
* provided they should be separated by spaces.
|
||||
*/
|
||||
@Prop() cssClass: string;
|
||||
|
||||
/**
|
||||
* Number of milliseconds to wait before dismissing the picker.
|
||||
*/
|
||||
@Prop() duration: number;
|
||||
|
||||
/**
|
||||
* If true, a backdrop will be displayed behind the picker. Defaults to `true`.
|
||||
*/
|
||||
@Prop() showBackdrop = true;
|
||||
|
||||
/**
|
||||
* If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
*/
|
||||
@Prop() enableBackdropDismiss = true;
|
||||
|
||||
/**
|
||||
* If true, the picker will animate. Defaults to `true`.
|
||||
*/
|
||||
@Prop() willAnimate = true;
|
||||
|
||||
/**
|
||||
* Emitted after the picker has loaded.
|
||||
*/
|
||||
@ -63,27 +118,9 @@ export class Picker {
|
||||
*/
|
||||
@Event() ionPickerDidUnload: EventEmitter<PickerEventDetail>;
|
||||
|
||||
@State() private showSpinner: boolean = null;
|
||||
@State() private spinner: string;
|
||||
|
||||
@Prop({ connect: 'ion-animation-controller' }) animationCtrl: AnimationController;
|
||||
@Prop({ context: 'config' }) config: Config;
|
||||
@Prop({ context: 'dom' }) dom: DomController;
|
||||
|
||||
@Prop() cssClass: string;
|
||||
@Prop() content: string;
|
||||
@Prop() dismissOnPageChange = false;
|
||||
@Prop() duration: number;
|
||||
@Prop() enterAnimation: AnimationBuilder;
|
||||
@Prop() leaveAnimation: AnimationBuilder;
|
||||
@Prop() pickerId: number;
|
||||
@Prop() showBackdrop = true;
|
||||
@Prop() enableBackdropDismiss = true;
|
||||
@Prop() willAnimate = true;
|
||||
|
||||
@Prop() buttons: PickerButton[] = [];
|
||||
@Prop() columns: PickerColumn[] = [];
|
||||
|
||||
/**
|
||||
* Present the picker overlay after it has been created.
|
||||
*/
|
||||
@Method()
|
||||
present() {
|
||||
if (this.animation) {
|
||||
@ -113,6 +150,9 @@ export class Picker {
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Dismiss the picker overlay after it has been presented.
|
||||
*/
|
||||
@Method()
|
||||
dismiss(data?: any, role?: string) {
|
||||
clearTimeout(this.durationTimeout);
|
||||
@ -223,17 +263,11 @@ export class Picker {
|
||||
return selected;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} button Picker toolbar button
|
||||
*/
|
||||
@Method()
|
||||
addButton(button: any) {
|
||||
this.buttons.push(button);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PickerColumn} column Picker toolbar button
|
||||
*/
|
||||
@Method()
|
||||
addColumn(column: PickerColumn) {
|
||||
this.columns.push(column);
|
||||
@ -307,31 +341,13 @@ export class Picker {
|
||||
// return column;
|
||||
// });
|
||||
|
||||
// RENDER TODO
|
||||
// <ion-backdrop (click)="bdClick()"></ion-backdrop>
|
||||
// <div class="picker-wrapper">
|
||||
// <div class="picker-toolbar">
|
||||
// <div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">
|
||||
// <ion-button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
|
||||
// {{b.text}}
|
||||
// </ion-button>
|
||||
// </div>
|
||||
// </div>
|
||||
// <div class="picker-columns">
|
||||
// <div class="picker-above-highlight"></div>
|
||||
// <div *ngFor="let c of d.columns" [col]="c" class="picker-col" (ionChange)="_colChange($event)"></div>
|
||||
// <div class="picker-below-highlight"></div>
|
||||
// </div>
|
||||
// </div>
|
||||
|
||||
return [
|
||||
<ion-backdrop
|
||||
onClick={this.backdropClick.bind(this)}
|
||||
class={{
|
||||
'picker-backdrop': true,
|
||||
'hide-backdrop': !this.showBackdrop
|
||||
}}
|
||||
/>,
|
||||
}}></ion-backdrop>,
|
||||
<div class='picker-wrapper' role='dialog'>
|
||||
<div class='picker-toolbar'>
|
||||
{buttons.map(b =>
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
# ion-picker
|
||||
|
||||
A Picker is a dialog that displays a row of buttons and columns underneath. It appears on top of the app's content, and at the bottom of the viewport.
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
@ -11,61 +13,65 @@
|
||||
|
||||
|
||||
|
||||
Array of buttons to be displayed at the top of the picker.
|
||||
|
||||
|
||||
#### columns
|
||||
|
||||
|
||||
|
||||
|
||||
#### content
|
||||
|
||||
string
|
||||
Array of columns to be displayed in the picker.
|
||||
|
||||
|
||||
#### cssClass
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### dismissOnPageChange
|
||||
|
||||
boolean
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
Number of milliseconds to wait before dismissing the picker.
|
||||
|
||||
|
||||
#### enableBackdropDismiss
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
|
||||
|
||||
#### enterAnimation
|
||||
|
||||
|
||||
|
||||
Animation to use when the picker is presented.
|
||||
|
||||
|
||||
#### leaveAnimation
|
||||
|
||||
|
||||
|
||||
|
||||
#### pickerId
|
||||
|
||||
number
|
||||
Animation to use when the picker is dismissed.
|
||||
|
||||
|
||||
#### showBackdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the picker. Defaults to `true`.
|
||||
|
||||
|
||||
#### willAnimate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
@ -73,61 +79,65 @@ boolean
|
||||
|
||||
|
||||
|
||||
Array of buttons to be displayed at the top of the picker.
|
||||
|
||||
|
||||
#### columns
|
||||
|
||||
|
||||
|
||||
|
||||
#### content
|
||||
|
||||
string
|
||||
Array of columns to be displayed in the picker.
|
||||
|
||||
|
||||
#### css-class
|
||||
|
||||
string
|
||||
|
||||
|
||||
#### dismiss-on-page-change
|
||||
|
||||
boolean
|
||||
Additional classes to apply for custom CSS. If multiple classes are
|
||||
provided they should be separated by spaces.
|
||||
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
Number of milliseconds to wait before dismissing the picker.
|
||||
|
||||
|
||||
#### enable-backdrop-dismiss
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will be dismissed when the backdrop is clicked. Defaults to `true`.
|
||||
|
||||
|
||||
#### enter-animation
|
||||
|
||||
|
||||
|
||||
Animation to use when the picker is presented.
|
||||
|
||||
|
||||
#### leave-animation
|
||||
|
||||
|
||||
|
||||
|
||||
#### picker-id
|
||||
|
||||
number
|
||||
Animation to use when the picker is dismissed.
|
||||
|
||||
|
||||
#### show-backdrop
|
||||
|
||||
boolean
|
||||
|
||||
If true, a backdrop will be displayed behind the picker. Defaults to `true`.
|
||||
|
||||
|
||||
#### will-animate
|
||||
|
||||
boolean
|
||||
|
||||
If true, the picker will animate. Defaults to `true`.
|
||||
|
||||
|
||||
## Events
|
||||
|
||||
@ -171,6 +181,8 @@ Emitted before the picker has presented.
|
||||
|
||||
#### dismiss()
|
||||
|
||||
Dismiss the picker overlay after it has been presented.
|
||||
|
||||
|
||||
#### getColumn()
|
||||
|
||||
@ -180,6 +192,8 @@ Emitted before the picker has presented.
|
||||
|
||||
#### present()
|
||||
|
||||
Present the picker overlay after it has been created.
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
Reference in New Issue
Block a user