ion-segment-button

Segment buttons are groups of related buttons inside of a Segment. They are displayed in a horizontal row. A segment button can be checked by default by setting the value of the segment to the value of the segment button. Only one segment button can be selected at a time.

Usage

Angular

<!-- Segment buttons with text and click listener -->
<ion-segment (ionChange)="segmentChanged($event)">
  <ion-segment-button>
    <ion-label>Friends</ion-label>
  </ion-segment-button>
  <ion-segment-button>
    <ion-label>Enemies</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Segment buttons with the first checked and the last disabled -->
<ion-segment value="paid">
  <ion-segment-button value="paid">
    <ion-label>Paid</ion-label>
  </ion-segment-button>
  <ion-segment-button value="free">
    <ion-label>Free</ion-label>
  </ion-segment-button>
  <ion-segment-button disabled value="top">
    <ion-label>Top</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Segment buttons with values and icons -->
<ion-segment>
  <ion-segment-button value="camera">
    <ion-icon name="camera"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="bookmark">
    <ion-icon name="bookmark"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Segment with a value that checks the last button -->
<ion-segment value="shared">
  <ion-segment-button value="bookmarks">
    <ion-label>Bookmarks</ion-label>
  </ion-segment-button>
  <ion-segment-button value="reading">
    <ion-label>Reading List</ion-label>
  </ion-segment-button>
  <ion-segment-button value="shared">
    <ion-label>Shared Links</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Label only -->
<ion-segment value="1">
  <ion-segment-button value="1">
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Icon only -->
<ion-segment value="heart">
  <ion-segment-button value="call">
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart">
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin">
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon top -->
<ion-segment value="2">
  <ion-segment-button value="1">
    <ion-label>Item One</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Item Two</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Item Three</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon bottom -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-bottom">
    <ion-icon name="call"></ion-icon>
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2" layout="icon-bottom">
    <ion-icon name="heart"></ion-icon>
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-bottom">
    <ion-icon name="pin"></ion-icon>
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Icon start -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-start">
    <ion-label>Item One</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="2" layout="icon-start">
    <ion-label>Item Two</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-start">
    <ion-label>Item Three</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon end -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-end">
    <ion-icon name="call"></ion-icon>
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2" disabled layout="icon-end">
    <ion-icon name="heart"></ion-icon>
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-end">
    <ion-icon name="pin"></ion-icon>
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

import { Component } from '@angular/core';

@Component({
  selector: 'segment-button-example',
  templateUrl: 'segment-button-example.html',
  styleUrls: ['./segment-button-example.css'],
})
export class SegmentButtonExample {
  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }
}

Javascript

<!-- Segment buttons with text -->
<ion-segment>
  <ion-segment-button>
    <ion-label>Friends</ion-label>
  </ion-segment-button>
  <ion-segment-button>
    <ion-label>Enemies</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Segment buttons with the first checked and the last disabled -->
<ion-segment value="paid">
  <ion-segment-button value="paid">
    <ion-label>Paid</ion-label>
  </ion-segment-button>
  <ion-segment-button value="free">
    <ion-label>Free</ion-label>
  </ion-segment-button>
  <ion-segment-button disabled value="top">
    <ion-label>Top</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Segment buttons with values and icons -->
<ion-segment>
  <ion-segment-button value="camera">
    <ion-icon name="camera"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="bookmark">
    <ion-icon name="bookmark"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Segment with a value that checks the last button -->
<ion-segment value="shared">
  <ion-segment-button value="bookmarks">
    <ion-label>Bookmarks</ion-label>
  </ion-segment-button>
  <ion-segment-button value="reading">
    <ion-label>Reading List</ion-label>
  </ion-segment-button>
  <ion-segment-button value="shared">
    <ion-label>Shared Links</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Label only -->
<ion-segment value="1">
  <ion-segment-button value="1">
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Icon only -->
<ion-segment value="heart">
  <ion-segment-button value="call">
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="heart">
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="pin">
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon top -->
<ion-segment value="2">
  <ion-segment-button value="1">
    <ion-label>Item One</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Item Two</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="3">
    <ion-label>Item Three</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon bottom -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-bottom">
    <ion-icon name="call"></ion-icon>
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2" layout="icon-bottom">
    <ion-icon name="heart"></ion-icon>
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-bottom">
    <ion-icon name="pin"></ion-icon>
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

