Skip to content

Commit 9a40ae3

Browse files
tanner-reitstanner-reits
authored
docs(): merge feature-8.4 docs (#3877)
* docs(select): add `modal` interface to `ion-select` docs (#3872) * docs(select): update select docs for modal interface * fix(select): point playground to correct demo * feat(segment): add playground & docs for segment view (#3875) * feat(segment): add playground & docs for segment view * fix(segment-view): api import version * fix(segment-content): usage & common API sections * Force CI run
1 parent d1f0b7c commit 9a40ae3

25 files changed

+573
-11
lines changed

‎docs/api/segment-content.md

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: "ion-segment-content"
3+
---
4+
5+
import Props from '@ionic-internal/component-api/v8/segment-content/props.md';
6+
import Events from '@ionic-internal/component-api/v8/segment-content/events.md';
7+
import Methods from '@ionic-internal/component-api/v8/segment-content/methods.md';
8+
import Parts from '@ionic-internal/component-api/v8/segment-content/parts.md';
9+
import CustomProps from '@ionic-internal/component-api/v8/segment-content/custom-props.mdx';
10+
import Slots from '@ionic-internal/component-api/v8/segment-content/slots.md';
11+
12+
<head>
13+
<title>ion-segment-content: Display control element for swipeable segments</title>
14+
<meta name="description" content="ion-segment-contents are wrapper elements used to control the display of child elements when using swipeable segments." />
15+
</head>
16+
17+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
18+
19+
<EncapsulationPill type="shadow" />
20+
21+
Segment content is a wrapper element used to control the display of child elements when using swipeable segments. Segment content elements are children of a single
22+
[segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). See our [swipeable segments](./segment.md#swipeable-segments) documentation
23+
for more information on how to use segment contents.
24+
25+
## Usage
26+
27+
Each `ion-segment-content` needs a unique `id` attribute. This will be used to link the segment content to a segment button via the button's
28+
[contentId property](./segment-button.md#properties).
29+
30+
<!-- Reuse swipeable segments playground -->
31+
32+
import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md';
33+
34+
<Swipeable />
35+
36+
## Properties
37+
<Props />
38+
39+
## Events
40+
<Events />
41+
42+
## Methods
43+
<Methods />
44+
45+
## CSS Shadow Parts
46+
<Parts />
47+
48+
## CSS Custom Properties
49+
<CustomProps />
50+
51+
## Slots
52+
<Slots />

‎docs/api/segment-view.md

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
---
2+
title: "ion-segment-view"
3+
---
4+
5+
import Props from '@ionic-internal/component-api/v8/segment-view/props.md';
6+
import Events from '@ionic-internal/component-api/v8/segment-view/events.md';
7+
import Methods from '@ionic-internal/component-api/v8/segment-view/methods.md';
8+
import Parts from '@ionic-internal/component-api/v8/segment-view/parts.md';
9+
import CustomProps from '@ionic-internal/component-api/v8/segment-view/custom-props.mdx';
10+
import Slots from '@ionic-internal/component-api/v8/segment-view/slots.md';
11+
12+
<head>
13+
<title>ion-segment-view: Controller element for swipeable segments</title>
14+
<meta name="description" content="ion-segment-views are wrapper elements that link a group of segment contents to a segment" />
15+
</head>
16+
17+
import EncapsulationPill from '@components/page/api/EncapsulationPill';
18+
19+
<EncapsulationPill type="shadow" />
20+
21+
Segment view is a wrapper element that links a group of [segment contents](./segment-content.md) to a [segment](./segment.md) when using swipeable segments.
22+
See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views.
23+
24+
## Properties
25+
<Props />
26+
27+
## Events
28+
<Events />
29+
30+
## Methods
31+
<Methods />
32+
33+
## CSS Shadow Parts
34+
<Parts />
35+
36+
## CSS Custom Properties
37+
<CustomProps />
38+
39+
## Slots
40+
<Slots />

‎docs/api/segment.md

+16
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,22 @@ import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md';
4949
<Toolbar />
5050

5151

52+
## Swipeable Segments
53+
54+
Each [segment button](./segment-button.md) can be associated with a [segment content](./segment-content.md) element that will be displayed
55+
when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated
56+
to reflect the currently visible content.
57+
58+
:::warning
59+
If no initial `value` is assigned to the `ion-segment` when using swipeable segments, the segment will default to the value of the first segment button.
60+
61+
Segment buttons cannot be disabled when used with swipeable segments.
62+
:::
63+
64+
import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md';
65+
66+
<Swipeable />
67+
5268
## Theming
5369

5470
### Colors

‎docs/api/select.md

+22-10
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ import SingleSelectionExample from '@site/static/usage/v8/select/basic/single-se
7070

7171
## Multiple Selection
7272

73-
By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert or popover overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
73+
By adding the `multiple` attribute to select, users are able to select multiple options. When multiple options can be selected, the alert, popover, or modal overlay presents users with a checkbox styled list of options. The select component's value receives an array of all of the selected option values.
7474

7575
:::note
7676

@@ -86,7 +86,7 @@ import MultipleSelectionExample from '@site/static/usage/v8/select/basic/multipl
8686

8787
## Interfaces
8888

89-
By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md) or [ion-popover](popover.md) by passing `action-sheet` or `popover`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
89+
By default, select uses [ion-alert](alert.md) to open up the overlay of options in an alert. The interface can be changed to use [ion-action-sheet](action-sheet.md), [ion-popover](popover.md), or [ion-modal](modal.md) by passing `action-sheet`, `popover`, or `modal`, respectively, to the `interface` property. Read on to the other sections for the limitations of the different interfaces.
9090

9191
### Alert
9292

@@ -107,6 +107,12 @@ import PopoverExample from '@site/static/usage/v8/select/interfaces/popover/inde
107107

108108
<PopoverExample />
109109

110+
### Modal
111+
112+
import ModalExample from '@site/static/usage/v8/select/interfaces/modal/index.md';
113+
114+
<ModalExample />
115+
110116
## Responding to Interaction
111117

112118
The main ways of handling user interaction with the select are the `ionChange`, `ionDismiss`, and `ionCancel` events. See [Events](#events) for more details on these and other events that select fires.
@@ -161,15 +167,19 @@ The alert supports two buttons: `Cancel` and `OK`. Each button's text can be cus
161167

162168
The `action-sheet` and `popover` interfaces do not have an `OK` button, clicking on any of the options will automatically close the overlay and select that value. The `popover` interface does not have a `Cancel` button, clicking on the backdrop will close the overlay.
163169

170+
The `modal` interface has a single `Close` button in the header. This button is only responsible for dismissing the modal. Any selections made will persist
171+
after clicking this button or if the modal is dismissed using an alternative method.
172+
164173
import ButtonTextExample from '@site/static/usage/v8/select/customization/button-text/index.md';
165174

166175
<ButtonTextExample />
167176

168177
## Interface Options
169178

170-
Since select uses the alert, action sheet and popover interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
179+
Since select uses the alert, action sheet, popover, and modal interfaces, options can be passed to these components through the `interfaceOptions` property. This can be used to pass a custom header, subheader, css class, and more.
171180

172-
See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), and [ion-popover docs](popover.md) for the properties that each interface accepts.
181+
See the [ion-alert docs](alert.md), [ion-action-sheet docs](action-sheet.md), [ion-popover docs](popover.md), and [ion-modal docs](modal.md)
182+
for the properties that each interface accepts.
173183

174184
Note: `interfaceOptions` will not override `inputs` or `buttons` with the `alert` interface.
175185

@@ -207,11 +217,13 @@ import StylingSelectExample from '@site/static/usage/v8/select/customization/sty
207217

208218
### Styling Select Interface
209219

210-
Customizing the interface dialog should be done by following the Customization section in that interface's documentation:
220+
Customizing the interface dialog should be done by following the styling sections (CSS shadow parts, CSS custom properties, and slots) in
221+
that interface's documentation:
211222

212-
- [Alert Customization](alert.md#customization)
213-
- [Action Sheet Customization](action-sheet.md#customization)
214-
- [Popover Customization](popover.md#customization)
223+
- [Alert](alert.md#css-shadow-parts)
224+
- [Action Sheet](action-sheet.md#css-shadow-parts)
225+
- [Popover](popover.md#css-shadow-parts)
226+
- [Modal](modal.md#css-shadow-parts)
215227

216228
However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.md) for usage examples of customizing options.
217229

@@ -304,7 +316,7 @@ These keyboard interactions apply to all `ion-select` elements when the followin
304316

305317
Single selection keyboard interaction follows the [ARIA implementation patterns of a radio](https://www.w3.org/WAI/ARIA/apg/patterns/radio/).
306318

307-
These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-popover` elements when the overlay is presented and focused.
319+
These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, `ion-popover`, and `ion-modal` elements when the overlay is presented and focused.
308320

309321
| Key | Description |
310322
| --------------------- | ------------------------------------------------------------ |
@@ -321,7 +333,7 @@ These keyboard interactions apply to `ion-action-sheet`, `ion-alert`, and `ion-p
321333

322334
Multiple selection keyboard interaction follows the [ARIA implementation patterns of a checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/).
323335

324-
These keyboard interactions apply to `ion-alert` and `ion-popover` elements when the overlay is presented and multiple selection is enabled.
336+
These keyboard interactions apply to `ion-alert`, `ion-popover`, and `ion-modal` elements when the overlay is presented and multiple selection is enabled.
325337

326338
| Key | Description |
327339
| ------------------ | ------------------------------------------------------------ |

‎sidebars.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ module.exports = {
450450
type: 'category',
451451
label: 'Segment',
452452
collapsed: false,
453-
items: ['api/segment', 'api/segment-button'],
453+
items: ['api/segment', 'api/segment-button', 'api/segment-content', 'api/segment-view'],
454454
},
455455
{
456456
type: 'category',

‎static/usage/v8/segment/swipeable/angular/angular_css.md

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
```css
2+
ion-segment-view {
3+
height: 150px;
4+
}
5+
6+
ion-segment-content {
7+
display: flex;
8+
align-items: center;
9+
justify-content: center;
10+
}
11+
ion-segment-content:nth-of-type(1) {
12+
background: lightpink;
13+
}
14+
ion-segment-content:nth-of-type(2) {
15+
background: lightblue;
16+
}
17+
ion-segment-content:nth-of-type(3) {
18+
background: lightgreen;
19+
}
20+
```

‎static/usage/v8/segment/swipeable/angular/angular_html.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
```html
2+
<ion-segment>
3+
<ion-segment-button value="first" content-id="first">
4+
<ion-label>First</ion-label>
5+
</ion-segment-button>
6+
<ion-segment-button value="second" content-id="second">
7+
<ion-label>Second</ion-label>
8+
</ion-segment-button>
9+
<ion-segment-button value="third" content-id="third">
10+
<ion-label>Third</ion-label>
11+
</ion-segment-button>
12+
</ion-segment>
13+
<ion-segment-view>
14+
<ion-segment-content id="first">First</ion-segment-content>
15+
<ion-segment-content id="second">Second</ion-segment-content>
16+
<ion-segment-content id="third">Third</ion-segment-content>
17+
</ion-segment-view>
18+
```

‎static/usage/v8/segment/swipeable/demo.html

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
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>Segment - Swipeable</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-segment-view {
14+
height: 168px;
15+
}
16+
17+
ion-segment-content {
18+
display: flex;
19+
align-items: center;
20+
justify-content: center;
21+
}
22+
ion-segment-content:nth-of-type(1) {
23+
background: lightpink;
24+
}
25+
ion-segment-content:nth-of-type(2) {
26+
background: lightblue;
27+
}
28+
ion-segment-content:nth-of-type(3) {
29+
background: lightgreen;
30+
}
31+
</style>
32+
</head>
33+
34+
<body>
35+
<ion-app>
36+
<ion-content>
37+
<ion-segment>
38+
<ion-segment-button value="first" content-id="first">
39+
<ion-label>First</ion-label>
40+
</ion-segment-button>
41+
<ion-segment-button value="second" content-id="second">
42+
<ion-label>Second</ion-label>
43+
</ion-segment-button>
44+
<ion-segment-button value="third" content-id="third">
45+
<ion-label>Third</ion-label>
46+
</ion-segment-button>
47+
</ion-segment>
48+
<ion-segment-view>
49+
<ion-segment-content id="first">First</ion-segment-content>
50+
<ion-segment-content id="second">Second</ion-segment-content>
51+
<ion-segment-content id="third">Third</ion-segment-content>
52+
</ion-segment-view>
53+
</ion-content>
54+
</ion-app>
55+
</body>
56+
</html>

‎static/usage/v8/segment/swipeable/index.md

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react_main_tsx from './react/react_tsx.md';
5+
import react_main_css from './react/react_css.md';
6+
import vue from './vue.md';
7+
import angular_html from './angular/angular_html.md';
8+
import angular_css from './angular/angular_css.md';
9+
10+
<Playground
11+
version="8"
12+
code={{
13+
javascript,
14+
react: {
15+
files: {
16+
'src/main.tsx': react_main_tsx,
17+
'src/main.css': react_main_css,
18+
},
19+
},
20+
vue,
21+
angular: {
22+
files: {
23+
'src/app/example.component.html': angular_html,
24+
'src/app/example.component.css': angular_css,
25+
},
26+
},
27+
}}
28+
src="usage/v8/segment/swipeable/demo.html"
29+
/>

‎static/usage/v8/segment/swipeable/javascript.md

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
```html
2+
<ion-segment>
3+
<ion-segment-button value="first" content-id="first">
4+
<ion-label>First</ion-label>
5+
</ion-segment-button>
6+
<ion-segment-button value="second" content-id="second">
7+
<ion-label>Second</ion-label>
8+
</ion-segment-button>
9+
<ion-segment-button value="third" content-id="third">
10+
<ion-label>Third</ion-label>
11+
</ion-segment-button>
12+
</ion-segment>
13+
<ion-segment-view>
14+
<ion-segment-content id="first">First</ion-segment-content>
15+
<ion-segment-content id="second">Second</ion-segment-content>
16+
<ion-segment-content id="third">Third</ion-segment-content>
17+
</ion-segment-view>
18+
19+
<style>
20+
ion-segment-view {
21+
height: 150px;
22+
}
23+
24+
ion-segment-content {
25+
display: flex;
26+
align-items: center;
27+
justify-content: center;
28+
}
29+
ion-segment-content:nth-of-type(1) {
30+
background: lightpink;
31+
}
32+
ion-segment-content:nth-of-type(2) {
33+
background: lightblue;
34+
}
35+
ion-segment-content:nth-of-type(3) {
36+
background: lightgreen;
37+
}
38+
</style>
39+
```

0 commit comments

Comments
 (0)