Skip to content

Commit 69a4d2c

Browse files
brandyscarneybrandyscarney
committed
docs(radio): copy example to v7 docs
1 parent 3a4b4ed commit 69a4d2c

File tree

10 files changed

+231
-0
lines changed

10 files changed

+231
-0
lines changed

‎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+
```

‎versioned_docs/version-v7/api/radio.md

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

4040
<LabelPlacement />
4141

42+
## Label Wrapping
43+
44+
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.
45+
46+
import LabelWrap from '@site/static/usage/v7/radio/label-wrap/index.md';
47+
48+
<LabelWrap />
49+
4250
## Object Value References
4351

4452
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.

0 commit comments

Comments
 (0)