Skip to content
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

Jump to bottom

docs(range): update docs to use label prop #2955

Merged
merged 5 commits into from
May 10, 2023
Merged

docs(range): update docs to use label prop #2955

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c6e28d7
migrate labelPlacement playground to use label prop
May 9, 2023
fbf468f
update modern syntax migration guide
May 9, 2023
f9a76c1
add label slot playground
May 9, 2023
faf17a0
rearrange label sections
May 10, 2023
f0f6182
rename basic playground to no-visible-label
May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
31 changes: 26 additions & 5 deletions docs/api/range.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,37 @@ The Range slider lets users select from a range of values by moving the slider k

By default the Range slider has a minimum value of `0` and a maximum value of `100`. This can be configured with the `min` and `max` properties.

## Basic Usage
## Labels

import Basic from '@site/static/usage/v7/range/basic/index.md';
Range has several options for supplying a label for the component:
- `label` property: used for plaintext labels
- `label` slot: used for custom HTML labels
- `aria-label`: used for ranges with no visible label

<Basic />
### Label Placement

## Label Placement
The below demo shows how to use the `labelPlacement` property to change the position of the label relative to the range. While the `label` property is used here, `labelPlacement` can also be used with the `label` slot.

import LabelsPlayground from '@site/static/usage/v7/range/labels/index.md';

<LabelsPlayground />

### Label Slot

While plaintext labels should be passed in via the `label` property, if custom HTML is needed, it can be passed through the `label` slot instead.

import LabelSlotPlayground from '@site/static/usage/v7/range/label-slot/index.md';

<LabelSlotPlayground />

### No Visible Label

If no visible label is needed, devs should still supply an `aria-label` so the range is accessible to screen readers.

import Basic from '@site/static/usage/v7/range/basic/index.md';

<Basic />
averyjohnston marked this conversation as resolved.
Show resolved Hide resolved

## Decorations

Decorative elements can be passed into the `start` or `end` slots of the range. This is useful for adding icons such as low volume or high volume icons. Since these elements are decorative, they should not be announced by assistive technology such as screen readers.
Expand Down Expand Up @@ -116,7 +135,9 @@ Developers can perform this migration one range at a time. While developers can

### Using the Modern Syntax

Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-range` using `slot="label"`. The placement of the label can be configured using the `labelPlacement` property on `ion-range`.
Using the modern syntax involves removing the `ion-label` and passing the label to `ion-range` using the `label` property. The placement of the label can be configured using the `labelPlacement` property.

If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead.

import Migration from '@site/static/usage/v7/range/migration/index.md';

Expand Down
7 changes: 7 additions & 0 deletions static/usage/v7/range/label-slot/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
```html
<ion-range>
<div slot="label">
Label with <ion-text color="primary">custom HTML</ion-text>
</div>
</ion-range>
```
31 changes: 31 additions & 0 deletions static/usage/v7/range/label-slot/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Range</title>
<link rel="stylesheet" href="../../../common.css" />
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
<style>
ion-range {
max-width: 400px;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<div class="container">
<ion-range>
<div slot="label">
Label with <ion-text color="primary">custom HTML</ion-text>
</div>
</ion-range>
</div>
</ion-content>
</ion-app>
</body>
</html>
8 changes: 8 additions & 0 deletions static/usage/v7/range/label-slot/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import Playground from '@site/src/components/global/Playground';

import javascript from './javascript.md';
import react from './react.md';
import vue from './vue.md';
import angular from './angular.md';

<Playground version="7" code={{ javascript, react, vue, angular }} src="usage/v7/range/label-slot/demo.html" />
7 changes: 7 additions & 0 deletions static/usage/v7/range/label-slot/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
```html
<ion-range>
<div slot="label">
Label with <ion-text color="primary">custom HTML</ion-text>
</div>
</ion-range>
```
14 changes: 14 additions & 0 deletions static/usage/v7/range/label-slot/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
```tsx
import React from 'react';
import { IonRange, IonText } from '@ionic/react';
function Example() {
return (
<IonRange>
<div slot="label">
Label with <IonText color="primary">custom HTML</IonText>
</div>
</IonRange>
);
}
export default Example;
```
18 changes: 18 additions & 0 deletions static/usage/v7/range/label-slot/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
```html
<template>
<ion-range>
<div slot="label">
Label with <ion-text color="primary">custom HTML</ion-text>
</div>
</ion-range>
</template>

