Menu
I have a mat-button-toggle-group with 6 button-toggles.
On Desktop all Buttons should be in one line. On smaller screens the group should break and display 2 lines of buttons like this:
This is my code so far (i'm using flexbox-grid):
<mat-button-toggle-group class="col-xs-12">
<mat-button-toggle class="col-xs-4 col-lg-2" value="1">1 Monat</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="3">3 Monate</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="6">6 Monate</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="12">1 Jahr</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="60">5 Jahre</mat-button-toggle>
<mat-button-toggle class="col-xs-4 col-lg-2" value="120">10 Jahre</mat-button-toggle>
</mat-button-toggle-group>
If works fine on desktop, but on mobile screen size, there are only 3 Buttons visible (the three that should be in the second line are not visible):
How can I get my mat-button-toggle-group to break into two lines?
918
First, install the angular material using the above-mentioned command. After completing the installation, Import ‘MatButtonToggleModule,’ from ‘@angular/material’ in the app.module.ts file. Then use <mat-button-toggle-group> and </mat-button-toggle> tags to create angular button toggle group.
To build toggle buttons in angular, we will use the profound angular material library. You will be given code examples of various types of toggle buttons using the mat-button-toggle-group attribute. Ideally, the mat-button-toggle property is used to invoke on/off toggles with resemblance to a normal button.
<mat-button-toggle> are on/off toggles with the appearance of a button. These toggles can be configured to behave as either radio-buttons or checkboxes. While they can be standalone, they are typically part of a mat-button-toggle-group. By default, mat-button-toggle-group acts like a radio-button group- only one item can be selected.
Here is my favorite way of creating a responsive Navigation Bar in Angular. If you use Angular 6, make sure you use a version 6.1+ 1) Install necessary packages. Type in your terminal: npm install --save @angular/material @angular/cdk @angular/animations npm install @angular/flex-layout --save
You have to set the flex-wrap property to wrap for the toggle-group element:
mat-button-toggle-group {
flex-wrap: wrap;
}
Then just fix up the borders as you please.
159
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