<!-- Icon start -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-start">
    <ion-label>Item One</ion-label>
    <ion-icon name="call"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="2" layout="icon-start">
    <ion-label>Item Two</ion-label>
    <ion-icon name="heart"></ion-icon>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-start">
    <ion-label>Item Three</ion-label>
    <ion-icon name="pin"></ion-icon>
  </ion-segment-button>
</ion-segment>

<!-- Icon end -->
<ion-segment value="1">
  <ion-segment-button value="1" layout="icon-end">
    <ion-icon name="call"></ion-icon>
    <ion-label>Item One</ion-label>
  </ion-segment-button>
  <ion-segment-button value="2" disabled layout="icon-end">
    <ion-icon name="heart"></ion-icon>
    <ion-label>Item Two</ion-label>
  </ion-segment-button>
  <ion-segment-button value="3" layout="icon-end">
    <ion-icon name="pin"></ion-icon>
    <ion-label>Item Three</ion-label>
  </ion-segment-button>
</ion-segment>

// Listen for ionChange on segment
const segment = document.querySelector('ion-segment');
segment.addEventListener('ionChange', (ev) => {
  console.log('Segment changed', ev);
});

React

import React from 'react';
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonIcon,
} from '@ionic/react';
import { call, camera, bookmark, heart, pin } from 'ionicons/icons';

export const SegmentButtonExamples: React.FC = () => {
  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>SegmentButton</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        {/*-- Segment buttons with text and click listener --*/}
        <IonSegment onIonChange={(e) => console.log(`${e.detail.value} segment selected`)}>
          <IonSegmentButton value="Friends">
            <IonLabel>Friends</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="Enemies">
            <IonLabel>Enemies</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Segment buttons with the first checked and the last disabled --*/}
        <IonSegment value="paid">
          <IonSegmentButton value="paid">
            <IonLabel>Paid</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="free">
            <IonLabel>Free</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton disabled value="top">
            <IonLabel>Top</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Segment buttons with values and icons --*/}
        <IonSegment>
          <IonSegmentButton value="camera">
            <IonIcon icon={camera} />
          </IonSegmentButton>
          <IonSegmentButton value="bookmark">
            <IonIcon icon={bookmark} />
          </IonSegmentButton>
        </IonSegment>

        {/*-- Segment with a value that checks the last button --*/}
        <IonSegment value="shared">
          <IonSegmentButton value="bookmarks">
            <IonLabel>Bookmarks</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="reading">
            <IonLabel>Reading List</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="shared">
            <IonLabel>Shared Links</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Label only --*/}
        <IonSegment value="1">
          <IonSegmentButton value="1">
            <IonLabel>Item One</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="2">
            <IonLabel>Item Two</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="3">
            <IonLabel>Item Three</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Icon only --*/}
        <IonSegment value="heart">
          <IonSegmentButton value="call">
            <IonIcon icon={call} />
          </IonSegmentButton>
          <IonSegmentButton value="heart">
            <IonIcon icon={heart} />
          </IonSegmentButton>
          <IonSegmentButton value="pin">
            <IonIcon icon={pin} />
          </IonSegmentButton>
        </IonSegment>

        {/*-- Icon top --*/}
        <IonSegment value="2">
          <IonSegmentButton value="1">
            <IonLabel>Item One</IonLabel>
            <IonIcon icon={call} />
          </IonSegmentButton>
          <IonSegmentButton value="2">
            <IonLabel>Item Two</IonLabel>
            <IonIcon icon={heart} />
          </IonSegmentButton>
          <IonSegmentButton value="3">
            <IonLabel>Item Three</IonLabel>
            <IonIcon icon={pin} />
          </IonSegmentButton>
        </IonSegment>

        {/*-- Icon bottom --*/}
        <IonSegment value="1">
          <IonSegmentButton value="1" layout="icon-bottom">
            <IonIcon icon={call} />
            <IonLabel>Item One</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="2" layout="icon-bottom">
            <IonIcon icon={heart} />
            <IonLabel>Item Two</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="3" layout="icon-bottom">
            <IonIcon icon={pin} />
            <IonLabel>Item Three</IonLabel>
          </IonSegmentButton>
        </IonSegment>

        {/*-- Icon start --*/}
        <IonSegment value="1">
          <IonSegmentButton value="1" layout="icon-start">
            <IonLabel>Item One</IonLabel>
            <IonIcon icon={call} />
          </IonSegmentButton>
          <IonSegmentButton value="2" layout="icon-start">
            <IonLabel>Item Two</IonLabel>
            <IonIcon icon={heart} />
          </IonSegmentButton>
          <IonSegmentButton value="3" layout="icon-start">
            <IonLabel>Item Three</IonLabel>
            <IonIcon icon={pin} />
          </IonSegmentButton>
        </IonSegment>

        {/*-- Icon end --*/}
        <IonSegment value="1">
          <IonSegmentButton value="1" layout="icon-end">
            <IonIcon icon={call} />
            <IonLabel>Item One</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="2" disabled layout="icon-end">
            <IonIcon icon={heart} />
            <IonLabel>Item Two</IonLabel>
          </IonSegmentButton>
          <IonSegmentButton value="3" layout="icon-end">
            <IonIcon icon={pin} />
            <IonLabel>Item Three</IonLabel>
          </IonSegmentButton>
        </IonSegment>
      </IonContent>
    </IonPage>
  );
};

