Skip to content

docs(radio): add example for wrapping label text #4234

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Aug 8, 2025
Merged

docs(radio): add example for wrapping label text #4234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2a77aed
docs(radio): add example for wrapping label text
soundproofboot Jul 31, 2025
4e03158
docs(radio): update wrapping example to include ion-text-wrap utility…
soundproofboot Aug 6, 2025
3a4b4ed
docs(radio): small updates for wrapping demo
brandyscarney Aug 8, 2025
69a4d2c
docs(radio): copy example to v7 docs
brandyscarney Aug 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions docs/api/radio.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md

<LabelPlacement />

## Label Wrapping

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.

import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md';

<LabelWrap />

## Object Value References

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.
Expand Down
9 changes: 9 additions & 0 deletions static/usage/v7/radio/label-wrap/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
```css
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
```
17 changes: 17 additions & 0 deletions static/usage/v7/radio/label-wrap/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```html
<ion-list>
<ion-radio-group value="truncated">
<ion-item>
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-div">
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
```
12 changes: 12 additions & 0 deletions static/usage/v7/radio/label-wrap/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonItem, IonList, IonRadio, IonRadioGroup],
})
export class ExampleComponent {}
```
48 changes: 48 additions & 0 deletions static/usage/v7/radio/label-wrap/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Radio</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />

<style>
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-radio-group value="truncated">
<ion-item>
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-part" class="wrapped">
Wrapping with text-wrap applied to label shadow part
</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-div">
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
34 changes: 34 additions & 0 deletions static/usage/v7/radio/label-wrap/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';

import react_main_tsx from './react/main_tsx.md';
import react_main_css from './react/main_css.md';

import vue from './vue.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_css from './angular/example_component_css.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="8"
code={{
javascript,
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/main.css': react_main_css,
},
},
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.css': angular_example_component_css,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v8/radio/label-wrap/demo.html"
/>
27 changes: 27 additions & 0 deletions static/usage/v7/radio/label-wrap/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
```html
<ion-list>
<ion-radio-group value="truncated">
<ion-item>
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-div">
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

<style>
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
</style>
```
9 changes: 9 additions & 0 deletions static/usage/v7/radio/label-wrap/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
```css
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
```
29 changes: 29 additions & 0 deletions static/usage/v7/radio/label-wrap/react/main_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
```tsx
import React from 'react';
import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/react';

import './main.css';

function Example() {
return (
<IonList>
<IonRadioGroup value="truncated">
<IonItem>
<IonRadio value="truncated">Truncated with ellipsis by default</IonRadio>
</IonItem>
<IonItem>
<IonRadio value="wrapped-part" className="wrapped">
Wrapping with text-wrap applied to label shadow part
</IonRadio>
</IonItem>
<IonItem>
<IonRadio value="wrapped-div">
<div className="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</IonRadio>
</IonItem>
</IonRadioGroup>
</IonList>
);
}
export default Example;
```
38 changes: 38 additions & 0 deletions static/usage/v7/radio/label-wrap/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
```html
<template>
<ion-list>
<ion-radio-group value="truncated">
<ion-item>
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-div">
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</template>

<script lang="ts">
import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonList, IonItem, IonRadio, IonRadioGroup },
});
</script>

<style scoped>
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
</style>
```
9 changes: 9 additions & 0 deletions static/usage/v8/radio/label-wrap/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
```css
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
```
17 changes: 17 additions & 0 deletions static/usage/v8/radio/label-wrap/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```html
<ion-list>
<ion-radio-group value="truncated">
<ion-item>
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-div">
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
```
12 changes: 12 additions & 0 deletions static/usage/v8/radio/label-wrap/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```ts
import { Component } from '@angular/core';
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/angular/standalone';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
styleUrls: ['example.component.css'],
imports: [IonItem, IonList, IonRadio, IonRadioGroup],
})
export class ExampleComponent {}
```
48 changes: 48 additions & 0 deletions static/usage/v8/radio/label-wrap/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Radio</title>
<link rel="stylesheet" href="../../common.css" />
<script src="../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />

<style>
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-list>
<ion-radio-group value="truncated">
<ion-item>
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-part" class="wrapped">
Wrapping with text-wrap applied to label shadow part
</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-div">
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>
</div>
</ion-content>
</ion-app>
</body>
</html>
34 changes: 34 additions & 0 deletions static/usage/v8/radio/label-wrap/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';

import react_main_tsx from './react/main_tsx.md';
import react_main_css from './react/main_css.md';

import vue from './vue.md';

import angular_example_component_html from './angular/example_component_html.md';
import angular_example_component_css from './angular/example_component_css.md';
import angular_example_component_ts from './angular/example_component_ts.md';

<Playground
version="8"
code={{
javascript,
react: {
files: {
'src/main.tsx': react_main_tsx,
'src/main.css': react_main_css,
},
},
vue,
angular: {
files: {
'src/app/example.component.html': angular_example_component_html,
'src/app/example.component.css': angular_example_component_css,
'src/app/example.component.ts': angular_example_component_ts,
},
},
}}
src="usage/v8/radio/label-wrap/demo.html"
/>
27 changes: 27 additions & 0 deletions static/usage/v8/radio/label-wrap/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
```html
<ion-list>
<ion-radio-group value="truncated">
<ion-item>
<ion-radio value="truncated">Truncated with ellipsis by default</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-part" class="wrapped">Wrapping with text-wrap applied to label shadow part</ion-radio>
</ion-item>
<ion-item>
<ion-radio value="wrapped-div">
<div class="ion-text-wrap">Wrapping with ion-text-wrap class applied wrapper element</div>
</ion-radio>
</ion-item>
</ion-radio-group>
</ion-list>

<style>
ion-list {
width: 250px;
}

ion-radio.wrapped::part(label) {
white-space: normal;
}
</style>
```
Loading
Loading