Mat Slide Toggle Vertical - CSS

The Mat Slide Toggle Vertical is a UI component that adds a toggle switch to your web page. It is built using Material Design and adds a touch of modernity to your web design. This toggle switch allows users to turn a feature on or off, making it a key element in UI/UX design.

Implementation

To implement the Mat Slide Toggle Vertical in your web application, follow the steps below:

1. Import CSS

Add the following CSS to your HTML file to style the toggle switch:

.mat-slide-toggle-vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 50px;
  position: relative;
}

.mat-slide-toggle-vertical .mat-slide-toggle-bar {
  transform: rotate(90deg);
}

.mat-slide-toggle-vertical .mat-slide-toggle-thumb {
  top: 0;
  left: 0;
}

2. Add HTML

Add the following HTML code to your web page to create the toggle switch:

<mat-slide-toggle class="mat-slide-toggle-vertical"></mat-slide-toggle>

3. Add Angular Material

To use the Mat Slide Toggle Vertical component, you need to import Angular Material in your Angular application. To do this, run the following command:

ng add @angular/material

This will install Angular Material and add it to your Angular application.

Usage

Once you have implemented the Mat Slide Toggle Vertical, you can use it to add toggle switches to your web page. Simply add the HTML code to your web page and style it using CSS.

Conclusion

The Mat Slide Toggle Vertical is a simple yet effective UI component that adds a touch of modernity to your web design. It is easy to implement and can be used for a variety of purposes. So, go ahead and add this component to your web application today!