<div fxLayout='row' fxLayoutGap='10px' >
<button mat-raised-button class="mapButton" [disabled]="!isMapLoaded" (click)="optionsView=true">
<mat-icon svgIcon="measureOption"></mat-icon>
</button>
<div fxLayout='row' fxLayoutGap='10px' [ngClass]="optionsView? 'optionList1':'optionList'"
(mouseleave)="optionsView=false">
<div>
<mat-button-toggle #toolMeasureLine value="measure_line" matTooltip="Strecke messen" [disabled]="!isMapLoaded" (change)="onMeasureValChange($event.value)" aria-label="Distanz messen" class="toggleButton">
<mat-icon class="measureButtonLine" >lm</mat-icon>
</mat-button-toggle>
</div>
<div >
<mat-button-toggle #toolMeasureArea value="measure_area" matTooltip="Fläche messen" [disabled]="!isMapLoaded" (change)="onMeasureValChange($event.value)" aria-label="Fläche messen" class="toggleButton">
<mat-icon class="measureButtonPolygon">am</mat-icon>
</mat-button-toggle>
</div>
</div>
</div>
how can i get if i click the mat-button-toggle and the icon in mat-icon at top change?
and after i click the mat-icon again become normal again.
any ideas?
Related
For some reason when I added the third button, the buttons started showing in a column manner.
html:
<div class="creator-button-container" *ngIf="isCurrentUserTheChannelCreator">
<div *ngIf="isChannelEditable">
<button mat-raised-button color="accent" type="button" (click)="openDialog()">Add field </button>
<div *ngIf="isChannelReadyForBids">
<button mat-raised-button color="accent" type="button" (click)="setState('in progress')">Open the channel for
bidding
</button>
</div>
<button mat-raised-button color="accent" type="submit">Save Channel</button>
</div>
<div *ngIf="form.value.state=='in progress'&&userId === channel.creator">
<button mat-raised-button color="accent" type="button" (click)="setState('new')">Edit channel </button>
</div>
</div>
css:
.creator-button-container{
background-color: red;
display: inline-block;
flex-direction: row;
}
I though the 'display: inline-block' would work but its not working
I looked at this solution but i didnt understand it: Angular - display buttons in rows of two
its weird because as soon as i added the third button, the buttons started being displayed as a column
Add buttons in div tag because div is block level element.
Something like this:
<div>
<div><button class="btn">B1</button></div>
<div><button class="btn">B2</button></div>
<div><button class="btn">B3</button></div>
</div>
I use DevExtreme with Vue.js
I am working on converting the Vuetify UI component to the DevExtreme UI component
I want to add a pop-up in the page, but the pop-up doesn't work normally.
A pop-up tag was created, but the content was empty inside the tag.
I tried many ways, but I couldn't find a solution. help me
This is tag state
<div data-app="true" class="v-application--is--ltr theme--light" id="app">
<div class="v-application--wrap"> ...page content... </div>
<!-- popup -->
<div>
<div class="dx-overlay dx-popup dx-widget dx-visibility-change-handler">
<div class="dx-overlay-content dx-popup-nomal" tabindex="0" style="width: 800px; height: 600px;">
<div class="dx-popup-content"></div>
</div>
</div>
</div>
</div>
This is code
<dx-popup v-model="isOpen" :visible="isOpen" :width="width" :height="height" :show-title="false" :show-close-button="false">
<div ref="dialog" class="u-dialog">
<u-layout height="*">
<u-layout ref="dialogTitle" class="u-dialog-header">
<div class="pa-0 text-right">
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen_exit</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent"
v-if="!isFullScreen && fullScreen"
#click="setFullScreen()"
>
<v-icon color="white">fullscreen</v-icon>
</v-btn>
<v-btn depressed small icon class="mr-1" color="transparent" #click="closeButtonClick()">
<v-icon color="white">close</v-icon>
</v-btn>
</div>
</u-layout>
<u-layout ref="dialogContent" height="*" class="u-dialog-content">
<component ref="comp" :is="loader" :param="paramData" :code-map="popup.codeMap" #resolve="resolve" #reject="reject"/>
</u-layout>
</u-layout>
</div>
</dx-popup>
I have an Angular 11 project with a custom dropdown component which uses mat-menu for showing dropdown items.
I am passing a mat-button inside this dropdown component (along with the other menu items) that isn't working properly. When I add color="accent" mat-button's background-color doesn't change. Or rather, ._theming.scss is not adding the background-color property.
Kindly note that I have already imported MatButtonModule everywhere and it's working everywhere else in the project but in mat-menus.
This is dropdown.component.html:
//this button is not the one I'm talking about, this is just the button which opens and closes
the dropdown custom component and accepts an arrow, a title, and an icon
<button
mat-button
disableRipple
[ngClass]="{ 'is-open': isOpen, 'no-arrow': !hasArrow }"
[matMenuTriggerFor]="theMenu"
(menuOpened)="onMenuOpen($event)"
(menuClosed)="onMenuClose($event)"
#theMenuTrigger
>
<ng-container *ngIf="hasIcon">
<mat-icon svgIcon="{{ icon }}">{{ icon }}</mat-icon>
</ng-container>
<div *ngIf="!!title">{{ title }}</div>
<ng-container *ngIf="hasArrow"
><mat-icon
[ngClass]="{ 'is-open': isOpen }"
svgIcon="arrow-down"
class="icon-arrow__down"
></mat-icon
></ng-container>
</button>
<mat-menu #theMenu="matMenu" class="dropdown-menu">
<ng-content></ng-content>
</mat-menu>
And this is my navbar.component.html where I'm using the dropdown component:
<dropdown-menu title="حساب کاربری" icon="profile" [hasArrow]="true">
<div class="container__welcome--user">
<span
mat-menu-item
disabled
class="navbar__personal-info-item text__welcome--user"
>
<mat-icon
svgIcon="profile"
aria-hidden="false"
aria-label="profile SVG icon"
></mat-icon>
سلام، {{ personalInfo }}</span
>
<span
mat-menu-item
disabled
class="navbar__personal-info-item email"
*ngIf="!!traderEmail"
>{{ traderEmail }}</span
>
</div>
<a
mat-menu-item
routerLink="/user/settings"
[queryParams]="{ tab: 'security' }"
>
<mat-icon
class="icon__user--account"
svgIcon="security-settings"
aria-hidden="false"
aria-label="settings SVG icon"
></mat-icon>
<span>تنظیمات امنیتی</span>
</a>
<a
mat-menu-item
routerLink="/user/settings"
[queryParams]="{ tab: 'kyc' }"
>
<mat-icon
class="icon__user--account"
svgIcon="kyc-settings"
aria-hidden="false"
aria-label="kyc SVG icon"
></mat-icon>
<span>احراز هویت</span>
</a>
//THIS BUTTON IS THE ONE I'M TALKING ABOUT
<button
mat-flat-button
color="accent"
class="sign-out-button"
(click)="requestSignOut()"
>
<span> خروج </span>
</button>
</dropdown-menu>
To set color of button I suggest to use style.
If you set style="color: red !important;" inside the button. It will color the text
<button mat-flat-button style="color: red !important
(click)="select('Basic.Item1')">Basic.Item1
</button>
OUTPUT will be like below
If you set style="background-color: red !important;" . It will color the background of the text
<button mat-flat-button style="background-color: red !important
(click)="select('Basic.Item1')">Basic.Item1
</button>
OUTPUT will be like below
You can also use [ngStyle]="mystyle" like
HTML
<button mat-flat-button [ngStyle]="mystyle"
(click)="select('Basic.Item1')">Basic.Item1
</button>
TS
mystyle:any= { backgroundColor: 'red'};
Note: !important will override the CSS of the button for specific attribute.
I have the following bit of code. I want to make the text in the spans line up with the bottom of the stars.
<ng-container *ngIf="starCount">
<span>Not Relevant</span>
<button
mat-icon-button
color="primary"
*ngFor="let ratingId of ratingArr; index as i"
[id]="'star_' + i"
(click)="onClick(i + 1)">
<mat-icon>{{ rating > i ? 'star' : 'star_border' }}</mat-icon>
</button>
<span>Very Relevant</span>
</ng-container>
Tried all sorts of things out in the Chrome inspector, but have made no meaningful progress.
You can use something like that:
<div *ngIf="starCount" style="display: flex; align-items: center">
<span>Not Relevant</span>
<button
mat-icon-button
color="primary"
*ngFor="let ratingId of ratingArr; index as i"
[id]="'star_' + i"
(click)="onClick(i + 1)">
<mat-icon>{{ rating > i ? 'star' : 'star_border' }}</mat-icon>
</button>
<span>Very Relevant</span>
</div>
I am using Material Design 2 to toggle the left side nav:
In the header bar template:
<button md-icon-button (click)="leftNav.toggle()" aria-label="Menu">
<md-icon>menu</md-icon>
</button>
In the left side nav template:
<md-sidenav mode="side" fxFlex="200px" #leftNav md-component-id="leftNav" opened></md-sidenav>
I am now trying to move the header bar and left side nav into separate custom components so that my app.template.html looks like this:
<div fxLayout="column">
<header-bar></header-bar>
<left-nav></left-nav>
</div>
All looks good on that page and just about everything works except the toggling of the left side nav menu, I am getting an error "cannot read property toggle of undefined". It can't find the "#leftNav" id in the left-nav component is my assumption...what is the best way in Angular 2 to go about getting these two templates to talk to each other so I can toggle the left nav component when I click on the header-bar button?
My folder structure:
layout:
header-bar:
header-bar.html
header-bar.ts
left-nav:
left-nav.html
left-nav.ts
I've seen some general other examples but nothing I've been able to apply here. Happy to provide more information if needed. Thanks
Here is the html before separating into two components:
<div fxLayout="column">
<!-- Header bar -->
<!--<header-bar></header-bar>-->
<md-toolbar color="accent" class="navbar">
<button md-icon-button (click)="leftNav.toggle()" aria-label="Menu">
<md-icon>menu</md-icon>
</button>
<span fxFlex></span>
<button md-button [md-menu-trigger-for]="menu">
My Account <md-icon>keyboard_arrow_down</md-icon>
</button>
</md-toolbar>
<md-sidenav-container fxLayout="row">
<md-sidenav mode="side" fxFlex="200px" #leftNav md-component-id="leftNav" opened>
<md-nav-list>
<md-list-item [routerLink]=" ['./dashboard'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>gradient</md-icon>
<span class="padding-lr-2x">Dashboard</span>
</md-list-item>
<md-list-item [routerLink]=" ['./front'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>assignment</md-icon>
<span class="padding-lr-2x">Form layout</span>
</md-list-item>
<md-list-item [routerLink]=" ['./alt'] " routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<md-icon>settings</md-icon>
<span class="padding-lr-2x">Settings</span>
</md-list-item>
</md-nav-list>
</md-sidenav>
</md-sidenav-container>
</div>