Stencil

import { Component, h } from '@stencil/core';

@Component({
  tag: 'segment-button-example',
  styleUrl: 'segment-button-example.css',
})
export class SegmentButtonExample {
  segmentChanged(ev: any) {
    console.log('Segment changed', ev);
  }

  render() {
    return [
      // Segment buttons with text and click listener
      <ion-segment onIonChange={(ev) => this.segmentChanged(ev)}>
        <ion-segment-button>
          <ion-label>Friends</ion-label>
        </ion-segment-button>
        <ion-segment-button>
          <ion-label>Enemies</ion-label>
        </ion-segment-button>
      </ion-segment>,

      // Segment buttons with the first checked and the last disabled
      <ion-segment value="paid">
        <ion-segment-button value="paid">
          <ion-label>Paid</ion-label>
        </ion-segment-button>
        <ion-segment-button value="free">
          <ion-label>Free</ion-label>
        </ion-segment-button>
        <ion-segment-button disabled value="top">
          <ion-label>Top</ion-label>
        </ion-segment-button>
      </ion-segment>,

      // Segment buttons with values and icons
      <ion-segment>
        <ion-segment-button value="camera">
          <ion-icon name="camera"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="bookmark">
          <ion-icon name="bookmark"></ion-icon>
        </ion-segment-button>
      </ion-segment>,

      // Segment with a value that checks the last button
      <ion-segment value="shared">
        <ion-segment-button value="bookmarks">
          <ion-label>Bookmarks</ion-label>
        </ion-segment-button>
        <ion-segment-button value="reading">
          <ion-label>Reading List</ion-label>
        </ion-segment-button>
        <ion-segment-button value="shared">
          <ion-label>Shared Links</ion-label>
        </ion-segment-button>
      </ion-segment>,

      // Label only
      <ion-segment value="1">
        <ion-segment-button value="1">
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button value="2">
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button value="3">
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>,

      // Icon only
      <ion-segment value="heart">
        <ion-segment-button value="call">
          <ion-icon name="call"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="heart">
          <ion-icon name="heart"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="pin">
          <ion-icon name="pin"></ion-icon>
        </ion-segment-button>
      </ion-segment>,

      // Icon top
      <ion-segment value="2">
        <ion-segment-button value="1">
          <ion-label>Item One</ion-label>
          <ion-icon name="call"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="2">
          <ion-label>Item Two</ion-label>
          <ion-icon name="heart"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="3">
          <ion-label>Item Three</ion-label>
          <ion-icon name="pin"></ion-icon>
        </ion-segment-button>
      </ion-segment>,

      // Icon bottom
      <ion-segment value="1">
        <ion-segment-button value="1" layout="icon-bottom">
          <ion-icon name="call"></ion-icon>
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button value="2" layout="icon-bottom">
          <ion-icon name="heart"></ion-icon>
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button value="3" layout="icon-bottom">
          <ion-icon name="pin"></ion-icon>
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>,

      // Icon start
      <ion-segment value="1">
        <ion-segment-button value="1" layout="icon-start">
          <ion-label>Item One</ion-label>
          <ion-icon name="call"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="2" layout="icon-start">
          <ion-label>Item Two</ion-label>
          <ion-icon name="heart"></ion-icon>
        </ion-segment-button>
        <ion-segment-button value="3" layout="icon-start">
          <ion-label>Item Three</ion-label>
          <ion-icon name="pin"></ion-icon>
        </ion-segment-button>
      </ion-segment>,

      // Icon end
      <ion-segment value="1">
        <ion-segment-button value="1" layout="icon-end">
          <ion-icon name="call"></ion-icon>
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button value="2" disabled layout="icon-end">
          <ion-icon name="heart"></ion-icon>
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button value="3" layout="icon-end">
          <ion-icon name="pin"></ion-icon>
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>,
    ];
  }
}

