Question

Ionic4 项目中我们可以使用 Ionic4 日期组件 ion-picker 对项目进行布局。

ion-picker 官方文档地址：https://ionicframework.com/docs/api/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.

ion-picker 属性 Properties

animated
Description	If true , the picker will animate.
Attribute	animated
Type	boolean
Default	true
backdropDismiss
Description	If true , the picker will be dismissed when the backdrop is clicked.
Attribute	backdrop-dismiss
Type	boolean
Default	true
buttons
Description	Array of buttons to be displayed at the top of the picker.
Type	PickerButton[]
Default	[]
columns
Description	Array of columns to be displayed in the picker.
Type	PickerColumn[]
Default	[]
cssClass
Description	Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces.
Attribute	css-class
Type	string | string[] | undefined
duration
Description	Number of milliseconds to wait before dismissing the picker.
Attribute	duration
Type	number
Default	0
enterAnimation
Description	Animation to use when the picker is presented.
Type	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
keyboardClose
Description	If true , the keyboard will be automatically dismissed when the overlay is presented.
Attribute	keyboard-close
Type	boolean
Default	true
leaveAnimation
Description	Animation to use when the picker is dismissed.
Type	((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined
mode
Description	The mode determines which platform styles to use.
Attribute	mode
Type	"ios" | "md"
showBackdrop
Description	If true , a backdrop will be displayed behind the picker.
Attribute	show-backdrop
Type	boolean
Default	true

ion-picker 事件 Events

Name	Description
ionPickerDidDismiss	Emitted after the picker has dismissed.
ionPickerDidPresent	Emitted after the picker has presented.
ionPickerWillDismiss	Emitted before the picker has dismissed.
ionPickerWillPresent	Emitted before the picker has presented.

ion-picker 内置方法 Methods

dismiss
Description	Dismiss the picker overlay after it has been presented.
Signature	dismiss(data?: any, role?: string | undefined) => Promise<boolean>
getColumn
Description	Get the column that matches the specified name.
Signature	getColumn(name: string) => Promise<PickerColumn | undefined>
onDidDismiss
Description	Returns a promise that resolves when the picker did dismiss.
Signature	onDidDismiss() => Promise<OverlayEventDetail<any>>
onWillDismiss
Description	Returns a promise that resolves when the picker will dismiss.
Signature	onWillDismiss() => Promise<OverlayEventDetail<any>>
present
Description	Present the picker overlay after it has been created.
Signature	present() => Promise<void>

ion-picker 中的 CSS 自定义属性

Name	Description
--background	Background of the picker
--background-rgb	Background of the picker in rgb format
--border-color	Border color of the picker
--border-radius	Border radius of the picker
--border-style	Border style of the picker
--border-width	Border width of the picker
--height	Height of the picker
--max-height	Maximum height of the picker
--max-width	Maximum width of the picker
--min-height	Minimum height of the picker
--min-width	Minimum width of the picker
--width	Width of the picker