Skip to content

Commit 2a77aed

Browse files
soundproofbootsoundproofboot
committed
docs(radio): add example for wrapping label text
1 parent f4a7449 commit 2a77aed

File tree

10 files changed

+204
-0
lines changed

10 files changed

+204
-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. The `label` shadow part can be styled with 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/v8/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+
text-wrap: wrap;
8+
}
9+
```

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
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" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
9+
</ion-item>
10+
</ion-radio-group>
11+
</ion-list>
12+
```

‎static/usage/v8/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/v8/radio/label-wrap/demo.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
text-wrap: wrap;
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" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
34+
</ion-item>
35+
</ion-radio-group>
36+
</ion-list>
37+
</div>
38+
</ion-content>
39+
</ion-app>
40+
</body>
41+
</html>

‎static/usage/v8/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/v8/radio/label-wrap/javascript.md

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
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" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
9+
</ion-item>
10+
</ion-radio-group>
11+
</ion-list>
12+
13+
<style>
14+
ion-list {
15+
width: 250px;
16+
}
17+
18+
ion-radio.wrapped::part(label) {
19+
text-wrap: wrap;
20+
}
21+
</style>
22+
```

‎static/usage/v8/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+
text-wrap: wrap;
8+
}
9+
```

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
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" className="wrapped">
16+
`text-wrap` applied to `label` shadow part
17+
</IonRadio>
18+
</IonItem>
19+
</IonRadioGroup>
20+
</IonList>
21+
);
22+
}
23+
export default Example;
24+
```

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
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" class="wrapped">`text-wrap` applied to `label` shadow part</ion-radio>
10+
</ion-item>
11+
</ion-radio-group>
12+
</ion-list>
13+
</template>
14+
15+
<script lang="ts">
16+
import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/vue';
17+
import { defineComponent } from 'vue';
18+
19+
export default defineComponent({
20+
components: { IonList, IonItem, IonRadio, IonRadioGroup },
21+
});
22+
</script>
23+
24+
<style scoped>
25+
ion-list {
26+
width: 250px;
27+
}
28+
29+
ion-radio.wrapped::part(label) {
30+
text-wrap: wrap;
31+
}
32+
</style>
33+
```

0 commit comments

Comments
 (0)