Working with Segment and Chip Components

1. Using IonSegment Component

Property	Values	Description
value	`string`	The value of the segment.
disabled	`true` \| `false`	If true, the segment is disabled.
color	`primary` \| `secondary` \| `tertiary`	The color of the segment.
mode	`ios` \| `md`	The mode determines which platform styles to use.

Example: Basic IonSegment Usage

<ion-segment value="1">
  <ion-segment-button value="1">
    <ion-label>Tab 1</ion-label>
  <ion-segment-button>
  <ion-segment-button value="2">
    <ion-label>Tab 2</ion-label>
  <ion-segment-button>
</ion-segment>

Example: IonSegment with ionChange Event

<ion-segment value="tab1" (ionChange)="onSegmentChange($event)">
  <ion-segment-button value="tab1">
    <ion-label>Home</ion-label>
  <ion-segment-button>
  <ion-segment-button value="tab2">
    <ion-label>Profile</ion-label>
  <ion-segment-button>
</ion-segment>

Note: The ionChange event is emitted when the value of the segment changes.

Warning: Ensure each ion-segment-button has a unique value.

Property	Values	Description
ionChange	`EventEmitter<IonSegmentCustomEvent>`	Emitted when the value of the segment changes.

2. Creating Segment Buttons

Property	Description	Values	Notes
value	Value of the segment button	`string`	Used to identify the selected segment
disabled	Disables the segment button	`true` \| `false`	Prevents interaction with the button
selected	Indicates if the segment is selected	`true` \| `false`	Automatically managed by the segment group

Example: Basic Segment Button

<ion-segment-button value="button1">
  Button 1
</ion-segment-button>

Example: Segment Button with Icon

<ion-segment-button value="button2">
  <ion-icon name="heart"></ion-icon>
  Favorites
</ion-segment-button>

3. Handling Segment Change

Property	Description	Values
value	Current selected segment value	`string`
ionChange	Event emitted when segment value changes	`Event<SegmentCustomEvent>`

Example: Handling Segment Change

import &#123; Component } from &#123;@angular/core&#125;;

@Component(&#123;
  selector: 'app-segment-example',
  template: `
    <ion-segment [(ngModel)]="selectedSegment" (ionChange)="onSegmentChange($event)">
      <ion-segment-button value="1">Segment 1</ion-segment-button>
      <ion-segment-button value="2">Segment 2</ion-segment-button>
    </ion-segment>
  `
&#125;)
export class SegmentExample &#123;
  selectedSegment = '1';

  onSegmentChange(event: SegmentCustomEvent) &#123;
    console.log('Selected segment:', event.detail.value);
  &#125;
&#125;

Note: The ionChange event provides access to the new value via event.detail.value.

4. Styling Segments

Property	Values	Description
--background	`transparent`	Background color of the segment
--color	`var(--ion-color-primary)`	Text color of the segment
--border-radius	`0`	Border radius of the segment
--padding-start	`0`	Padding on the start side of the segment
--padding-end	`0`	Padding on the end side of the segment

Example: Customizing Segment Background

.custom-segment {
  --background: #f0f0f0;
  --color: #333;
}

Example: Rounded Segment

.rounded-segment {
  --border-radius: 20px;
}

5. Using Scrollable Segments

Property	Description	Default	Notes
scrollable	Enables horizontal scrolling for segments	`false`	Set to `true` to enable scrollable segments
size	Size of the segment buttons	`medium`	Options: `small`, `medium`, `large`

Example: Scrollable Segment Usage

<ion-segment scrollable="true">
  <ion-segment-button value="tab1">Tab 1</ion-segment-button>
  <ion-segment-button value="tab2">Tab 2</ion-segment-button>
  <ion-segment-button value="tab3">Tab 3</ion-segment-button>
  <ion-segment-button value="tab4">Tab 4</ion-segment-button>
  <ion-segment-button value="tab5">Tab 5</ion-segment-button>
</ion-segment>

Note: Scrollable segments are useful when you have many segment options that don't fit within the available width.

6. Creating Chips

Chips are small components used to display tags or labels with optional delete functionality. They can be created using the <ion-chip> component.

Property	Values	Description
ion-chip	`boolean`	Applies the chip style to an element.
ion-chip (with icon)	`boolean`	Applies the chip style and includes an icon.
ion-chip (with avatar)	`boolean`	Applies the chip style and includes an avatar image.

Example: Basic Chip

<ion-chip>
  <ion-label>Basic Chip</ion-label>
</ion-chip>

Example: Chip with Icon

<ion-chip>
  <ion-icon name="heart"></ion-icon>
  <ion-label>Liked</ion-label>
</ion-chip>

Example: Chip with Avatar

<ion-chip>
  <ion-avatar>
    <img src="avatar.jpg">
  </ion-avatar>
  <ion-label>John Doe</ion-label>
</ion-chip>

Example: Deletable Chip

<ion-chip>
  <ion-label>Deletable Chip</ion-label>
  <ion-icon name="close-circle"></ion-icon>
</ion-chip>

7. Adding Chip Icons

Property	Values	Description
icon	`string`	The icon name to display inside the chip (from Ionic icons library)
iconStart	`boolean`	Whether to place the icon at the start of the chip (default: true)
iconEnd	`boolean`	Whether to place the icon at the end of the chip (default: false)

Example: Chip with Start Icon

<ion-chip>
  <ion-icon name="heart" slot="start"></ion-icon>
  <ion-label>Heart Chip</ion-label>
</ion-chip>

Example: Chip with End Icon

<ion-chip>
  <ion-label>Tag Chip</ion-label>
  <ion-icon name="close" slot="end"></ion-icon>
</ion-chip>

Note: The slot attribute determines where the icon appears within the chip.

8. Implementing Removable Chips

Property	Values	Description
removable	`true` \| `false`	Controls whether the chip can be removed by the user. Defaults to `false`.
onRemove	Function	Callback function invoked when the chip is removed. Receives the chip's data as an argument.

Example: Basic Removable Chip

<ion-chip removable="true" onRemove="handleRemove">
  <ion-label>Tag</ion-label>
</ion-chip>

Example: Chip with Custom Remove Handler

const handleRemove = (chipData) => {
  console.log("Removing chip:", chipData);
  // Remove from list or state
};

9. Using Chip Outline

Property	Values	Description
outline	`true` \| `false`	Sets the chip to outline style. Default is `false`.

Example: Chip Outline

<ion-chip outline="true">
  <ion-label>Outline Chip</ion-label>
</ion-chip>

Note: The outline property can be used to give chips a more subtle appearance, ideal for less prominent UI elements.

10. Styling Chips

Property	Values	Description
--background	`color`	Background color of the chip
--border-color	`color`	Border color of the chip
--border-radius	`size`	Border radius of the chip
--border-style	`style`	Border style of the chip (e.g., solid, dashed)
--border-width	`size`	Border width of the chip
--color	`color`	Text color of the chip
--height	`size`	Height of the chip
--padding-bottom	`size`	Bottom padding of the chip
--padding-end	`size`	Right padding of the chip
--padding-start	`size`	Left padding of the chip
--padding-top	`size`	Top padding of the chip
--text-transform	`transform`	Text transformation (e.g., uppercase, lowercase)

Example: Custom Chip Styling

.custom-chip {
  --background: #e0f7fa;
  --border-color: #00838f;
  --border-radius: 20px;
  --border-style: solid;
  --border-width: 2px;
  --color: #006064;
  --height: 40px;
  --padding-bottom: 8px;
  --padding-end: 16px;
  --padding-start: 16px;
  --padding-top: 8px;
  --text-transform: uppercase;
}

Note: These CSS variables can be used to customize the appearance of chips in Ionic applications.