Skip to content

feat(segment): add playground & docs for segment view #3875

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
Nov 4, 2024
Merged

feat(segment): add playground & docs for segment view #3875

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
de62e3b
feat(segment): add playground & docs for segment view
Nov 1, 2024
517a6ad
fix(segment-view): api import version
Nov 1, 2024
caa1046
fix(segment-content): usage & common API sections
Nov 4, 2024
d2a02c5
Force CI run
Nov 4, 2024
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
16 changes: 16 additions & 0 deletions docs/api/segment-content.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
title: "ion-segment-content"
---

<head>
<title>ion-segment-content: Display control element for swipeable segments</title>
<meta name="description" content="ion-segment-contents are wrapper elements used to control the display of child elements when using swipeable segments." />
</head>

import EncapsulationPill from '@components/page/api/EncapsulationPill';

<EncapsulationPill type="shadow" />

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.
26 changes: 26 additions & 0 deletions docs/api/segment-view.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
---
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';

<head>
<title>ion-segment-view: Controller element for swipeable segments</title>
<meta name="description" content="ion-segment-views are wrapper elements that link a group of segment contents to a segment" />
</head>

import EncapsulationPill from '@components/page/api/EncapsulationPill';

<EncapsulationPill type="shadow" />

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

<Props />

## Events

<Events />
14 changes: 14 additions & 0 deletions docs/api/segment.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,20 @@ import Toolbar from '@site/static/usage/v8/toolbar/segments/index.md';
<Toolbar />


## 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';

<Swipeable />

## Theming

### Colors
Expand Down
2 changes: 1 addition & 1 deletion sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
20 changes: 20 additions & 0 deletions static/usage/v8/segment/swipeable/angular/angular_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
```
18 changes: 18 additions & 0 deletions static/usage/v8/segment/swipeable/angular/angular_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
```html
<ion-segment>
<ion-segment-button value="first" content-id="first">
<ion-label>First</ion-label>
</ion-segment-button>
<ion-segment-button value="second" content-id="second">
<ion-label>Second</ion-label>
</ion-segment-button>
<ion-segment-button value="third" content-id="third">
<ion-label>Third</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment-view>
<ion-segment-content id="first">First</ion-segment-content>
<ion-segment-content id="second">Second</ion-segment-content>
<ion-segment-content id="third">Third</ion-segment-content>
</ion-segment-view>
```
56 changes: 56 additions & 0 deletions static/usage/v8/segment/swipeable/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Segment - Swipeable</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-segment-view {
height: 168px;
}

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;
}
</style>
</head>

<body>
<ion-app>
<ion-content>
<ion-segment>
<ion-segment-button value="first" content-id="first">
<ion-label>First</ion-label>
</ion-segment-button>
<ion-segment-button value="second" content-id="second">
<ion-label>Second</ion-label>
</ion-segment-button>
<ion-segment-button value="third" content-id="third">
<ion-label>Third</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment-view>
<ion-segment-content id="first">First</ion-segment-content>
<ion-segment-content id="second">Second</ion-segment-content>
<ion-segment-content id="third">Third</ion-segment-content>
</ion-segment-view>
</ion-content>
</ion-app>
</body>
</html>
29 changes: 29 additions & 0 deletions static/usage/v8/segment/swipeable/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';

<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_html,
'src/app/example.component.css': angular_css,
},
},
}}
src="usage/v8/segment/swipeable/demo.html"
/>
39 changes: 39 additions & 0 deletions static/usage/v8/segment/swipeable/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
```html
<ion-segment>
<ion-segment-button value="first" content-id="first">
<ion-label>First</ion-label>
</ion-segment-button>
<ion-segment-button value="second" content-id="second">
<ion-label>Second</ion-label>
</ion-segment-button>
<ion-segment-button value="third" content-id="third">
<ion-label>Third</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment-view>
<ion-segment-content id="first">First</ion-segment-content>
<ion-segment-content id="second">Second</ion-segment-content>
<ion-segment-content id="third">Third</ion-segment-content>
</ion-segment-view>

<style>
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;
}
</style>
```
20 changes: 20 additions & 0 deletions static/usage/v8/segment/swipeable/react/react_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
```
30 changes: 30 additions & 0 deletions static/usage/v8/segment/swipeable/react/react_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
```tsx
import React from 'react';
import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/react';

import './main.css';

function Example() {
return (
<>
<IonSegment value="first">
<IonSegmentButton value="first" contentId="first">
<IonLabel>First</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="second" contentId="second">
<IonLabel>Second</IonLabel>
</IonSegmentButton>
<IonSegmentButton value="third" contentId="third">
<IonLabel>Third</IonLabel>
</IonSegmentButton>
</IonSegment>
<IonSegmentView>
<IonSegmentContent id="first">First</IonSegmentContent>
<IonSegmentContent id="second">Second</IonSegmentContent>
<IonSegmentContent id="third">Third</IonSegmentContent>
</IonSegmentView>
</>
);
}
export default Example;
```
50 changes: 50 additions & 0 deletions static/usage/v8/segment/swipeable/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
```html
<template>
<ion-segment>
<ion-segment-button value="first" content-id="first">
<ion-label>First</ion-label>
</ion-segment-button>
<ion-segment-button value="second" content-id="second">
<ion-label>Second</ion-label>
</ion-segment-button>
<ion-segment-button value="third" content-id="third">
<ion-label>Third</ion-label>
</ion-segment-button>
</ion-segment>
<ion-segment-view>
<ion-segment-content id="first">First</ion-segment-content>
<ion-segment-content id="second">Second</ion-segment-content>
<ion-segment-content id="third">Third</ion-segment-content>
</ion-segment-view>
</template>

<style>
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;
}
</style>

<script lang="ts">
import { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView } from '@ionic/vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: { IonLabel, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView },
});
</script>
```