javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-17 18:54:11 +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

12
core/src/components/checkbox/checkbox.tsx
View File

@ -81,8 +81,9 @@ export class Checkbox implements ComponentInterface {
* `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL.
* `"end"`: The label will appear to the right of the checkbox 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 checkbox 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';
/**
* How to pack the label and checkbox within a line.
@ -95,6 +96,13 @@ export class Checkbox implements ComponentInterface {
*/
@Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
/**
* How to control the alignment of the checkbox 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';
// TODO(FW-3100): remove this
/**
* Set the `legacy` property to `true` to forcibly use the legacy form control markup.
@ -224,6 +232,7 @@ export class Checkbox implements ComponentInterface {
labelPlacement,
name,
value,
alignment,
} = this;
const mode = getIonMode(this);
const path = getSVGPath(mode, indeterminate);
@ -240,6 +249,7 @@ export class Checkbox implements ComponentInterface {
'checkbox-indeterminate': indeterminate,
interactive: true,
[`checkbox-justify-${justify}`]: true,
[`checkbox-alignment-${alignment}`]: true,
[`checkbox-label-placement-${labelPlacement}`]: true,
})}
>