src/app/ui/buttons/buttons.component.ts
| selector | bgui-buttons |
| standalone | true |
| imports |
MatButtonModule
MatIconModule
LoaderComponent
MatFormField
MatLabel
MatInput
|
| templateUrl | ./buttons.component.html |
| styleUrl | ./buttons.component.scss |
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { LoaderComponent } from '../../shared/ui/loader/loader.component';
import { MatFormField, MatLabel } from '@angular/material/form-field';
import { MatInput } from '@angular/material/input';
@Component({
selector: 'bgui-buttons',
standalone: true,
imports: [
MatButtonModule,
MatIconModule,
LoaderComponent,
MatFormField,
MatLabel,
MatInput,
],
templateUrl: './buttons.component.html',
styleUrl: './buttons.component.scss',
})
export class ButtonsComponent {}
<div class="container-lg">
<h2>Buttons</h2>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Boutons de texte</h5>
<section>
<div class="example-label">Bouton texte</div>
<div class="example-button-row">
<button mat-button shape-semi-round>Btn tertiaires</button>
<button mat-button shape-semi-round color="primary">Primary</button>
<button mat-button shape-semi-round color="accent">Accent</button>
<button mat-button shape-semi-round color="warn">Warn</button>
<button mat-button shape-semi-round disabled>Disabled</button>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Boutons primaires élévation</h5>
<section>
<div class="example-label">primaires élévation</div>
<div class="example-button-row">
<button mat-raised-button shape-semi-round>Basic</button>
<button
mat-raised-button
shape-semi-round
shad
hover
focus
color="primary">
Primary
</button>
<button mat-raised-button shape-semi-round color="accent">
Accent
</button>
<button mat-raised-button shape-semi-round color="warn">Warn</button>
<button mat-raised-button shape-semi-round disabled>Disabled</button>
<a
mat-raised-button
shape-semi-round
href="https://www.google.com/"
target="_blank"
>Link</a
>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Boutons en surbrillance</h5>
<section>
<div class="example-label">Btn surbrillance</div>
<div class="example-button-row">
<button mat-stroked-button shape-semi-round>Basic</button>
<button mat-stroked-button shape-semi-round color="primary">
Primary
</button>
<button
mat-stroked-button
shape-semi-round
bgui-btn--giant
color="accent">
Accent
</button>
<button mat-stroked-button shape-semi-round color="warn">Warn</button>
<button mat-stroked-button shape-semi-round disabled>Disabled</button>
<a
mat-stroked-button
shape-semi-round
href="https://www.google.com/"
target="_blank"
>Link</a
>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Boutons primaires plat</h5>
<section>
<div class="example-label">Boutons primaires plat</div>
<div class="example-button-row">
<button mat-flat-button>Basic</button>
<button
mat-flat-button
shape-semi-round
color="primary"
class="button-rounded">
Button
</button>
<button
mat-flat-button
shape-semi-round
color="primary"
class="button-rounded">
OK
</button>
<button
mat-flat-button
shape-semi-round
color="primary"
class="button-rounded">
Cancel
</button>
<button
mat-flat-button
shape-semi-round
color="primary"
class="button-rounded">
Button
</button>
<button
mat-flat-button
shape-semi-round
color="warn"
class="button-rounded">
Delete
</button>
<button
mat-flat-button
shape-semi-round
disabled
class="button-rounded">
Applied
</button>
<button mat-flat-button shape-semi-round color="accent">
Accent
</button>
<button mat-flat-button shape-semi-round disabled>Disabled</button>
<a
mat-flat-button
shape-semi-round
href="https://www.google.com/"
target="_blank"
>Link</a
>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Taille Boutons</h5>
<section>
<div class="example-label">Taille</div>
<div class="example-button-row">
<button
mat-flat-button
bgui-tiny
color="primary"
class="button-rounded">
Tiny
</button>
<button
mat-flat-button
bgui-small
color="primary"
class="button-rounded">
Small
</button>
<button
mat-flat-button
bgui-medium
color="primary"
class="button-rounded">
Medium
</button>
<button
mat-flat-button
bgui-large
color="primary"
class="button-rounded">
Large Button
</button>
<button
mat-flat-button
bgui-giant
color="primary"
class="button-rounded">
Giant
</button>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Taille Boutons avec icônes</h5>
<section>
<div class="example-label">Taille</div>
<div class="example-button-row">
<button
mat-flat-button
bgui-tiny
mat-inline-14
shape-semi-round
color="primary">
<mat-icon>home</mat-icon>
Tiny
</button>
<button
mat-flat-button
bgui-small
mat-inline-14
shape-semi-round
color="primary">
<mat-icon>home</mat-icon>
Small
</button>
<button
mat-flat-button
bgui-medium
mat-inline-16
shape-semi-round
color="primary">
<mat-icon>home</mat-icon>
Medium
</button>
<button
mat-flat-button
bgui-large
shape-semi-round
mat-inline-20
color="primary">
<mat-icon>home</mat-icon>
Large Button
</button>
<button
mat-flat-button
bgui-giant
shape-semi-round
mat-inline-20
color="primary">
<mat-icon>home</mat-icon>
Giant
</button>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Circulaire indéterminée</h5>
<section>
<div class="example-label">Taille</div>
<div class="example-button-row">
<bgui-loader class="" />
</div>
<button mat-flat-button bgui-medium shape-semi-round color="primary">
<bgui-loader bgui-loader />
Medium
</button>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Boutons avec icône</h5>
<section>
<div class="example-label">Icon</div>
<div class="example-button-row">
<div class="example-flex-container">
<button
mat-icon-button
aria-label="Example icon button with a vertical three dot icon">
<mat-icon>more_vert</mat-icon>
</button>
<button
mat-icon-button
color="primary"
aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
<button
mat-icon-button
color="accent"
aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
<button
mat-icon-button
color="warn"
aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
<button
mat-icon-button
disabled
aria-label="Example icon button with a open in new tab icon">
<mat-icon>open_in_new</mat-icon>
</button>
</div>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Bouton d'action flottant</h5>
<section>
<div class="example-label">FAB</div>
<div class="example-button-row">
<div class="example-flex-container">
<div class="example-button-container">
<button
mat-fab
color="primary"
aria-label="Example icon button with a delete icon">
<mat-icon>delete</mat-icon>
</button>
</div>
<div class="example-button-container">
<button
mat-fab
color="accent"
aria-label="Example icon button with a bookmark icon">
<mat-icon>bookmark</mat-icon>
</button>
</div>
<div class="example-button-container">
<button
mat-fab
color="warn"
aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
</div>
<div class="example-button-container">
<button
mat-fab
disabled
aria-label="Example icon button with a heart icon">
<mat-icon>favorite</mat-icon>
</button>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="card mb-3">
<div class="card-body">
<h5 class="card-title">Mini Bouton d'action flottant</h5>
<section>
<div class="example-label">Mini FAB</div>
<div class="example-button-row">
<div class="example-flex-container">
<div class="example-button-container">
<button
mat-mini-fab
color="primary"
aria-label="Example icon button with a menu icon">
<mat-icon>menu</mat-icon>
</button>
</div>
<div class="example-button-container">
<button
mat-mini-fab
color="accent"
aria-label="Example icon button with a plus one icon">
<mat-icon>plus_one</mat-icon>
</button>
</div>
<div class="example-button-container">
<button
mat-mini-fab
color="warn"
aria-label="Example icon button with a filter list icon">
<mat-icon>filter_list</mat-icon>
</button>
</div>
<div class="example-button-container">
<button
mat-mini-fab
disabled
aria-label="Example icon button with a home icon">
<mat-icon>home</mat-icon>
</button>
</div>
</div>
</div>
</section>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">
With supporting text below as a natural lead-in to additional content.
</p>
<button
mat-flat-button
bgui-medium
mat-inline-16
shape-semi-round
color="primary">
<mat-icon>home</mat-icon>
Medium
</button>
<form class="example-form">
<mat-form-field class="example-full-width">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi" />
</mat-form-field>
</form>
<div class="row g-3">
<div class="col">
<mat-form-field class="w-100">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi" />
</mat-form-field>
</div>
<div class="col">
<mat-form-field class="w-100">
<mat-label>Favorite food</mat-label>
<input matInput placeholder="Ex. Pizza" value="Sushi" />
</mat-form-field>
</div>
</div>
</div>
</div>
</div>