Vue

<template>
  <!-- Segment buttons with text and click listener -->
  <ion-segment @ionChange="segmentChanged($event)">
    <ion-segment-button>
      <ion-label>Friends</ion-label>
    </ion-segment-button>
    <ion-segment-button>
      <ion-label>Enemies</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!-- Segment buttons with the first checked and the last disabled -->
  <ion-segment value="paid">
    <ion-segment-button value="paid">
      <ion-label>Paid</ion-label>
    </ion-segment-button>
    <ion-segment-button value="free">
      <ion-label>Free</ion-label>
    </ion-segment-button>
    <ion-segment-button disabled value="top">
      <ion-label>Top</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!-- Segment buttons with values and icons -->
  <ion-segment>
    <ion-segment-button value="camera">
      <ion-icon :icon="camera"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="bookmark">
      <ion-icon :icon="bookmark"></ion-icon>
    </ion-segment-button>
  </ion-segment>

  <!-- Segment with a value that checks the last button -->
  <ion-segment value="shared">
    <ion-segment-button value="bookmarks">
      <ion-label>Bookmarks</ion-label>
    </ion-segment-button>
    <ion-segment-button value="reading">
      <ion-label>Reading List</ion-label>
    </ion-segment-button>
    <ion-segment-button value="shared">
      <ion-label>Shared Links</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!-- Label only -->
  <ion-segment value="1">
    <ion-segment-button value="1">
      <ion-label>Item One</ion-label>
    </ion-segment-button>
    <ion-segment-button value="2">
      <ion-label>Item Two</ion-label>
    </ion-segment-button>
    <ion-segment-button value="3">
      <ion-label>Item Three</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!-- Icon only -->
  <ion-segment value="heart">
    <ion-segment-button value="call">
      <ion-icon :icon="call"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="heart">
      <ion-icon :icon="heart"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="pin">
      <ion-icon :icon="pin"></ion-icon>
    </ion-segment-button>
  </ion-segment>

  <!-- Icon top -->
  <ion-segment value="2">
    <ion-segment-button value="1">
      <ion-label>Item One</ion-label>
      <ion-icon :icon="call"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="2">
      <ion-label>Item Two</ion-label>
      <ion-icon :icon="heart"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="3">
      <ion-label>Item Three</ion-label>
      <ion-icon :icon="pin"></ion-icon>
    </ion-segment-button>
  </ion-segment>

  <!-- Icon bottom -->
  <ion-segment value="1">
    <ion-segment-button value="1" layout="icon-bottom">
      <ion-icon :icon="call"></ion-icon>
      <ion-label>Item One</ion-label>
    </ion-segment-button>
    <ion-segment-button value="2" layout="icon-bottom">
      <ion-icon :icon="heart"></ion-icon>
      <ion-label>Item Two</ion-label>
    </ion-segment-button>
    <ion-segment-button value="3" layout="icon-bottom">
      <ion-icon :icon="pin"></ion-icon>
      <ion-label>Item Three</ion-label>
    </ion-segment-button>
  </ion-segment>

  <!-- Icon start -->
  <ion-segment value="1">
    <ion-segment-button value="1" layout="icon-start">
      <ion-label>Item One</ion-label>
      <ion-icon :icon="call"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="2" layout="icon-start">
      <ion-label>Item Two</ion-label>
      <ion-icon :icon="heart"></ion-icon>
    </ion-segment-button>
    <ion-segment-button value="3" layout="icon-start">
      <ion-label>Item Three</ion-label>
      <ion-icon :icon="pin"></ion-icon>
    </ion-segment-button>
  </ion-segment>

  <!-- Icon end -->
  <ion-segment value="1">
    <ion-segment-button value="1" layout="icon-end">
      <ion-icon :icon="call"></ion-icon>
      <ion-label>Item One</ion-label>
    </ion-segment-button>
    <ion-segment-button value="2" disabled layout="icon-end">
      <ion-icon :icon="heart"></ion-icon>
      <ion-label>Item Two</ion-label>
    </ion-segment-button>
    <ion-segment-button value="3" layout="icon-end">
      <ion-icon :icon="pin"></ion-icon>
      <ion-label>Item Three</ion-label>
    </ion-segment-button>
  </ion-segment>
