mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
4053f386fd
Reviews the `--width` and `--height` variables in each component to either remove or add them based on need. - fixes a bug where the spinner color wasn't being set properly in loading - adds css variables for customizing background, color, some borders in overlays - fixes a bug where prefix, suffix are taking up too much width in picker closes #16097 references ionic-team/ionic-docs#228 BREAKING CHANGES ## Core Components Removes the `--width` and `--height` variables from the following components, in favor of CSS: - Button - FAB Button - Checkbox - Removes the `--width`/`--height` and adds a `--size` variable that is set on the width and height, allowing width and height to still be set and border-radius to still use it as a variable - Radio - Removes the `--width`/`--height` and `--inner-width`/`--inner-height` variables. Calculates inner values based on parent element size. ## Overlay Components The following components have all be converted to shadow (or scoped) and have CSS variables for width/height: - Action Sheet _(scoped)_ - Alert _(scoped)_ - Loading _(scoped)_ - Menu _(shadow)_ - Modal _(scoped)_ - Picker _(scoped)_ - Popover _(scoped)_ - Toast _(shadow)_ The above components will now have the following CSS variables for consistency among overlays: | Name | | ----------------- | | `--height` | | `--max-height` | | `--max-width` | | `--min-height` | | `--min-width` | | `--width` | If the component does not set the value, it will default to `auto`. ## Removed CSS Variables The following CSS properties have been removed: | Component | Property | Reason | | ---------------| --------------------| --------------------------------| | **Button** | `--height` | Use CSS instead | | **Button** | `--margin-bottom` | Use CSS instead | | **Button** | `--margin-end` | Use CSS instead | | **Button** | `--margin-start` | Use CSS instead | | **Button** | `--margin-top` | Use CSS instead | | **Button** | `--width` | Use CSS instead | | **Checkbox** | `--height` | Use CSS or `--size` | | **Checkbox** | `--width` | Use CSS or `--size` | | **FAB Button** | `--width` | Use CSS instead | | **FAB Button** | `--height` | Use CSS instead | | **FAB Button** | `--margin-bottom` | Use CSS instead | | **FAB Button** | `--margin-end` | Use CSS instead | | **FAB Button** | `--margin-start` | Use CSS instead | | **FAB Button** | `--margin-top | Use CSS instead | | **Menu** | `--width-small` | Use a media query and `--width` | | **Radio** | `--width` | Use CSS instead | | **Radio** | `--height` | Use CSS instead | | **Radio** | `--inner-height` | Calculated based on parent | | **Radio** | `--inner-width` | Calculated based on parent |
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.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
animated |
animated |
If true, the picker will animate. |
boolean |
true |
backdropDismiss |
backdrop-dismiss |
If true, the picker will be dismissed when the backdrop is clicked. |
boolean |
true |
buttons |
-- | Array of buttons to be displayed at the top of the picker. | PickerButton[] |
[] |
columns |
-- | Array of columns to be displayed in the picker. | PickerColumn[] |
[] |
cssClass |
css-class |
Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. | string | string[] | undefined |
undefined |
duration |
duration |
Number of milliseconds to wait before dismissing the picker. | number |
0 |
enterAnimation |
-- | Animation to use when the picker is presented. | ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined |
undefined |
keyboardClose |
keyboard-close |
If true, the keyboard will be automatically dismissed when the overlay is presented. |
boolean |
true |
leaveAnimation |
-- | Animation to use when the picker is dismissed. | ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined |
undefined |
mode |
mode |
The mode determines which platform styles to use. | "ios" | "md" |
undefined |
showBackdrop |
show-backdrop |
If true, a backdrop will be displayed behind the picker. |
boolean |
true |
Events
| Event | Description | Detail |
|---|---|---|
ionPickerDidDismiss |
Emitted after the picker has dismissed. | OverlayEventDetail |
ionPickerDidLoad |
Emitted after the picker has loaded. | void |
ionPickerDidPresent |
Emitted after the picker has presented. | void |
ionPickerDidUnload |
Emitted after the picker has unloaded. | void |
ionPickerWillDismiss |
Emitted before the picker has dismissed. | OverlayEventDetail |
ionPickerWillPresent |
Emitted before the picker has presented. | void |
Methods
dismiss(data?: any, role?: string | undefined) => Promise<boolean>
Dismiss the picker overlay after it has been presented.
Parameters
| Name | Type | Description |
|---|---|---|
data |
any |
|
role |
string | undefined |
Returns
Type: Promise<boolean>
getColumn(name: string) => Promise<PickerColumn | undefined>
Returns the column the matches the specified name
Parameters
| Name | Type | Description |
|---|---|---|
name |
string |
Returns
Type: Promise<PickerColumn | undefined>
onDidDismiss() => Promise<OverlayEventDetail<any>>
Returns a promise that resolves when the picker did dismiss.
Returns
Type: Promise<OverlayEventDetail<any>>
onWillDismiss() => Promise<OverlayEventDetail<any>>
Returns a promise that resolves when the picker will dismiss.
Returns
Type: Promise<OverlayEventDetail<any>>
present() => Promise<void>
Present the picker overlay after it has been created.
Returns
Type: Promise<void>
CSS Custom Properties
| 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 |
Built with StencilJS