From de62e3b32fd177812a4df146747fe0809708c138 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Fri, 1 Nov 2024 10:20:58 -0400 Subject: [PATCH 1/4] feat(segment): add playground & docs for segment view --- docs/api/segment-content.md | 16 ++++++ docs/api/segment-view.md | 26 +++++++++ docs/api/segment.md | 14 +++++ sidebars.js | 2 +- .../segment/swipeable/angular/angular_css.md | 20 +++++++ .../segment/swipeable/angular/angular_html.md | 18 ++++++ static/usage/v8/segment/swipeable/demo.html | 56 +++++++++++++++++++ static/usage/v8/segment/swipeable/index.md | 29 ++++++++++ .../usage/v8/segment/swipeable/javascript.md | 39 +++++++++++++ .../v8/segment/swipeable/react/react_css.md | 20 +++++++ .../v8/segment/swipeable/react/react_tsx.md | 30 ++++++++++ static/usage/v8/segment/swipeable/vue.md | 50 +++++++++++++++++ 12 files changed, 319 insertions(+), 1 deletion(-) create mode 100644 docs/api/segment-content.md create mode 100644 docs/api/segment-view.md create mode 100644 static/usage/v8/segment/swipeable/angular/angular_css.md create mode 100644 static/usage/v8/segment/swipeable/angular/angular_html.md create mode 100644 static/usage/v8/segment/swipeable/demo.html create mode 100644 static/usage/v8/segment/swipeable/index.md create mode 100644 static/usage/v8/segment/swipeable/javascript.md create mode 100644 static/usage/v8/segment/swipeable/react/react_css.md create mode 100644 static/usage/v8/segment/swipeable/react/react_tsx.md create mode 100644 static/usage/v8/segment/swipeable/vue.md diff --git a/docs/api/segment-content.md b/docs/api/segment-content.md new file mode 100644 index 00000000000..07638292d29 --- /dev/null +++ b/docs/api/segment-content.md @@ -0,0 +1,16 @@ +--- +title: "ion-segment-content" +--- + + + ion-segment-content: Display control element for swipeable segments + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +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 +[segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). See our [swipeable segments](./segment.md#swipeable-segments) documentation +for more information on how to use `ion-segment-content`s. \ No newline at end of file diff --git a/docs/api/segment-view.md b/docs/api/segment-view.md new file mode 100644 index 00000000000..aed8e0db104 --- /dev/null +++ b/docs/api/segment-view.md @@ -0,0 +1,26 @@ +--- +title: "ion-segment-view" +--- + +import Props from '@ionic-internal/component-api/v8.3.4-dev.11730395663.1a0f4848/segment-view/props.md'; +import Events from '@ionic-internal/component-api/v8.3.4-dev.11730395663.1a0f4848/segment-view/events.md'; + + + ion-segment-view: Controller element for swipeable segments + + + +import EncapsulationPill from '@components/page/api/EncapsulationPill'; + + + +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. +See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use `ion-segment-view`s. + +## Properties + + + +## Events + + \ No newline at end of file diff --git a/docs/api/segment.md b/docs/api/segment.md index 9fe74f7a326..fd37e99433b 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.md @@ -49,6 +49,20 @@ import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md'; +## Swipeable Segments + +Each [segment button](./segment-button.md) can be associated with a [segment content](./segment-content.md) element that will be displayed +when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated +to reflect the currently visible content. + +If no initial `value` is assigned to the `ion-segment` when using swipeable segment, the segment will default to the value of the first segment button. + +Segment buttons cannot be disabled when used with swipeable segments. + +import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; + + + ## Theming ### Colors diff --git a/sidebars.js b/sidebars.js index 5b125c92e04..5af37c7fce2 100644 --- a/sidebars.js +++ b/sidebars.js @@ -450,7 +450,7 @@ module.exports = { type: 'category', label: 'Segment', collapsed: false, - items: ['api/segment', 'api/segment-button'], + items: ['api/segment', 'api/segment-button', 'api/segment-content', 'api/segment-view'], }, { type: 'category', diff --git a/static/usage/v8/segment/swipeable/angular/angular_css.md b/static/usage/v8/segment/swipeable/angular/angular_css.md new file mode 100644 index 00000000000..dd13ba75999 --- /dev/null +++ b/static/usage/v8/segment/swipeable/angular/angular_css.md @@ -0,0 +1,20 @@ +```css +ion-segment-view { + height: 150px; +} + +ion-segment-content { + display: flex; + align-items: center; + justify-content: center; +} +ion-segment-content:nth-of-type(1) { + background: lightpink; +} +ion-segment-content:nth-of-type(2) { + background: lightblue; +} +ion-segment-content:nth-of-type(3) { + background: lightgreen; +} +``` diff --git a/static/usage/v8/segment/swipeable/angular/angular_html.md b/static/usage/v8/segment/swipeable/angular/angular_html.md new file mode 100644 index 00000000000..0d372f239c5 --- /dev/null +++ b/static/usage/v8/segment/swipeable/angular/angular_html.md @@ -0,0 +1,18 @@ +```html + + + First + + + Second + + + Third + + + + First + Second + Third + +``` diff --git a/static/usage/v8/segment/swipeable/demo.html b/static/usage/v8/segment/swipeable/demo.html new file mode 100644 index 00000000000..cd7b789a00e --- /dev/null +++ b/static/usage/v8/segment/swipeable/demo.html @@ -0,0 +1,56 @@ + + + + + + Segment - Swipeable + + + + + + + + + + + + + + First + + + Second + + + Third + + + + First + Second + Third + + + + + diff --git a/static/usage/v8/segment/swipeable/index.md b/static/usage/v8/segment/swipeable/index.md new file mode 100644 index 00000000000..e19de64f789 --- /dev/null +++ b/static/usage/v8/segment/swipeable/index.md @@ -0,0 +1,29 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react_main_tsx from './react/react_tsx.md'; +import react_main_css from './react/react_css.md'; +import vue from './vue.md'; +import angular_html from './angular/angular_html.md'; +import angular_css from './angular/angular_css.md'; + + diff --git a/static/usage/v8/segment/swipeable/javascript.md b/static/usage/v8/segment/swipeable/javascript.md new file mode 100644 index 00000000000..01308f07a94 --- /dev/null +++ b/static/usage/v8/segment/swipeable/javascript.md @@ -0,0 +1,39 @@ +```html + + + First + + + Second + + + Third + + + + First + Second + Third + + + +``` diff --git a/static/usage/v8/segment/swipeable/react/react_css.md b/static/usage/v8/segment/swipeable/react/react_css.md new file mode 100644 index 00000000000..dd13ba75999 --- /dev/null +++ b/static/usage/v8/segment/swipeable/react/react_css.md @@ -0,0 +1,20 @@ +```css +ion-segment-view { + height: 150px; +} + +ion-segment-content { + display: flex; + align-items: center; + justify-content: center; +} +ion-segment-content:nth-of-type(1) { + background: lightpink; +} +ion-segment-content:nth-of-type(2) { + background: lightblue; +} +ion-segment-content:nth-of-type(3) { + background: lightgreen; +} +``` diff --git a/static/usage/v8/segment/swipeable/react/react_tsx.md b/static/usage/v8/segment/swipeable/react/react_tsx.md new file mode 100644 index 00000000000..e571d9c793e --- /dev/null +++ b/static/usage/v8/segment/swipeable/react/react_tsx.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/react'; + +import './main.css'; + +function Example() { + return ( + <> + + + First + + + Second + + + Third + + + + First + Second + Third + + + ); +} +export default Example; +``` diff --git a/static/usage/v8/segment/swipeable/vue.md b/static/usage/v8/segment/swipeable/vue.md new file mode 100644 index 00000000000..ea28874f811 --- /dev/null +++ b/static/usage/v8/segment/swipeable/vue.md @@ -0,0 +1,50 @@ +```html + + + + + +``` From 517a6adb01e837557c361ad37f1a2714afc0713b Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Fri, 1 Nov 2024 10:29:49 -0400 Subject: [PATCH 2/4] fix(segment-view): api import version --- docs/api/segment-view.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/api/segment-view.md b/docs/api/segment-view.md index aed8e0db104..b9eebd4615c 100644 --- a/docs/api/segment-view.md +++ b/docs/api/segment-view.md @@ -2,8 +2,8 @@ title: "ion-segment-view" --- -import Props from '@ionic-internal/component-api/v8.3.4-dev.11730395663.1a0f4848/segment-view/props.md'; -import Events from '@ionic-internal/component-api/v8.3.4-dev.11730395663.1a0f4848/segment-view/events.md'; +import Props from '@ionic-internal/component-api/v8/segment-view/props.md'; +import Events from '@ionic-internal/component-api/v8/segment-view/events.md'; ion-segment-view: Controller element for swipeable segments From caa10464aed488d8b7110bc3ba40a4dea0617216 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Mon, 4 Nov 2024 10:35:07 -0500 Subject: [PATCH 3/4] fix(segment-content): usage & common API sections --- docs/api/segment-content.md | 38 ++++++++++++++++++++++++++++++++++++- docs/api/segment-view.md | 20 ++++++++++++++++--- docs/api/segment.md | 4 +++- 3 files changed, 57 insertions(+), 5 deletions(-) diff --git a/docs/api/segment-content.md b/docs/api/segment-content.md index 07638292d29..3c17b07eceb 100644 --- a/docs/api/segment-content.md +++ b/docs/api/segment-content.md @@ -2,6 +2,13 @@ title: "ion-segment-content" --- +import Props from '@ionic-internal/component-api/v8/segment-content/props.md'; +import Events from '@ionic-internal/component-api/v8/segment-content/events.md'; +import Methods from '@ionic-internal/component-api/v8/segment-content/methods.md'; +import Parts from '@ionic-internal/component-api/v8/segment-content/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/segment-content/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/segment-content/slots.md'; + ion-segment-content: Display control element for swipeable segments @@ -13,4 +20,33 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 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 [segment view](./segment-view.md) instance that is linked to a [segment](./segment.md). See our [swipeable segments](./segment.md#swipeable-segments) documentation -for more information on how to use `ion-segment-content`s. \ No newline at end of file +for more information on how to use segment contents. + +## Usage + +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 +[contentId property](./segment-button.md#properties). + + + +import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; + + + +## Properties + + +## Events + + +## Methods + + +## CSS Shadow Parts + + +## CSS Custom Properties + + +## Slots + \ No newline at end of file diff --git a/docs/api/segment-view.md b/docs/api/segment-view.md index b9eebd4615c..5d0054c4ff8 100644 --- a/docs/api/segment-view.md +++ b/docs/api/segment-view.md @@ -4,6 +4,10 @@ title: "ion-segment-view" import Props from '@ionic-internal/component-api/v8/segment-view/props.md'; import Events from '@ionic-internal/component-api/v8/segment-view/events.md'; +import Methods from '@ionic-internal/component-api/v8/segment-view/methods.md'; +import Parts from '@ionic-internal/component-api/v8/segment-view/parts.md'; +import CustomProps from '@ionic-internal/component-api/v8/segment-view/custom-props.mdx'; +import Slots from '@ionic-internal/component-api/v8/segment-view/slots.md'; ion-segment-view: Controller element for swipeable segments @@ -15,12 +19,22 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; 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. -See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use `ion-segment-view`s. +See our [swipeable segments](./segment.md#swipeable-segments) documentation for more information on how to use segment views. ## Properties - ## Events + + +## Methods + + +## CSS Shadow Parts + + +## CSS Custom Properties + - \ No newline at end of file +## Slots + \ No newline at end of file diff --git a/docs/api/segment.md b/docs/api/segment.md index fd37e99433b..f07a1a1a5a4 100644 --- a/docs/api/segment.md +++ b/docs/api/segment.md @@ -55,9 +55,11 @@ Each [segment button](./segment-button.md) can be associated with a [segment con when the segment is active. With this approach, each segment's content can be swiped or scrolled between and the segment will be updated to reflect the currently visible content. -If no initial `value` is assigned to the `ion-segment` when using swipeable segment, the segment will default to the value of the first segment button. +:::warning +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. Segment buttons cannot be disabled when used with swipeable segments. +::: import Swipeable from '@site/static/usage/v8/segment/swipeable/index.md'; From d2a02c5ab2021f24e1225ce55ebb099fbb52cdb5 Mon Sep 17 00:00:00 2001 From: Tanner Reits Date: Mon, 4 Nov 2024 16:35:17 -0500 Subject: [PATCH 4/4] Force CI run