this is the code that needs to be changed is class="header1 fuse-navy-600">
<div class="container-fluid">
<div class="main-card">
<div class="header1 fuse-navy-600">
<div class="title1">
<mat-icon class="logo-icon s-32 mr-16 mat-icon material-icons ng-trigger ng-trigger-animate"
role="img" aria-hidden="true">shopping_basket
</mat-icon>
{{ title }}
</div>
<div class="mode-container" *ngIf="processedEntryForm && myForm">
<span class="mode">
<p class="mode-text">Mode: {{ eventType.valueOf() |
titlecase }}</p>
<mat-icon class="mat-icon-mode" *ngIf="eventCode == 'VIEW'">visibility
</mat-icon>
<mat-icon class="mat-icon-mode" *ngIf="eventCode == 'DELETE'"
aria-label="Example icon-button with a heart icon">delete_outline </mat-icon>
<mat-icon class="mat-icon-mode" *ngIf="eventCode == 'MODIFY'"
aria-label="Example icon-button with a heart icon">create
</mat-icon>
<mat-icon class="mat-icon-mode" *ngIf="eventCode == 'PROCESSPENDING' || eventCode == 'PROCESS' ">build</mat-icon>
<mat-icon class="mat-icon-mode" *ngIf="eventCode == 'ADD'">add</mat-icon>
</span>
</div>
</div>
enter image description here
how will i add theme to a div and be able to change the header fuse-navy-600 color
From what I'm seeing in the documentation of the latest Fuse theme which uses Tailwind CSS (http://angular-material.fusetheme.com/ui/colors), to change the background-color of a div to the primary color, you can replace the fuse-navy-600 class in the html by bg-primary. In case you want to choose a specific hue of the primary color, you can specify it in this manner: bg-primary-300
Related
I want to change the font across my whole website (effectively changing the font globally), so I've overwritten the Bootstrap font by updating my styles.scss file as below:
$theme-colors:(
"primary": #84329b,
);
#import '../node_modules/bootstrap/scss/bootstrap';
html, body { height: 100%; }
body { margin: 0; font-family: 'MuseoModerno', cursive !important; }
This works successfully, however, the font in my header does not change in-line with this (see the below image).
How can I ensure the font changes for the header?
For completeness, I've included the html code for my header below. As you can see, I've attempted to update the font specifically on the header, as it wasn't working after updating the styles.scss file. Unfortunately, this doesn't seem to work either.
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap" rel="stylesheet">
<mat-sidenav-container class="sidenav-container">
<!---links to appear in the sidenav if the device is a mobile-->
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/catalogue" (click)="drawer.close()"
>Catalogue</a
>
<a mat-list-item routerLink="/notepads" (click)="drawer.close()"
>Explore Pads</a
>
<hr class="divider-line">
<a mat-list-item routerLink="/login" (click)="drawer.close()">Login</a>
<a mat-list-item routerLink="/sign-up" (click)="drawer.close()"
>Sign Up</a
>
</mat-nav-list>
<hr class="divider-line">
</mat-sidenav>
<!---content below is for everything contained along the header, mobile or not-->
<mat-sidenav-content>
<mat-toolbar>
<!---this is the menu icon to appear on mobile-->
<button
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async"
>
<mat-icon>menu</mat-icon>
</button>
<!---spacer between the mobile menu button and Padder logo-->
<span class="left-spacer" *ngIf="isHandset$ | async"></span>
<!---Padder logo for desktop-->
<span *ngIf="!(isHandset$ | async)" class="logo" routerLink="/"
><img
class="logo-image"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!--links for the header when the device is not a handset-->
<div class="nav-links" *ngIf="!(isHandset$ | async)">
<a mat-button routerLink="/catalogue">Catalogue</a>
<a mat-button routerLink="/notepads">Explore Pads</a>
</div>
<div class="search-container" *ngIf="!(isHandset$ | async)">
<mat-form-field class="header-search">
<input matInput placeholder="Search for products or pads.." />
</mat-form-field>
</div>
<!---Padder logo for mobile-->
<span *ngIf="isHandset$ | async" class="logo" routerLink="/"
><img
class="logo-image-mobile"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!---spacer between Padder logo and login button-->
<span class="right-spacer" *ngIf="isHandset$ | async"></span>
<!--login / sign-up button to be shown when user not logged in, desktop-->
<div class="login-links">
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Login</a
>
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Sign Up</a
>
</div>
<!---search icon to be shown when the user is on mobile-->
<div>
<button mat-icon-button *ngIf="isHandset$ | async">
<mat-icon>search</mat-icon>
</button>
</div>
<!---dropdown to be down when the user is logged into the website-->
<!---
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<a mat-menu-item routerLink="/profile">
<span>Profile</span>
</a>
<a mat-menu-item href="">
<button mat-stroked-button>Logout</button>
</a>
</mat-menu>
</div>--->
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>
In you styles.scss, do the following:
#import "https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap";
* {
font: 500 20px/32px Roboto, 'MuseoModerno', sans-serif !important
}
This will definitely work
I would like to make it so that when I click the mat-button, the menu items would be the same size and push everything else down. Below are attached images of the current situation and desired.
Current closed dropdown
Current opened dropdown
Desired closed dropdown
Here is my HTML code:
<mat-footer>
<div class="footerLinks">
<span *ngFor="let footerLink of footerContent.footerLinks">
<span *ngIf="footerLink.footerDrop.length > 1 else single">
<a mat-button [matMenuTriggerFor]="subLinks" href="javascript:void(0)" title={{footerLink.subFooterTitle}}>{{footerLink.subFooterTitle}}
<mat-icon>arrow_drop_down</mat-icon>
</a>
<mat-menu #subLinks="matMenu" arrowPosition="up">
<a mat-menu-item *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</mat-menu>
</span>
<ng-template #single >
<a mat-button *ngFor="let footerDrop of footerLink.footerDrop" href={{footerDrop.subLink}} target={{footerDrop.linktarget}} title={{footerDrop.footerSubTitle}}>{{footerDrop.footerSubTitle}}</a>
</ng-template>
</span>
</div>
<div class="social">
<span *ngFor="let socialLink of footerContent.socialLinks">
<a mat-flat-button class="{{socialLink.socialMediaService}}-icon" href={{socialLink.url}} title={{socialLink.socialMediaService}} target={{socialLink.linktarget}}></a>
</span>
</div>
<div class="terms">
<mat-copywrite-footer [innerHTML]="footerContent.finePrint.value"> </mat-copywrite-footer>
</div>
</mat-footer>
How can I have the more_vert button align on the right side in the header?
I'm using Angular 7 and Material UI.
<mat-toolbar color="primary" class="mat-elevation-z10">
<span>
<mat-icon>favorite</mat-icon>
Derek Zoolander's Center for Models Who Can't Find Love
</span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon>more_vert</mat-icon>
</button>
The key was to have <span class="example-spacer"></span> between your title <span> and the "more_vert" mat-icon.
complete HTML:
<mat-toolbar color="primary" class="mat-elevation-z10">
<mat-toolbar-row>
<mat-icon>favorite</mat-icon>
<span>
Derek Zoolander's Center for...
</span>
<span class="example-spacer"></span>
<button mat-icon-button [mat-menu-trigger-for]="menu">
<mat-icon class="example-icon" aria-hidden="false" aria-label="expand menu">more_vert</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
you can check working example here...
I have a child search component on every view that has tabs. Since these tabs only have icons in the tab label I have to style them to have a smaller width.
I found something that works:
/deep/ .mat-tab-label {
min-width: 80px !important;
}
However, this also affects the tabs in the parent component but without the /deep/ and !important the tabs don't change their width.
I've tried using all forms of ViewEncapsulation but none of them get the job done.
The tab structure is basically this:
<md-tab-group [selectedIndex]="selectedTabIndex">
<md-tab>
<ng-template md-tab-label><i class="fa fa-users"></i> {{'common_users' |
translate | capitalize}}
</ng-template>
<search-component></search-component>
</md-tab>
</md-tab-group>
The search component also has tabs in it:
<md-tab-group>
<md-tab>
<template md-tab-label>
<i class="fa fa-search" mdTooltip="{{'common_simplesearch' | translate | capitalize}}"></i>
</template>
<div fxLayout="column">
<form>
<md-input-container
*ngFor="let option of simpleSearchOptions; let i = index; let last = last" fxFlex="100%"
style="margin-right: 10px; margin-top: 5px;">
<input mdInput
type="text"
[(ngModel)]="option.value"
name="searchQuery{{i}}">
</md-input-container>
<div fxlayout="row">
<button md-raised-button mdTooltip="{{'common_search' | translate | capitalize}}" color="primary"
type="submit"
(keypress)="onEnter($event, searchSet)"
(click)="search(searchSet)">
{{'common_search' | translate | capitalize}}
</button>
<button *ngIf="canClear != false" md-raised-button mdTooltip="{{'common_clearSearch' | translate |
capitalize}}" (click)="clearSearch()"><i class="fa fa-eraser"></i>
</button>
</div>
</form>
</div>
</md-tab>
<md-tab>
<template md-tab-label>
<i class="fa fa-search-plus" mdTooltip="{{'common_advancedsearch' | translate | capitalize}}"></i>
</template>
<div fxlayout="column">
<form (ngSubmit)="search(searchSet)">
<div *ngFor="let searchItem of searchSet.searchItems; let i = index; let first = first; let last = last">
<md-select [ngModel]="searchItemType[i]"
(change)="onSearchTypeChange(searchItem, i)"
name="searchBy{{i}}" fxFlex="100">
<md-option [value]="stringify(option)" *ngFor="let option of searchOptions">{{option.display | translate |
capitalize}}
</md-option>
</md-select>
<div *ngIf="searchBy == 'identifier'">
<md-select [(ngModel)]="searchItem.key" name="idType" fxFlex="100">
<md-option *ngFor="let option of tokenSearchOptions" [value]="option">{{option | translate | capitalize}}
</md-option>
</md-select>
</div>
<md-select [(ngModel)]="searchItem.modifier" name="searchType{{i}}" fxFlex>
<md-option [value]="modifier.value" *ngFor="let modifier of searchModifiers[i]; let i = index">
{{modifier.display | translate |
capitalize}}
</md-option>
</md-select>
<md-input-container fxFlex="100">
<input mdInput
type="text"
placeholder="{{'common_search' | translate | capitalize}}"
[(ngModel)]="searchItem.value"
name="searchQuery{{i}}">
</md-input-container>
<a class="btn btn-alert btn-lg" (click)="addSearchItem()" [hidden]="!last">
<i class="ion-ios-plus-outline"></i>
</a>
<a class="btn btn-alert btn-lg" (click)="removeSearchItem(searchItem)" [hidden]="first || !last"><i
class="ion-ios-minus-outline"></i></a>
</div>
<button md-raised-button color="primary"
[disabled]="!searchSet.searchItems[0].key || !searchSet.searchItems[0].modifier || !searchSet.searchItems[0].value"
(keypress)="onEnter($event, searchSet)" (click)="search(searchSet)">{{'common_search' |
translate
| capitalize}}
</button>
<button md-raised-button (click)="clearSearch()">{{'common_clearSearch' | translate |
capitalize}}
</button>
</form>
</div>
</md-tab>
<md-tab>
<template md-tab-label>
<i class="fa fa-bookmark-o"></i>
</template>
Saved searches
</md-tab>
</md-tab-group>
How can I style the tabs only in the child component without affecting the parent?
I have Angular material nav bar(shown below). I put a md-menu inside a nav bar because I want to achieve the bootstrap navigation bar that has dropdown menu on the right side. How can I move the "WELCOME! IVAN" which is a dropdown menu on the right side.
below is my code:
<div ng-controller="navController">
<md-content>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#{{ link.url}}" ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
<i class="fa {{ link.icon}}" aria-hidden="true"></i>
{{ link.link}}
</md-nav-item>
<md-menu md-offset="0 -7" layout-align="end center">
<md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
Welcome! {{ user}}
<!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
<i class="fa fa-user" aria-hidden="true"></i>
</md-button>
<md-menu-content width="3">
<md-menu-item>
<md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-nav-bar>
</md-content>
thanks in advance for your help!!! :)
Try to use a flex span like in this codepen example demo. <span flex></span> fills the space between elements.
<div ng-controller="navController">
<md-content>
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-href="#{{ link.url}}" ng-repeat="link in navUrl" name="{{ link.url.substr(1)}}">
<i class="fa {{ link.icon}}" aria-hidden="true"></i>
{{ link.link}}
</md-nav-item>
<span flex></span>
<md-menu md-offset="0 -7" layout-align="end center">
<md-button aria-label="Open menu" class="md-button" ng-click="$mdMenu.open($event)">
Welcome! {{ user}}
<!--<md-icon md-menu-origin md-svg-icon="call:phone"></md-icon>-->
<i class="fa fa-user" aria-hidden="true"></i>
</md-button>
<md-menu-content width="3">
<md-menu-item>
<md-button ng-click=""> <span md-menu-align-target>Logout</span></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-nav-bar>
</md-content>
</div>