Skip to content

Commit 56a8060

Browse files
thetaPCbrandyscarney
thetaPC
and
brandyscarney
authored
feat(checkbox, radio, toggle, range): stacked labels for form controls (#3097)
Co-authored-by: Brandy Carney <[email protected]>
1 parent 6e7737e commit 56a8060

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+461
-13
lines changed

‎docs/api/checkbox.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,15 +29,27 @@ import Basic from '@site/static/usage/v7/checkbox/basic/index.md';
2929

3030
## Label Placement
3131

32-
Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
32+
Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
3333

3434
import LabelPlacement from '@site/static/usage/v7/checkbox/label-placement/index.md';
3535

3636
<LabelPlacement />
3737

38+
## Alignment
39+
40+
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
41+
42+
:::note
43+
Stacked checkboxes can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
44+
:::
45+
46+
import Alignment from '@site/static/usage/v7/checkbox/alignment/index.md';
47+
48+
<Alignment />
49+
3850
## Justification
3951

40-
Developers can use the `justify` property to control how the label and control are packed on a line.
52+
Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
4153

4254
import Justify from '@site/static/usage/v7/checkbox/justify/index.md';
4355

‎docs/api/radio.md

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -30,21 +30,32 @@ import Basic from '@site/static/usage/v7/radio/basic/index.md';
3030

3131
## Label Placement
3232

33-
Developers can use the `labelPlacement` property to control how the label is placed relative to the control.
33+
Developers can use the `labelPlacement` property to control how the label is placed relative to the control. This property mirrors the flexbox `flex-direction` property.
3434

3535
import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md';
3636

3737
<LabelPlacement />
3838

39+
## Alignment
40+
41+
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
42+
43+
:::note
44+
Stacked radios can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
45+
:::
46+
47+
import Alignment from '@site/static/usage/v7/radio/alignment/index.md';
48+
49+
<Alignment />
50+
3951
## Justification
4052

41-
Developers can use the `justify` property to control how the label and control are packed on a line.
53+
Developers can use the `justify` property to control how the label and control are packed on a line. This property mirrors the flexbox `justify-content` property.
4254

4355
import Justify from '@site/static/usage/v7/radio/justify/index.md';
4456

4557
<Justify />
4658

47-
4859
:::note
4960
`ion-item` is only used in the demos to emphasize how `justify` works. It is not needed in order for `justify` to function correctly.
5061
:::

‎docs/api/toggle.md

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,17 @@ import LabelPlacement from '@site/static/usage/v7/toggle/label-placement/index.m
5353

5454
<LabelPlacement />
5555

56+
## Alignment
57+
58+
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.
59+
60+
:::note
61+
Stacked toggles can be aligned using the `alignment` property. This can be useful when the label and control need to be centered horizontally.
62+
:::
63+
64+
import Alignment from '@site/static/usage/v7/toggle/alignment/index.md';
65+
66+
<Alignment />
5667

5768
## Justification
5869

@@ -62,7 +73,6 @@ import Justify from '@site/static/usage/v7/toggle/justify/index.md';
6273

6374
<Justify />
6475

65-
6676
## Theming
6777

6878
### Colors

‎static/code/stackblitz/v7/angular/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"dependencies": {
3-
"@ionic/angular": "^7.0.0",
4-
"@ionic/core": "^7.0.0"
3+
"@ionic/angular": "7.3.2-dev.11693507138.1f9ed625",
4+
"@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
55
}
66
}

‎static/code/stackblitz/v7/html/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"dependencies": {
3-
"@ionic/core": "^7.0.0"
3+
"@ionic/core": "7.3.2-dev.11693507138.1f9ed625"
44
}
55
}

‎static/code/stackblitz/v7/react/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6-
"@ionic/react": "^7.0.10",
7-
"@ionic/react-router": "^7.0.10",
6+
"@ionic/react": "7.3.2-dev.11693507138.1f9ed625",
7+
"@ionic/react-router": "7.3.2-dev.11693507138.1f9ed625",
88
"@types/node": "^16.11.35",
99
"@types/react": "^18.0.9",
1010
"@types/react-dom": "^18.0.4",

‎static/code/stackblitz/v7/vue/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"preview": "vite preview"
99
},
1010
"dependencies": {
11-
"@ionic/vue": "^7.0.10",
12-
"@ionic/vue-router": "^7.0.10",
11+
"@ionic/vue": "7.3.2-dev.11693507138.1f9ed625",
12+
"@ionic/vue-router": "7.3.2-dev.11693507138.1f9ed625",
1313
"vue": "^3.2.25",
1414
"vue-router": "4.0.13"
1515
},

‎static/usage/v7/checkbox/alignment/angular.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
```html
2+
<ion-list>
3+
<ion-item>
4+
<ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
5+
</ion-item>
6+
7+
<ion-item>
8+
<ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
9+
</ion-item>
10+
</ion-list>
11+
```

‎static/usage/v7/checkbox/alignment/demo.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Checkbox</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
<body>
13+
<ion-app>
14+
<ion-content>
15+
<div class="container">
16+
<ion-list>
17+
<ion-item>
18+
<ion-checkbox label-placement="stacked" alignment="start">Aligned to the Start</ion-checkbox>
19+
</ion-item>
20+
21+
<ion-item>
22+
<ion-checkbox label-placement="stacked" alignment="center">Aligned to the Center</ion-checkbox>
23+
</ion-item>
24+
</ion-list>
25+
</div>
26+
</ion-content>
27+
</ion-app>
28+
</body>
29+
</html>

‎static/usage/v7/checkbox/alignment/index.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
version="7"
10+
code={{
11+
javascript,
12+
react,
13+
vue,
14+
angular,
15+
}}
16+
src="usage/v7/checkbox/alignment/demo.html"
17+
/>

0 commit comments

Comments
 (0)