feat(badge): add badge component #7483
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| <div class="badge-demo"> | ||
|
|
||
| <h3>Text</h3> | ||
| <span [matBadge]="badgeContent" matBadgeOverlap="false"> | ||
| Hello | ||
| </span> | ||
|
|
||
| <span matBadge="22" matBadgeOverlap="false" matBadgePosition="below after" matBadgeColor="accent"> | ||
| Hello | ||
| </span> | ||
|
|
||
| <span matBadge="22" matBadgeOverlap="false" matBadgePosition="above before" matBadgeColor="warn"> | ||
| Hello | ||
| </span> | ||
|
|
||
| <span matBadge="⚡️" matBadgeOverlap="false" matBadgePosition="below before"> | ||
| Hello | ||
| </span> | ||
|
|
||
| <input type="text" [(ngModel)]="badgeContent" /> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <h3>Buttons</h3> | ||
| <button mat-raised-button [matBadge]="badgeContent"> | ||
| <mat-icon color="primary">home</mat-icon> | ||
| </button> | ||
|
|
||
| <button mat-raised-button matBadge="22" matBadgePosition="below after" color="primary" matBadgeColor="accent"> | ||
| <mat-icon color="primary" color="accent">home</mat-icon> | ||
| </button> | ||
|
|
||
| <button mat-raised-button matBadge="22" matBadgePosition="above before"> | ||
| <mat-icon color="primary">home</mat-icon> | ||
| </button> | ||
|
|
||
| <button mat-raised-button matBadge="22" matBadgePosition="below before"> | ||
| <mat-icon color="primary">home</mat-icon> | ||
| </button> | ||
|
|
||
| <button mat-raised-button> | ||
| <mat-icon color="primary" matBadge="22" color="accent">home</mat-icon> | ||
| </button> | ||
|
|
||
| <br /> | ||
|
There was a problem hiding this comment. Use a div with a margin instead of |
||
| <br /> | ||
| <br /> | ||
|
|
||
| <h3>Icons</h3> | ||
| <mat-icon color="primary" [matBadge]="badgeContent"> | ||
| home | ||
| </mat-icon> | ||
|
|
||
| <mat-icon color="primary" matBadge="22" matBadgePosition="below after" matBadgeColor="accent"> | ||
| home | ||
| </mat-icon> | ||
|
|
||
| <mat-icon color="primary" matBadge="22" matBadgePosition="above before" matBadgeColor="warn"> | ||
| home | ||
| </mat-icon> | ||
|
|
||
| <mat-icon color="primary" matBadge="22" matBadgePosition="below before"> | ||
| home | ||
| </mat-icon> | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <h3>Font Icons</h3> | ||
| <span matIconBadge="home" matBadgeOverlap="false">Home</span> is where you live | ||
|
|
||
| <br /> | ||
| <br /> | ||
| <br /> | ||
|
|
||
| <h3>SVG Icons</h3> | ||
| <span [matSvgIconBadge]="svgIcon" matBadgeOverlap="false">Home</span> is where I live | ||
|
|
||
| <button mat-button (click)="svgIcon = 'home'">Change Icon</button> | ||
|
|
||
| </div> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| import {Component} from '@angular/core'; | ||
| import {DomSanitizer} from '@angular/platform-browser'; | ||
| import {MatIconRegistry} from '@angular/material'; | ||
|
|
||
| @Component({ | ||
| moduleId: module.id, | ||
| selector: 'badge-demo', | ||
| templateUrl: 'badge-demo.html', | ||
| styleUrls: ['badge-demo.css'], | ||
| }) | ||
| export class BadgeDemo { | ||
|
|
||
| badgeContent = '1'; | ||
| svgIcon = 'cat'; | ||
|
|
||
| constructor(_iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) { | ||
| _iconRegistry.addSvgIcon('home', | ||
| sanitizer.bypassSecurityTrustResourceUrl( | ||
| 'https://upload.wikimedia.org/wikipedia/commons/3/34/Home-icon.svg')); | ||
|
There was a problem hiding this comment. You can use the home icon from the icon demo instead of fetching one remotely. There was a problem hiding this comment. I tried that, however, it was not working. That demo page is broken too if you open it up. |
||
|
|
||
| _iconRegistry.addSvgIcon('cat', | ||
| sanitizer.bypassSecurityTrustResourceUrl( | ||
| 'https://upload.wikimedia.org/wikipedia/commons/3/34/Home-icon.svg')); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,177 @@ | ||
| @import '../core/theming/palette'; | ||
| @import '../core/theming/theming'; | ||
| @import '../core/typography/typography-utils'; | ||
|
|
||
|
There was a problem hiding this comment. Add comment here that explains why the badge theme contains all of the styles for the badge instead of just color and typography |
||
| $mat-badge-font-size: 12px; | ||
|
There was a problem hiding this comment. This should probably be coming in through the typography configuration. @crisbeto thoughts? There was a problem hiding this comment. Yeah that would be ideal, but I don't see any breakpoint that maps nicely. @amcdnl is this font size somewhere in the spec? There was a problem hiding this comment. @crisbeto - There is no spec for badges. There was a problem hiding this comment. Would it work to just use the font-size from caption? |
||
| $mat-badge-font-weight: 600; | ||
| $mat-badge-size: 22px !default; | ||
|
|
||
|
|
||
| .mat-badge { | ||
| position: relative; | ||
| } | ||
|
|
||
| .mat-badge:after, | ||
|
There was a problem hiding this comment. These |
||
| .mat-badge-icon, | ||
| .mat-badge-text, | ||
| .mat-badge-svg-icon { | ||
| position: absolute; | ||
|
There was a problem hiding this comment. All of these positioning and alignment styles should be in the There was a problem hiding this comment. I agree, however, since this is a directive there is no way to include styles w/ the component. Do you have a good solution for that? There was a problem hiding this comment. You can make it a component that has a template of There was a problem hiding this comment. Ya, thats what I had. You can't do multiple components on the same element though, example: icon w/ a badge. There was a problem hiding this comment. You can't, but you can have an icon inside a badge. |
||
| text-align: center; | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| align-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .mat-badge:after { | ||
| width: $mat-badge-size; | ||
| height: $mat-badge-size; | ||
| border-radius: 50%; | ||
| content: ''; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .mat-badge-text, | ||
| .mat-badge .mat-badge-icon { | ||
| z-index: 2; | ||
| font-size: 16px; | ||
|
There was a problem hiding this comment. This should be in the typography mixin and the value, ideally, should come from the typography breakpoints. There was a problem hiding this comment. Sure, I've moved it inside that mixin. This size is independent from the font-size of the page since its specifically designed for this fixed width/height of the badge. |
||
| width: $mat-badge-size; | ||
| height: $mat-badge-size; | ||
| } | ||
|
|
||
| .mat-badge-svg-icon { | ||
| z-index: 2; | ||
| width: 12px; | ||
| height: 12px; | ||
|
|
||
| z-index: 2; | ||
| transform: translate(-5px, 5px); | ||
| } | ||
|
|
||
| .mat-badge-above { | ||
| .mat-badge-svg-icon, | ||
| .mat-badge-icon, | ||
| .mat-badge-text, | ||
| &:after { | ||
| top: -$mat-badge-size / 2; | ||
| } | ||
| } | ||
|
|
||
| .mat-badge-below { | ||
| .mat-badge-svg-icon, | ||
| .mat-badge-icon, | ||
| .mat-badge-text, | ||
| &:after { | ||
| bottom: -$mat-badge-size / 2; | ||
| } | ||
| } | ||
|
|
||
| .mat-badge-before { | ||
| margin-left: $mat-badge-size; | ||
|
|
||
| .mat-badge-svg-icon, | ||
| .mat-badge-icon, | ||
| .mat-badge-text, | ||
| &:after { | ||
| left: -$mat-badge-size; | ||
| } | ||
| } | ||
|
|
||
| .mat-badge-after { | ||
| margin-right: $mat-badge-size; | ||
|
|
||
| .mat-badge-svg-icon, | ||
| .mat-badge-icon, | ||
| .mat-badge-text, | ||
| &:after { | ||
| right: -$mat-badge-size; | ||
| } | ||
| } | ||
|
|
||
| .mat-badge-overlap { | ||
| &.mat-badge-before { | ||
| margin-left: $mat-badge-size / 2; | ||
|
|
||
| .mat-badge-svg-icon, | ||
| .mat-badge-icon, | ||
| .mat-badge-text, | ||
| &:after { | ||
| left: -$mat-badge-size / 2; | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-after { | ||
| margin-right: $mat-badge-size / 2; | ||
|
|
||
| .mat-badge-svg-icon, | ||
| .mat-badge-icon, | ||
| .mat-badge-text, | ||
| &:after { | ||
| right: -$mat-badge-size / 2; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin mat-badge-theme($theme) { | ||
| $accent: map-get($theme, accent); | ||
| $warn: map-get($theme, warn); | ||
| $primary: map-get($theme, primary); | ||
|
|
||
| .mat-badge { | ||
| .mat-badge-svg-icon { | ||
| fill: mat-color($primary, default-contrast); | ||
| } | ||
|
|
||
| .mat-badge-text, | ||
| .mat-badge-icon { | ||
| color: mat-color($primary, default-contrast); | ||
| } | ||
|
|
||
| &:after { | ||
| background: mat-color($primary); | ||
| } | ||
|
|
||
| &.mat-badge-accent { | ||
| .mat-badge-svg-icon { | ||
| fill: mat-color($accent, default-contrast); | ||
| } | ||
|
|
||
| .mat-badge-text, | ||
| .mat-badge-icon { | ||
| color: mat-color($accent, default-contrast); | ||
| } | ||
|
|
||
| &:after { | ||
| background: mat-color($accent); | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-warn { | ||
| .mat-badge-svg-icon { | ||
| fill: mat-color($warn, default-contrast); | ||
| } | ||
|
|
||
| .mat-badge-text, | ||
| .mat-badge-icon { | ||
| color: mat-color($warn, default-contrast); | ||
| } | ||
|
|
||
| &:after { | ||
| background: mat-color($warn); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
There was a problem hiding this comment. There's an extra closing |
||
|
|
||
| @mixin mat-badge-typography($config) { | ||
| .mat-badge-svg-icon, | ||
| .mat-badge-icon, | ||
| .mat-badge-text { | ||
| font-weight: $mat-badge-font-weight; | ||
| font-size: $mat-badge-font-size; | ||
|
There was a problem hiding this comment. Size and weight should come from the typography config, no? cc @crisbeto There was a problem hiding this comment. This sizes different based on the small|med|large so needed to make them independent. |
||
| } | ||
|
|
||
| .mat-badge-text { | ||
| font-family: mat-font-family($config); | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google Inc. All Rights Reserved. | ||
| * | ||
| * Use of this source code is governed by an MIT-style license that can be | ||
| * found in the LICENSE file at https://angular.io/license | ||
| */ | ||
|
|
||
| import {NgModule} from '@angular/core'; | ||
| import {MatCommonModule} from '@angular/material/core'; | ||
| import {MatBadge, MatSvgIconBadge, MatIconBadge} from './badge'; | ||
|
|
||
|
|
||
| @NgModule({ | ||
| imports: [MatCommonModule], | ||
| exports: [ | ||
| MatBadge, | ||
| MatIconBadge, | ||
| MatSvgIconBadge, | ||
| MatCommonModule, | ||
|
There was a problem hiding this comment. Is there any reason to export |
||
| ], | ||
| declarations: [ | ||
| MatBadge, | ||
| MatIconBadge, | ||
| MatSvgIconBadge, | ||
| ], | ||
| }) | ||
| export class MatBadgeModule {} | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be good if the demo had a button to toggle badge visibility to see the animation