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

feat(checkbox, radio, toggle, range): stacked labels for form controls (#28075)

Browse Source 
Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>
This commit is contained in:
Maria Hutt
2023-09-01 09:30:59 -07:00
committed by GitHub
parent cbafa6b40d
commit e6c7bb60e7
148 changed files with 604 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/toggle/toggle.tsx
View File

@ -90,8 +90,9 @@ export class Toggle implements ComponentInterface {
* `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL.
* `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL.
* `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("...").
* `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
*/
@Prop() labelPlacement: 'start' | 'end' | 'fixed' = 'start';
@Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start';
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup.
@ -115,6 +116,13 @@ export class Toggle implements ComponentInterface {
*/
@Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
/**
* How to control the alignment of the toggle and label on the cross axis.
* ``"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL.
* `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
*/
@Prop() alignment: 'start' | 'center' = 'center';
/**
* Emitted when the user switches the toggle on or off. Does not emit
* when programmatically changing the value of the `checked` property.
@ -319,7 +327,7 @@ export class Toggle implements ComponentInterface {
}
private renderToggle() {
const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name } = this;
const { activated, color, checked, disabled, el, justify, labelPlacement, inputId, name, alignment } = this;
const mode = getIonMode(this);
const value = this.getValue();
@ -336,6 +344,7 @@ export class Toggle implements ComponentInterface {
'toggle-checked': checked,
'toggle-disabled': disabled,
[`toggle-justify-${justify}`]: true,
[`toggle-alignment-${alignment}`]: true,
[`toggle-label-placement-${labelPlacement}`]: true,
[`toggle-${rtl}`]: true,
})}