</template>

<script lang="ts">
  import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
  import { bookmark, call, camera, heart, pin } from 'ionicons/icons';
  import { defineComponent } from 'vue';

  export default defineComponent({
    components: { IonIcon, IonLabel, IonSegment, IonSegmentButtonr },
    methods: {
      segmentChanged(ev: CustomEvent) {
        console.log('Segment changed', ev);
      }
    }
    setup() {
      return {
        bookmark,
        call,
        camera,
        heart,
        pin
      }
    }
  });
</script>

Properties

disabled

Description	trueの場合、ユーザーはセグメントボタンを操作することができません。
Attribute	disabled
Type	boolean
Default	false

layout

Description	セグメント内のテキストとアイコンのレイアウトを設定します。
Attribute	layout
Type	"icon-bottom" ｜ "icon-end" ｜ "icon-hide" ｜ "icon-start" ｜ "icon-top" ｜ "label-hide" ｜ undefined
Default	'icon-top'

mode

Description	modeは、どのプラットフォームのスタイルを使用するかを決定します。
Attribute	mode
Type	"ios" ｜ "md"
Default	undefined

type

Description	ボタンの種類です。
Attribute	type
Type	"button" ｜ "reset" ｜ "submit"
Default	'button'

value

Description	セグメントボタンの値です。
Attribute	value
Type	string
Default	'ion-sb-' + (ids++)

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

Name	Description
indicator	チェックしたセグメントボタンに表示されるインジケーターです。
indicator-background	チェックしたセグメントボタンに表示されるインジケータの背景要素です。
native	すべての子要素を包むネイティブ HTML ボタン要素。

CSS Custom Properties

Name	Description
--background	セグメントボタンの背景
--background-checked	チェックしたセグメントボタンの背景
--background-focused	タブキーでフォーカスされたときのセグメントボタンの背景
--background-focused-opacity	タブキーでフォーカスしたときのセグメントボタンの背景の不透明度
--background-hover	セグメントボタンがホバーされたときの背景
--background-hover-opacity	ホバー時のセグメントボタンの背景の不透明度
--border-color	セグメントボタンのボーダーの色
--border-radius	セグメントボタンのボーダーの半径
--border-style	セグメントボタンのボーダーのスタイル
--border-width	セグメントボタンの枠の幅
--color	セグメントボタンの色
--color-checked	チェックしたセグメントボタンの色
--color-focused	タブキーでフォーカスしたときのセグメントボタンの色
--color-hover	ホバー時のセグメントボタンの色
--indicator-box-shadow	チェックしたセグメントボタンのインジケーターにボックスシャドウを付ける
--indicator-color	チェックしたセグメントボタンのインジケーターの色
--indicator-height	チェックしたセグメントボタンのインジケータの高さ
--indicator-transform	チェックされたセグメントボタンのインジケータのトランスフォーム
--indicator-transition	チェックしたセグメントボタンのインジケーターの遷移
--margin-bottom	セグメントボタンのBottom Margin
--margin-end	セグメントボタンの方向が左から右の場合はRight Margin、右から左の場合はLeft Margin
--margin-start	セグメントボタンの方向が左から右の場合はLeft Margin、右から左の場合はRight Margin
--margin-top	セグメントボタンのTop Margin
--padding-bottom	セグメントボタンのBottom Padding
--padding-end	セグメントボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-start	セグメントボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-top	セグメントボタンのTop Padding
--transition	セグメントボタンの遷移

Slots

No slots available for this component.