Ajout des sources
This commit is contained in:
Julien Gautier
@@ -0,0 +1,278 @@
|
||||
<div class="content">
|
||||
<h1>{{title}}</h1>
|
||||
<div class="col-xs-12">
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- primary buttons -->
|
||||
<button mat-button color="primary" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="primary" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="primary" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="primary" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="primary" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="primary" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="primary" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- accent buttons -->
|
||||
<button mat-button color="accent" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="accent" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="accent" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="accent" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="accent" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="accent" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="accent" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- warn buttons -->
|
||||
<button mat-button color="warn" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="warn" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="warn" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="warn" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="warn" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="warn" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="warn" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- danger buttons -->
|
||||
<button mat-button color="danger" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="danger" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="danger" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="danger" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="danger" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="danger" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="danger" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- info buttons -->
|
||||
<button mat-button color="info" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="info" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="info" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="info" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="info" class="me-2">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="info" class="me-2">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="info" class="me-2">
|
||||
<mat-icon>info</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-buttons my-2">
|
||||
<!-- success buttons -->
|
||||
<button mat-button color="success" class="me-2">Texte</button>
|
||||
<button mat-stroked-button color="success" class="me-2">Texte Stroked</button>
|
||||
<button mat-flat-button color="success" class="me-2">Texte Flat</button>
|
||||
<button mat-raised-button color="success" class="me-2">Texte Raised</button>
|
||||
<button mat-icon-button color="success" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-fab color="success" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
<button mat-mini-fab color="success" class="me-2">
|
||||
<mat-icon>check_circle</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<section>
|
||||
<div class="demo-label">Basic</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-button>Basic</button>
|
||||
<button mat-button color="primary">Primary</button>
|
||||
<button mat-button color="accent">Accent</button>
|
||||
<button mat-button color="warn">Warn</button>
|
||||
<button mat-button color="danger">Danger</button>
|
||||
<button mat-button color="info">Info</button>
|
||||
<button mat-button color="success">Success</button>
|
||||
<button mat-button disabled>Disabled</button>
|
||||
<a mat-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Raised</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-raised-button>Basic</button>
|
||||
<button mat-raised-button color="primary">Primary</button>
|
||||
<button mat-raised-button color="accent">Accent</button>
|
||||
<button mat-raised-button color="warn">Warn</button>
|
||||
<button mat-raised-button color="danger">Danger</button>
|
||||
<button mat-raised-button color="info">Info</button>
|
||||
<button mat-raised-button color="success">Success</button>
|
||||
<button mat-raised-button disabled>Disabled</button>
|
||||
<a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Stroked</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-stroked-button>Basic</button>
|
||||
<button mat-stroked-button color="primary">Primary</button>
|
||||
<button mat-stroked-button color="accent">Accent</button>
|
||||
<button mat-stroked-button color="warn">Warn</button>
|
||||
<button mat-stroked-button color="danger">Danger</button>
|
||||
<button mat-stroked-button color="info">Info</button>
|
||||
<button mat-stroked-button color="success">Success</button>
|
||||
<button mat-stroked-button disabled>Disabled</button>
|
||||
<a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Flat</div>
|
||||
<div class="demo-button-row">
|
||||
<button mat-flat-button>Basic</button>
|
||||
<button mat-flat-button color="primary">Primary</button>
|
||||
<button mat-flat-button color="accent">Accent</button>
|
||||
<button mat-flat-button color="warn">Warn</button>
|
||||
<button mat-flat-button color="danger">Danger</button>
|
||||
<button mat-flat-button color="info">Info</button>
|
||||
<button mat-flat-button color="success">Success</button>
|
||||
<button mat-flat-button disabled>Disabled</button>
|
||||
<a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
|
||||
</div>
|
||||
</section>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Icon</div>
|
||||
<div class="demo-button-row">
|
||||
<div class="demo-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 color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
<button mat-icon-button color="success" 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>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">FAB</div>
|
||||
<div class="demo-button-row">
|
||||
<div class="demo-flex-container">
|
||||
<div class="demo-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="demo-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="demo-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="demo-button-container">
|
||||
<button mat-fab color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-fab color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-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>
|
||||
<mat-divider></mat-divider>
|
||||
<section>
|
||||
<div class="demo-label">Mini FAB</div>
|
||||
<div class="demo-button-row">
|
||||
<div class="demo-flex-container">
|
||||
<div class="demo-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="demo-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="demo-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="demo-button-container">
|
||||
<button mat-mini-fab color="danger" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="info" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-button-container">
|
||||
<button mat-mini-fab color="success" aria-label="Example icon button with a heart icon">
|
||||
<mat-icon>favorite</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="demo-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>
|
||||
Reference in New Issue
Block a user