@ng-zi/extensions-button-toggle

MtxButtonToggle Component Overview

The MtxButtonToggle component is a wrapper around Angular Material's button toggle component. It provides enhanced features and additional customization options, ensuring seamless integration and usage within your Angular applications.

Basic Button-Toggles

Button toggles can be used to group related options. A button toggle consists of a single button toggle and can be grouped together in a button toggle group.

<mtx-button-toggle-group name="fontStyle" aria-label="Font Style">
  <mtx-button-toggle value="bold">Bold</mtx-button-toggle>
  <mtx-button-toggle value="italic">Italic</mtx-button-toggle>
  <mtx-button-toggle value="underline">Underline</mtx-button-toggle>
</mtx-button-toggle-group>

Exclusive Selection

When appearance is set to standard, the button toggles within the group behave as radio buttons, where only one button can be selected at a time.

<mtx-button-toggle-group name="alignment" aria-label="Text alignment" appearance="standard">
  <mtx-button-toggle value="left">Left</mtx-button-toggle>
  <mtx-button-toggle value="center">Center</mtx-button-toggle>
  <mtx-button-toggle value="right">Right</mtx-button-toggle>
  <mtx-button-toggle value="justify">Justify</mtx-button-toggle>
</mtx-button-toggle-group>

Multiple Selection

When appearance is set to legacy, the button toggles behave as checkboxes, allowing multiple selections.

<mtx-button-toggle-group name="textFormatting" aria-label="Text formatting" appearance="legacy">
  <mtx-button-toggle value="bold">Bold</mtx-button-toggle>
  <mtx-button-toggle value="italic">Italic</mtx-button-toggle>
  <mtx-button-toggle value="underline">Underline</mtx-button-toggle>
</mtx-button-toggle-group>

Vertical Button Toggle Group

Button toggle groups can be displayed vertically by setting the vertical input to true.

<mtx-button-toggle-group vertical>
  <mtx-button-toggle value="left">Left</mtx-button-toggle>
  <mtx-button-toggle value="center">Center</mtx-button-toggle>
  <mtx-button-toggle value="right">Right</mtx-button-toggle>
  <mtx-button-toggle value="justify">Justify</mtx-button-toggle>
</mtx-button-toggle-group>

Appearance Variants

The MtxButtonToggle component supports various appearance options to match different design requirements. The appearance input can be set to legacy or standard.

<mtx-button-toggle-group appearance="legacy">
  <mtx-button-toggle value="bold">Bold</mtx-button-toggle>
  <mtx-button-toggle value="italic">Italic</mtx-button-toggle>
  <mtx-button-toggle value="underline">Underline</mtx-button-toggle>
</mtx-button-toggle-group>

Customizing the Theme

You can customize the theme of the MtxButtonToggle component by using Angular Material’s theming capabilities. This allows you to create a consistent look and feel across your application.

@use '@angular/material' as mat;

.mt-button-toggle-theme {
  @include mat.button-toggle-theme($primary);
}

Additional Features

• Custom Icons: Use custom icons for toggle buttons.
• ARIA Support: Enhanced accessibility features with ARIA roles and attributes.
• Animations: Smooth transitions and animations for better user experience.
• Responsive: Fully responsive design that adapts to various screen sizes.

For more details on configuration options and advanced usage, refer to the API documentation.