<script lang="ts">
import { IonRange, IonText } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonRange, IonText },
});
</script>
```
12 changes: 3 additions & 9 deletions static/usage/v7/range/labels/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
```html
<ion-range labelPlacement="start">
<div slot="label">Label at the Start</div>
</ion-range>
<ion-range labelPlacement="start" label="Label at the Start"></ion-range>

<br />

<ion-range labelPlacement="end">
<div slot="label">Label at the End</div>
</ion-range>
<ion-range labelPlacement="end" label="Label at the End"></ion-range>

<br />

<ion-range labelPlacement="fixed">
<div slot="label">Fixed Width Label</div>
</ion-range>
<ion-range labelPlacement="fixed" label="Fixed Width Label"></ion-range>
```
20 changes: 7 additions & 13 deletions static/usage/v7/range/labels/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,15 @@
<ion-content>
<div class="container">
<div class="wrapper">
<ion-range label-placement="start">
<div slot="label">Label at the Start</div>
</ion-range>

<ion-range label-placement="start" label="Label at the Start"></ion-range>

<br />

<ion-range label-placement="end">
<div slot="label">Label at the End</div>
</ion-range>


<ion-range label-placement="end" label="Label at the End"></ion-range>

<br />

<ion-range label-placement="fixed">
<div slot="label">Fixed Width Label</div>
</ion-range>

<ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
</div>
</div>
</ion-content>
Expand Down
12 changes: 3 additions & 9 deletions static/usage/v7/range/labels/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
```html
<ion-range label-placement="start">
<div slot="label">Label at the Start</div>
</ion-range>
<ion-range label-placement="start" label="Label at the Start"></ion-range>

<br />

<ion-range label-placement="end">
<div slot="label">Label at the End</div>
</ion-range>
<ion-range label-placement="end" label="Label at the End"></ion-range>

<br />

<ion-range label-placement="fixed">
<div slot="label">Fixed Width Label</div>
</ion-range>
<ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
```
12 changes: 3 additions & 9 deletions static/usage/v7/range/labels/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,15 @@ import { IonRange } from '@ionic/react';
function Example() {
return (
<>
<IonRange labelPlacement="start">
<div slot="label">Label at the Start</div>
</IonRange>
<IonRange labelPlacement="start" label="Label at the Start"></IonRange>

<br />

<IonRange labelPlacement="end">
<div slot="label">Label at the End</div>
</IonRange>
<IonRange labelPlacement="end" label="Label at the End"></IonRange>

<br />

<IonRange labelPlacement="fixed">
<div slot="label">Fixed Width Label</div>
</IonRange>
<IonRange labelPlacement="fixed" label="Fixed Width Label"></IonRange>
</>
);
}
Expand Down
12 changes: 3 additions & 9 deletions static/usage/v7/range/labels/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,14 @@
```html
<template>
<ion-range label-placement="start">
<div slot="label">Label at the Start</div>
</ion-range>
<ion-range label-placement="start" label="Label at the Start"></ion-range>

<br />

<ion-range label-placement="end">
<div slot="label">Label at the End</div>
</ion-range>
<ion-range label-placement="end" label="Label at the End"></ion-range>

<br />

<ion-range label-placement="fixed">
<div slot="label">Fixed Width Label</div>
</ion-range>
<ion-range label-placement="fixed" label="Fixed Width Label"></ion-range>
</template>

<script lang="ts">
Expand Down