(ui/angular-material) Added a component list that redirects to the related page of the official docs
sercan
|
|
@ -683,9 +683,9 @@ export const defaultNavigation: FuseNavigationItem[] = [
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
id : 'user-interface.angular-material',
|
id : 'user-interface.angular-material',
|
||||||
title: 'Angular Material',
|
title: 'Angular Material components',
|
||||||
type : 'basic',
|
type : 'basic',
|
||||||
icon : 'heroicons_outline:shield-check',
|
icon : 'heroicons_outline:chip',
|
||||||
link : '/ui/angular-material'
|
link : '/ui/angular-material'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -12,16 +12,30 @@
|
||||||
<!-- Title -->
|
<!-- Title -->
|
||||||
<div class="mt-2">
|
<div class="mt-2">
|
||||||
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
<h2 class="text-3xl md:text-4xl font-extrabold tracking-tight leading-7 sm:leading-10 truncate">
|
||||||
Angular Material
|
Angular Material components
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="flex flex-shrink-0 items-center mt-6 sm:mt-0 sm:ml-4">
|
||||||
|
<a
|
||||||
|
mat-flat-button
|
||||||
|
href="https://material.angular.io/components/categories"
|
||||||
|
target="_blank"
|
||||||
|
rel="noreferrer"
|
||||||
|
[color]="'primary'">
|
||||||
|
<mat-icon
|
||||||
|
class="icon-size-5 mr-2"
|
||||||
|
[svgIcon]="'heroicons_solid:external-link'"></mat-icon>
|
||||||
|
Official docs
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Main -->
|
<!-- Main -->
|
||||||
<div class="flex-auto p-6 sm:p-10">
|
<div class="flex-auto p-6 sm:p-10">
|
||||||
|
|
||||||
<div class="max-w-3xl prose prose-sm">
|
<div class="max-w-4xl prose prose-sm">
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Fuse uses
|
Fuse uses
|
||||||
|
|
@ -46,26 +60,28 @@
|
||||||
|
|
||||||
<h2>Component examples and API documentation</h2>
|
<h2>Component examples and API documentation</h2>
|
||||||
<p>
|
<p>
|
||||||
Because it makes this demo app very heavy and unusable, we don't showcase any of the components
|
Following, you can find links to the official documentation. Click on the component you want to
|
||||||
within this demo. It also makes it harder for us to upgrade to the latest version of the Angular
|
learn more about and it will redirect you to the related section of the official documentation.
|
||||||
Material whenever there is a new version, simply because we have to update all the component demos
|
|
||||||
as well, and it's not an easy task.
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
With that being said, you should always refer to the official docs, they always have the latest version
|
|
||||||
up and running so you won't end up with an outdated examples and/or API documentation.
|
|
||||||
</p>
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<h2>Official docs</h2>
|
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-10 mt-8">
|
||||||
<p>
|
<ng-container *ngFor="let component of components">
|
||||||
Angular Material examples and API documentation:
|
|
||||||
<a
|
<a
|
||||||
class="link"
|
class="flex flex-col rounded-2xl shadow overflow-hidden bg-card hover:shadow-xl transition-shadow duration-200 ease-in-out"
|
||||||
href="https://material.angular.io/components/categories"
|
[href]="'https://material.angular.io/components/' + component.id"
|
||||||
rel="noreferrer"
|
target="_blank"
|
||||||
target="_blank">https://material.angular.io/components/categories
|
rel="noreferrer">
|
||||||
|
<img
|
||||||
|
class="w-full object-cover border-b"
|
||||||
|
[src]="'assets/images/ui/angular-material/scenes/' + component.id + '.scene.png'">
|
||||||
|
<div class="py-4 px-5">
|
||||||
|
<div class="text-xl font-semibold">{{component.name}}</div>
|
||||||
|
<div class="mt-1 text-secondary">{{component.summary}}</div>
|
||||||
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</p>
|
|
||||||
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -7,10 +7,509 @@ import { Component, ViewEncapsulation } from '@angular/core';
|
||||||
})
|
})
|
||||||
export class AngularMaterialComponent
|
export class AngularMaterialComponent
|
||||||
{
|
{
|
||||||
|
components: any[];
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Constructor
|
* Constructor
|
||||||
*/
|
*/
|
||||||
constructor()
|
constructor()
|
||||||
{
|
{
|
||||||
|
this.components = [
|
||||||
|
{
|
||||||
|
id : 'autocomplete',
|
||||||
|
name : 'Autocomplete',
|
||||||
|
summary : 'Suggests relevant options as the user types.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'autocomplete-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-autocomplete-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'badge',
|
||||||
|
name : 'Badge',
|
||||||
|
summary : 'A small value indicator that can be overlaid on another object.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'badge-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-badge-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'bottom-sheet',
|
||||||
|
name : 'Bottom Sheet',
|
||||||
|
summary : 'A large interactive panel primarily for mobile devices.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'bottom-sheet-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-bottom-sheet-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'button',
|
||||||
|
name : 'Button',
|
||||||
|
summary : 'An interactive button with a range of presentation options.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix : 'button-',
|
||||||
|
exclude: ['button-toggle-']
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-button-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'button-toggle',
|
||||||
|
name : 'Button toggle',
|
||||||
|
summary : 'A groupable on/off toggle for enabling and disabling options.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'button-toggle-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-button-toggle-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'card',
|
||||||
|
name : 'Card',
|
||||||
|
summary : 'A styled container for pieces of itemized content.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'card-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-card-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'checkbox',
|
||||||
|
name : 'Checkbox',
|
||||||
|
summary : 'Captures boolean input with an optional indeterminate mode.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'checkbox-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-checkbox-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'chips',
|
||||||
|
name : 'Chips',
|
||||||
|
summary : 'Presents a list of items as a set of small, tactile entities.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'chips-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-chips-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'core',
|
||||||
|
name : 'Core',
|
||||||
|
summary : 'Reusable parts used by other components in the library.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'core-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-core-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'datepicker',
|
||||||
|
name : 'Datepicker',
|
||||||
|
summary : 'Captures dates, agnostic about their internal representation.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'date'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-datepicker-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'dialog',
|
||||||
|
name : 'Dialog',
|
||||||
|
summary : 'A configurable modal that displays dynamic content.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'dialog-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-dialog-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'divider',
|
||||||
|
name : 'Divider',
|
||||||
|
summary : 'A vertical or horizontal visual divider.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'divider-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-divider-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'expansion',
|
||||||
|
name : 'Expansion Panel',
|
||||||
|
summary : 'A container which can be expanded to reveal more content.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'expansion-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-expansion-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'form-field',
|
||||||
|
name : 'Form field',
|
||||||
|
summary : 'Wraps input fields so they are displayed consistently.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'form-field-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-form-field-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'grid-list',
|
||||||
|
name : 'Grid list',
|
||||||
|
summary : 'A flexible structure for presenting content items in a grid.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'grid-list-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-grid-list-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'icon',
|
||||||
|
name : 'Icon',
|
||||||
|
summary : 'Renders a specified icon.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'icon-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-icon-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'input',
|
||||||
|
name : 'Input',
|
||||||
|
summary : 'Enables native inputs to be used within a Form field.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'input-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-input-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'list',
|
||||||
|
name : 'List',
|
||||||
|
summary : 'Presents conventional lists of items.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'list-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-list-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'menu',
|
||||||
|
name : 'Menu',
|
||||||
|
summary : 'A floating panel of nestable options.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'menu-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-menu-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'paginator',
|
||||||
|
name : 'Paginator',
|
||||||
|
summary : 'Controls for displaying paged data.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'paginator-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-paginator-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'progress-bar',
|
||||||
|
name : 'Progress bar',
|
||||||
|
summary : 'A linear progress indicator.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'progress-bar-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-progress-bar-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'progress-spinner',
|
||||||
|
name : 'Progress spinner',
|
||||||
|
summary : 'A circular progress indicator.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'progress-spinner-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-progress-spinner-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'radio',
|
||||||
|
name : 'Radio button',
|
||||||
|
summary : 'Allows the user to select one option from a group.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'radio-'
|
||||||
|
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-radio-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'ripple',
|
||||||
|
name : 'Ripples',
|
||||||
|
overviewPath: 'material/core/ripple/ripple.html',
|
||||||
|
summary : 'Directive for adding Material Design ripple effects',
|
||||||
|
exampleSpecs: {
|
||||||
|
prefix: 'ripple-'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'select',
|
||||||
|
name : 'Select',
|
||||||
|
summary : 'Allows the user to select one or more options using a dropdown.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'select-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-select-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'sidenav',
|
||||||
|
name : 'Sidenav',
|
||||||
|
summary : 'A container for content that is fixed to one side of the screen.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'sidenav-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-sidenav-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'slide-toggle',
|
||||||
|
name : 'Slide toggle',
|
||||||
|
summary : 'Captures boolean values as a clickable and draggable switch.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'slide-toggle-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-slide-toggle-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'slider',
|
||||||
|
name : 'Slider',
|
||||||
|
summary : 'Allows the user to input a value by dragging along a slider.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'slider-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-slider-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'snack-bar',
|
||||||
|
name : 'Snackbar',
|
||||||
|
summary : 'Displays short actionable messages as an uninvasive alert.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'snack-bar-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-snack-bar-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'sort',
|
||||||
|
name : 'Sort header',
|
||||||
|
summary : 'Allows the user to configure how tabular data is sorted.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'sort-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-sort-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'stepper',
|
||||||
|
name : 'Stepper',
|
||||||
|
summary : 'Presents content as steps through which to progress.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'stepper-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-stepper-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'table',
|
||||||
|
name : 'Table',
|
||||||
|
summary : 'A configurable component for displaying tabular data.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'table-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-table-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'tabs',
|
||||||
|
name : 'Tabs',
|
||||||
|
summary : 'Only presents one view at a time from a provided set of views.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'tab-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-tabs-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'toolbar',
|
||||||
|
name : 'Toolbar',
|
||||||
|
summary : 'A container for top-level titles and controls.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'toolbar-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-toolbar-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'tooltip',
|
||||||
|
name : 'Tooltip',
|
||||||
|
summary : 'Displays floating content when an object is hovered.',
|
||||||
|
exampleSpecs : {
|
||||||
|
prefix: 'tooltip-'
|
||||||
|
},
|
||||||
|
additionalApiDocs: [
|
||||||
|
{
|
||||||
|
name: 'Testing',
|
||||||
|
path: 'material-tooltip-testing.html'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id : 'tree',
|
||||||
|
name : 'Tree',
|
||||||
|
summary : 'Presents hierarchical content as an expandable tree.',
|
||||||
|
exampleSpecs: {
|
||||||
|
prefix: 'tree-'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,7 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { Route, RouterModule } from '@angular/router';
|
import { Route, RouterModule } from '@angular/router';
|
||||||
|
import { MatButtonModule } from '@angular/material/button';
|
||||||
|
import { MatIconModule } from '@angular/material/icon';
|
||||||
import { SharedModule } from 'app/shared/shared.module';
|
import { SharedModule } from 'app/shared/shared.module';
|
||||||
import { AngularMaterialComponent } from 'app/modules/admin/ui/angular-material/angular-material.component';
|
import { AngularMaterialComponent } from 'app/modules/admin/ui/angular-material/angular-material.component';
|
||||||
|
|
||||||
|
|
@ -16,6 +18,8 @@ export const routes: Route[] = [
|
||||||
],
|
],
|
||||||
imports : [
|
imports : [
|
||||||
RouterModule.forChild(routes),
|
RouterModule.forChild(routes),
|
||||||
|
MatButtonModule,
|
||||||
|
MatIconModule,
|
||||||
SharedModule
|
SharedModule
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
|
||||||
|
After Width: | Height: | Size: 910 B |
BIN
src/assets/images/ui/angular-material/scenes/badge.scene.png
Normal file
|
After Width: | Height: | Size: 1019 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 466 B |
BIN
src/assets/images/ui/angular-material/scenes/button.scene.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/ui/angular-material/scenes/card.scene.png
Normal file
|
After Width: | Height: | Size: 427 B |
BIN
src/assets/images/ui/angular-material/scenes/checkbox.scene.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/ui/angular-material/scenes/chips.scene.png
Normal file
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/images/ui/angular-material/scenes/core.scene.png
Normal file
|
After Width: | Height: | Size: 449 B |
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/images/ui/angular-material/scenes/dialog.scene.png
Normal file
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/ui/angular-material/scenes/divider.scene.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/ui/angular-material/scenes/expansion.scene.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 933 B |
BIN
src/assets/images/ui/angular-material/scenes/grid-list.scene.png
Normal file
|
After Width: | Height: | Size: 314 B |
BIN
src/assets/images/ui/angular-material/scenes/icon.scene.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/ui/angular-material/scenes/input.scene.png
Normal file
|
After Width: | Height: | Size: 647 B |
BIN
src/assets/images/ui/angular-material/scenes/list.scene.png
Normal file
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/images/ui/angular-material/scenes/menu.scene.png
Normal file
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/assets/images/ui/angular-material/scenes/paginator.scene.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 206 B |
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/images/ui/angular-material/scenes/radio.scene.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/ui/angular-material/scenes/ripple.scene.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/ui/angular-material/scenes/select.scene.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/images/ui/angular-material/scenes/sidenav.scene.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/ui/angular-material/scenes/slider.scene.png
Normal file
|
After Width: | Height: | Size: 632 B |
BIN
src/assets/images/ui/angular-material/scenes/snack-bar.scene.png
Normal file
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/images/ui/angular-material/scenes/sort.scene.png
Normal file
|
After Width: | Height: | Size: 1.8 KiB |
BIN
src/assets/images/ui/angular-material/scenes/stepper.scene.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/ui/angular-material/scenes/table.scene.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/images/ui/angular-material/scenes/tabs.scene.png
Normal file
|
After Width: | Height: | Size: 790 B |
BIN
src/assets/images/ui/angular-material/scenes/toolbar.scene.png
Normal file
|
After Width: | Height: | Size: 747 B |
BIN
src/assets/images/ui/angular-material/scenes/tooltip.scene.png
Normal file
|
After Width: | Height: | Size: 881 B |
BIN
src/assets/images/ui/angular-material/scenes/tree.scene.png
Normal file
|
After Width: | Height: | Size: 877 B |