Skip to content

Commit de08bf7

Browse files
soundproofbootsoundproofboot
authored
docs(radio): add example for wrapping label text (#4234)
1 parent 688866a commit de08bf7

File tree

20 files changed

+462
-0
lines changed

20 files changed

+462
-0
lines changed

‎docs/api/radio.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md
3636

3737
<LabelPlacement />
3838

39+
## Label Wrapping
40+
41+
Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the `ion-text-wrap` class to a wrapper around the radio text or styling the `label` shadow part using the `::part()` selector.
42+
43+
import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md';
44+
45+
<LabelWrap />
46+
3947
## Object Value References
4048

4149
By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.

‎static/usage/v7/radio/label-wrap/angular/example_component_css.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```css
2+
ion-list {
3+
width: 250px;
4+
}
5+
6+
ion-radio.wrapped::part(label) {
7+
white-space: normal;
8+
}
9+
```

‎static/usage/v7/radio/label-wrap/angular/example_component_html.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group value="truncated">
4+
<ion-item>
5+
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
6+
</ion-item>
7+
<ion-item>
8+
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
9+
</ion-item>
10+
<ion-item>
11+
<ion-radio value="wrapped-div">
12+
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
13+
</ion-radio>
14+
</ion-item>
15+
</ion-radio-group>
16+
</ion-list>
17+
```

‎static/usage/v7/radio/label-wrap/angular/example_component_ts.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
styleUrls: ['example.component.css'],
9+
imports: [IonItem, IonList, IonRadio, IonRadioGroup],
10+
})
11+
export class ExampleComponent {}
12+
```

‎static/usage/v7/radio/label-wrap/demo.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
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>Radio</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@8/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
11+
12+
<style>
13+
ion-list {
14+
width: 250px;
15+
}
16+
17+
ion-radio.wrapped::part(label) {
18+
white-space: normal;
19+
}
20+
</style>
21+
</head>
22+
23+
<body>
24+
<ion-app>
25+
<ion-content>
26+
<div class="container">
27+
<ion-list>
28+
<ion-radio-group value="truncated">
29+
<ion-item>
30+
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
31+
</ion-item>
32+
<ion-item>
33+
<ion-radio value="wrapped-part" class="wrapped">
34+
Wrapping with text-wrap applied to label shadow part
35+
</ion-radio>
36+
</ion-item>
37+
<ion-item>
38+
<ion-radio value="wrapped-div">
39+
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
40+
</ion-radio>
41+
</ion-item>
42+
</ion-radio-group>
43+
</ion-list>
44+
</div>
45+
</ion-content>
46+
</ion-app>
47+
</body>
48+
</html>

‎static/usage/v7/radio/label-wrap/index.md

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react_main_tsx from './react/main_tsx.md';
6+
import react_main_css from './react/main_css.md';
7+
8+
import vue from './vue.md';
9+
10+
import angular_example_component_html from './angular/example_component_html.md';
11+
import angular_example_component_css from './angular/example_component_css.md';
12+
import angular_example_component_ts from './angular/example_component_ts.md';
13+
14+
<Playground
15+
version="8"
16+
code={{
17+
javascript,
18+
react: {
19+
files: {
20+
'src/main.tsx': react_main_tsx,
21+
'src/main.css': react_main_css,
22+
},
23+
},
24+
vue,
25+
angular: {
26+
files: {
27+
'src/app/example.component.html': angular_example_component_html,
28+
'src/app/example.component.css': angular_example_component_css,
29+
'src/app/example.component.ts': angular_example_component_ts,
30+
},
31+
},
32+
}}
33+
src="usage/v8/radio/label-wrap/demo.html"
34+
/>

‎static/usage/v7/radio/label-wrap/javascript.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group value="truncated">
4+
<ion-item>
5+
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
6+
</ion-item>
7+
<ion-item>
8+
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
9+
</ion-item>
10+
<ion-item>
11+
<ion-radio value="wrapped-div">
12+
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
13+
</ion-radio>
14+
</ion-item>
15+
</ion-radio-group>
16+
</ion-list>
17+
18+
<style>
19+
ion-list {
20+
width: 250px;
21+
}
22+
23+
ion-radio.wrapped::part(label) {
24+
white-space: normal;
25+
}
26+
</style>
27+
```

‎static/usage/v7/radio/label-wrap/react/main_css.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```css
2+
ion-list {
3+
width: 250px;
4+
}
5+
6+
ion-radio.wrapped::part(label) {
7+
white-space: normal;
8+
}
9+
```

‎static/usage/v7/radio/label-wrap/react/main_tsx.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/react';
4+
5+
import './main.css';
6+
7+
function Example() {
8+
return (
9+
<IonList>
10+
<IonRadioGroup value="truncated">
11+
<IonItem>
12+
<IonRadio value="truncated">Truncated with ellipsis by default</IonRadio>
13+
</IonItem>
14+
<IonItem>
15+
<IonRadio value="wrapped-part" className="wrapped">
16+
Wrapping with text-wrap applied to label shadow part
17+
</IonRadio>
18+
</IonItem>
19+
<IonItem>
20+
<IonRadio value="wrapped-div">
21+
<div className="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
22+
</IonRadio>
23+
</IonItem>
24+
</IonRadioGroup>
25+
</IonList>
26+
);
27+
}
28+
export default Example;
29+
```

‎static/usage/v7/radio/label-wrap/vue.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-radio-group value="truncated">
5+
<ion-item>
6+
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
7+
</ion-item>
8+
<ion-item>
9+
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
10+
</ion-item>
11+
<ion-item>
12+
<ion-radio value="wrapped-div">
13+
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
14+
</ion-radio>
15+
</ion-item>
16+
</ion-radio-group>
17+
</ion-list>
18+
</template>
19+
20+
<script lang="ts">
21+
import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/vue';
22+
import { defineComponent } from 'vue';
23+
24+
export default defineComponent({
25+
components: { IonList, IonItem, IonRadio, IonRadioGroup },
26+
});
27+
</script>
28+
29+
<style scoped>
30+
ion-list {
31+
width: 250px;
32+
}
33+
34+
ion-radio.wrapped::part(label) {
35+
white-space: normal;
36+
}
37+
</style>
38+
```

0 commit comments

Comments
 (0)