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