ionic
  1. ionic-segment

Ionic Segment

Ionic segment is a user interface (UI) component that allows users to select a choice from several options. It is designed to present options in a more organized and compact way than other UI components.

Syntax

<ion-segment [(ngModel)]="selectedSegment">
  <ion-segment-button value="button1">
    Button 1
  </ion-segment-button>
  <ion-segment-button value="button2" (ionSelect)="doSomething()">
    Button 2
  </ion-segment-button>
  <ion-segment-button value="button3">
    Button 3
  </ion-segment-button>
</ion-segment>

In the syntax example, we have an ion-segment component with three ion-segment-button elements nested inside it. Each button has its own value and can perform different actions on selection.

Example

<ion-segment [(ngModel)]="selectedAnimal">
  <ion-segment-button value="cat" (ionSelect)="displayAnimal('cat')">
    Cat
  </ion-segment-button>
  <ion-segment-button value="dog" (ionSelect)="displayAnimal('dog')">
    Dog
  </ion-segment-button>
  <ion-segment-button value="bird" (ionSelect)="displayAnimal('bird')">
    Bird
  </ion-segment-button>
</ion-segment>

<ion-card>
  <ion-card-content>
    You selected {{selectedAnimal}}.
  </ion-card-content>
</ion-card>

In this example, we have an ion-segment component with three button options: cat, dog, and bird. Each button performs a different action on selection. When a user selects an option, the displayAnimal function is called, and the selected value is displayed in an ion-card component below the segment.

Output

The output of this example is a UI component that allows the user to select an animal from a list of options. When the user selects an option, the animal name is displayed in an ion-card component below the segment.

Explanation

The ion-segment component is a simple and efficient way to present a list of options to a user. It provides a segmented control with neatly organized buttons. The ngModel directive in the syntax example allows the segment to be bound to an element in the component, which can be used to perform actions based on the selected value.

Use

The ion-segment component is commonly used in Ionic applications for:

  • Selecting filtering options
  • Sorting data
  • Presenting a list of options in a compact form

Important Points

  • The ion-segment component is a simple and efficient way to present a list of options to the user.
  • The ngModel directive is used to bind the segment to an element in the component.
  • The ionSelect event can be used to perform actions when an option is selected.
  • ion-segment is a popular and commonly used UI component in Ionic applications.

Summary

Ionic segment is a UI component that allows users to select a choice from several options. It is designed to present options in a more organized and compact way than other UI components. The ion-segment component is commonly used in Ionic applications for filtering, sorting, and presenting a list of options.

Published on: