feat(badge): add badge component #7483
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| <div class="badge-demo"> | ||
|
|
||
| <div class="badge-examples"> | ||
| <h3>Text</h3> | ||
| <span [matBadge]="badgeContent" matBadgeOverlap="false" *ngIf="visible"> | ||
| Hello | ||
| </span> | ||
|
|
||
| <span [matBadge]="11111" 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> | ||
|
|
||
| <span [matBadge]="badgeContent" matBadgeDescription="I've got {{badgeContent}} problems"> | ||
|
There was a problem hiding this comment. I think it’s preferable to use property binding There was a problem hiding this comment. Using interpolation is fine when it's mixed with static text |
||
| Aria | ||
| </span> | ||
|
|
||
| <span [matBadge]="badgeContent" matBadgeHidden="true"> | ||
| Hidden | ||
| </span> | ||
|
|
||
| <input type="text" [(ngModel)]="badgeContent" /> | ||
| <button (click)="visible = !visible">Toggle</button> | ||
| </div> | ||
|
|
||
| <div class="badge-examples"> | ||
| <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="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> | ||
| </div> | ||
|
|
||
| <div class="badge-examples"> | ||
| <h3>Icons</h3> | ||
| <mat-icon [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> | ||
| </div> | ||
|
|
||
| <div class="badge-examples"> | ||
| <h3>Size</h3> | ||
| <mat-icon [matBadge]="badgeContent" matBadgeSize="small"> | ||
| home | ||
| </mat-icon> | ||
| <mat-icon [matBadge]="badgeContent" matBadgeSize="large"> | ||
| home | ||
| </mat-icon> | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .badge-examples { | ||
| margin-bottom: 25px; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC 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 {Component} from '@angular/core'; | ||
|
|
||
| @Component({ | ||
| moduleId: module.id, | ||
| selector: 'badge-demo', | ||
| templateUrl: 'badge-demo.html', | ||
| styleUrls: ['badge-demo.css'], | ||
| }) | ||
| export class BadgeDemo { | ||
| visible = true; | ||
| badgeContent = '0'; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,167 @@ | ||
| // This contains all of the styles for the badge | ||
| // rather than just the color/theme because of | ||
| // no style sheet support for directives. | ||
| @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-default-size: 22px !default; | ||
| $mat-badge-small-size: $mat-badge-default-size - 6; | ||
| $mat-badge-large-size: $mat-badge-default-size + 6; | ||
|
|
||
| // Mixin for building offset given different sizes | ||
| @mixin _mat-badge-size($size) { | ||
| .mat-badge-content { | ||
| width: $size; | ||
| height: $size; | ||
| line-height: $size; | ||
| } | ||
|
|
||
| &.mat-badge-above { | ||
| .mat-badge-content { | ||
| top: -$size / 2; | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-below { | ||
| .mat-badge-content { | ||
| bottom: -$size / 2; | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-before { | ||
| margin-left: $size; | ||
|
|
||
|
|
||
| &[dir='rtl'] { | ||
| margin-left: 0; | ||
| margin-right: $size; | ||
| } | ||
|
|
||
| .mat-badge-content { | ||
| left: -$size; | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-after { | ||
| margin-right: $size; | ||
|
|
||
| &[dir='rtl'] { | ||
| margin-right: 0; | ||
| margin-left: $size; | ||
| } | ||
|
|
||
| .mat-badge-content { | ||
| right: -$size; | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-overlap { | ||
| &.mat-badge-before { | ||
| margin-left: $size / 2; | ||
|
|
||
| &[dir='rtl'] { | ||
| margin-left: 0; | ||
| margin-right: $size / 2; | ||
| } | ||
|
|
||
| .mat-badge-content { | ||
| left: -$size / 2; | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-after { | ||
| margin-right: $size / 2; | ||
|
|
||
| &[dir='rtl'] { | ||
| margin-right: 0; | ||
| margin-left: $size; | ||
| } | ||
|
|
||
| .mat-badge-content { | ||
| right: -$size / 2; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin mat-badge-theme($theme) { | ||
| $accent: map-get($theme, accent); | ||
| $warn: map-get($theme, warn); | ||
| $primary: map-get($theme, primary); | ||
|
|
||
| .mat-badge-content { | ||
| color: mat-color($primary, default-contrast); | ||
| background: mat-color($primary); | ||
| } | ||
|
|
||
| &.mat-badge-accent { | ||
| .mat-badge-content { | ||
| background: mat-color($accent); | ||
| color: mat-color($accent, default-contrast); | ||
| } | ||
| } | ||
|
|
||
| &.mat-badge-warn { | ||
| .mat-badge-content { | ||
| color: mat-color($warn, default-contrast); | ||
| background: mat-color($warn); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin mat-badge-typography($config) { | ||
| .mat-badge-content { | ||
| 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. |
||
| font-family: mat-font-family($config); | ||
| } | ||
|
|
||
| .mat-badge-small .mat-badge-content { | ||
| font-size: $mat-badge-font-size / 2; | ||
| } | ||
|
|
||
| .mat-badge-large .mat-badge-content { | ||
| font-size: $mat-badge-font-size * 2; | ||
| } | ||
| } | ||
|
|
||
| .mat-badge { | ||
| position: relative; | ||
| } | ||
|
|
||
| .mat-badge-hidden { | ||
| .mat-badge-content { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .mat-badge-content { | ||
| position: absolute; | ||
| text-align: center; | ||
| display: inline-block; | ||
| border-radius: 50%; | ||
| transition: all 0.2 ease-in-out; | ||
| transform: scale(0.6); | ||
| overflow: hidden; | ||
| white-space: nowrap; | ||
| text-overflow: ellipsis; | ||
| pointer-events: none; | ||
| } | ||
|
|
||
| // The active class is added after the element is added | ||
| // so it can animate scale to default | ||
| .mat-badge-content.mat-badge-active { | ||
| transform: scale(1); | ||
| } | ||
|
|
||
| .mat-badge-small { | ||
| @include _mat-badge-size($mat-badge-small-size); | ||
| } | ||
| .mat-badge-medium { | ||
| @include _mat-badge-size($mat-badge-default-size); | ||
| } | ||
| .mat-badge-large { | ||
| @include _mat-badge-size($mat-badge-large-size); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /** | ||
| * @license | ||
| * Copyright Google LLC 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 {A11yModule} from '@angular/cdk/a11y'; | ||
| import {MatBadge} from './badge'; | ||
|
|
||
|
|
||
| @NgModule({ | ||
| imports: [ | ||
| MatCommonModule, | ||
| A11yModule, | ||
| ], | ||
| exports: [ | ||
| MatBadge, | ||
| ], | ||
| declarations: [ | ||
| MatBadge, | ||
| ], | ||
| }) | ||
| export class MatBadgeModule {} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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