mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Angular material docs updated,
+ @angular/material-moment-adapter added to package.json
This commit is contained in:
mustafahlvc
parent
142fc982ca
commit
76358f996e
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -215,6 +215,14 @@
|
|||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/material-moment-adapter": {
|
||||
"version": "5.0.0-rc0",
|
||||
"resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-5.0.0-rc0.tgz",
|
||||
"integrity": "sha512-NI9Q8555vbm6RvBltW0rzyaKwthpUmjtoGtSQePp6TI0ZtROtGAwH/KCcNM3FsSqvQuxBc5jq0HId2wvHknxEw==",
|
||||
"requires": {
|
||||
"tslib": "1.8.0"
|
||||
}
|
||||
},
|
||||
"@angular/platform-browser": {
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-5.0.2.tgz",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"@angular/forms": "5.0.2",
|
||||
"@angular/http": "5.0.2",
|
||||
"@angular/material": "5.0.0-rc0",
|
||||
"@angular/material-moment-adapter": "5.0.0-rc0",
|
||||
"@angular/platform-browser": "5.0.2",
|
||||
"@angular/platform-browser-dynamic": "5.0.2",
|
||||
"@angular/router": "5.0.2",
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@ import { NgModule } from '@angular/core';
|
|||
import { RouterModule, Routes } from '@angular/router';
|
||||
import { SharedModule } from '../../../../core/modules/shared.module';
|
||||
import { FuseWidgetModule } from '../../../../core/components/widget/widget.module';
|
||||
import { FuseAngularMaterialComponent } from 'app/main/content/components/angular-material/angular-material.component';
|
||||
import { FuseExampleViewerComponent } from './example-viewer/example-viewer';
|
||||
import { EXAMPLE_LIST } from './example-components';
|
||||
import { FuseAngularMaterialComponent } from './angular-material.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -15,15 +15,22 @@ import { ChipsInputExample } from '../../../../../assets/angular-material-exampl
|
|||
import { ChipsOverviewExample } from '../../../../../assets/angular-material-examples/chips-overview/chips-overview-example';
|
||||
import { ChipsStackedExample } from '../../../../../assets/angular-material-examples/chips-stacked/chips-stacked-example';
|
||||
import { DatepickerApiExample } from '../../../../../assets/angular-material-examples/datepicker-api/datepicker-api-example';
|
||||
import { DatepickerDisabledExample } from '../../../../../assets/angular-material-examples/datepicker-disabled/datepicker-disabled-example';
|
||||
import { DatepickerEventsExample } from '../../../../../assets/angular-material-examples/datepicker-events/datepicker-events-example';
|
||||
import { DatepickerFilterExample } from '../../../../../assets/angular-material-examples/datepicker-filter/datepicker-filter-example';
|
||||
import { DatepickerFormatsExample } from '../../../../../assets/angular-material-examples/datepicker-formats/datepicker-formats-example';
|
||||
import { DatepickerLocaleExample } from '../../../../../assets/angular-material-examples/datepicker-locale/datepicker-locale-example';
|
||||
import { DatepickerMinMaxExample } from '../../../../../assets/angular-material-examples/datepicker-min-max/datepicker-min-max-example';
|
||||
import { DatepickerMomentExample } from '../../../../../assets/angular-material-examples/datepicker-moment/datepicker-moment-example';
|
||||
import { DatepickerOverviewExample } from '../../../../../assets/angular-material-examples/datepicker-overview/datepicker-overview-example';
|
||||
import { DatepickerStartViewExample } from '../../../../../assets/angular-material-examples/datepicker-start-view/datepicker-start-view-example';
|
||||
import { DatepickerTouchExample } from '../../../../../assets/angular-material-examples/datepicker-touch/datepicker-touch-example';
|
||||
import { DatepickerValueExample } from '../../../../../assets/angular-material-examples/datepicker-value/datepicker-value-example';
|
||||
import { DialogContentExampleDialog, DialogContentExample } from '../../../../../assets/angular-material-examples/dialog-content/dialog-content-example';
|
||||
import { DialogDataExampleDialog, DialogDataExample } from '../../../../../assets/angular-material-examples/dialog-data/dialog-data-example';
|
||||
import { DialogElementsExampleDialog, DialogElementsExample } from '../../../../../assets/angular-material-examples/dialog-elements/dialog-elements-example';
|
||||
import { DialogOverviewExampleDialog, DialogOverviewExample } from '../../../../../assets/angular-material-examples/dialog-overview/dialog-overview-example';
|
||||
import { ElevationOverviewExample } from '../../../../../assets/angular-material-examples/elevation-overview/elevation-overview-example';
|
||||
import { ExpansionOverviewExample } from '../../../../../assets/angular-material-examples/expansion-overview/expansion-overview-example';
|
||||
import { ExpansionStepsExample } from '../../../../../assets/angular-material-examples/expansion-steps/expansion-steps-example';
|
||||
import { MyTelInput, FormFieldCustomControlExample } from '../../../../../assets/angular-material-examples/form-field-custom-control/form-field-custom-control-example';
|
||||
|
|
@ -37,7 +44,9 @@ import { GridListDynamicExample } from '../../../../../assets/angular-material-e
|
|||
import { GridListOverviewExample } from '../../../../../assets/angular-material-examples/grid-list-overview/grid-list-overview-example';
|
||||
import { IconOverviewExample } from '../../../../../assets/angular-material-examples/icon-overview/icon-overview-example';
|
||||
import { IconSvgExample } from '../../../../../assets/angular-material-examples/icon-svg/icon-svg-example';
|
||||
import { InputAutosizeTextareaExample } from '../../../../../assets/angular-material-examples/input-autosize-textarea/input-autosize-textarea-example';
|
||||
import { InputClearableExample } from '../../../../../assets/angular-material-examples/input-clearable/input-clearable-example';
|
||||
import { InputErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/input-error-state-matcher/input-error-state-matcher-example';
|
||||
import { InputErrorsExample } from '../../../../../assets/angular-material-examples/input-errors/input-errors-example';
|
||||
import { InputFormExample } from '../../../../../assets/angular-material-examples/input-form/input-form-example';
|
||||
import { InputHintExample } from '../../../../../assets/angular-material-examples/input-hint/input-hint-example';
|
||||
|
|
@ -51,14 +60,27 @@ import { MenuOverviewExample } from '../../../../../assets/angular-material-exam
|
|||
import { NestedMenuExample } from '../../../../../assets/angular-material-examples/nested-menu/nested-menu-example';
|
||||
import { PaginatorConfigurableExample } from '../../../../../assets/angular-material-examples/paginator-configurable/paginator-configurable-example';
|
||||
import { PaginatorOverviewExample } from '../../../../../assets/angular-material-examples/paginator-overview/paginator-overview-example';
|
||||
import { ProgressBarBufferExample } from '../../../../../assets/angular-material-examples/progress-bar-buffer/progress-bar-buffer-example';
|
||||
import { ProgressBarConfigurableExample } from '../../../../../assets/angular-material-examples/progress-bar-configurable/progress-bar-configurable-example';
|
||||
import { ProgressBarOverviewExample } from '../../../../../assets/angular-material-examples/progress-bar-overview/progress-bar-overview-example';
|
||||
import { ProgressBarDeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-determinate/progress-bar-determinate-example';
|
||||
import { ProgressBarIndeterminateExample } from '../../../../../assets/angular-material-examples/progress-bar-indeterminate/progress-bar-indeterminate-example';
|
||||
import { ProgressBarQueryExample } from '../../../../../assets/angular-material-examples/progress-bar-query/progress-bar-query-example';
|
||||
import { ProgressSpinnerConfigurableExample } from '../../../../../assets/angular-material-examples/progress-spinner-configurable/progress-spinner-configurable-example';
|
||||
import { ProgressSpinnerOverviewExample } from '../../../../../assets/angular-material-examples/progress-spinner-overview/progress-spinner-overview-example';
|
||||
import { RadioNgModelExample } from '../../../../../assets/angular-material-examples/radio-ng-model/radio-ng-model-example';
|
||||
import { RadioOverviewExample } from '../../../../../assets/angular-material-examples/radio-overview/radio-overview-example';
|
||||
import { SelectCustomTriggerExample } from '../../../../../assets/angular-material-examples/select-custom-trigger/select-custom-trigger-example';
|
||||
import { SelectDisabledExample } from '../../../../../assets/angular-material-examples/select-disabled/select-disabled-example';
|
||||
import { SelectErrorStateMatcherExample } from '../../../../../assets/angular-material-examples/select-error-state-matcher/select-error-state-matcher-example';
|
||||
import { SelectFormExample } from '../../../../../assets/angular-material-examples/select-form/select-form-example';
|
||||
import { SelectHintErrorExample } from '../../../../../assets/angular-material-examples/select-hint-error/select-hint-error-example';
|
||||
import { SelectMultipleExample } from '../../../../../assets/angular-material-examples/select-multiple/select-multiple-example';
|
||||
import { SelectNoRippleExample } from '../../../../../assets/angular-material-examples/select-no-ripple/select-no-ripple-example';
|
||||
import { SelectOptgroupExample } from '../../../../../assets/angular-material-examples/select-optgroup/select-optgroup-example';
|
||||
import { SelectOverviewExample } from '../../../../../assets/angular-material-examples/select-overview/select-overview-example';
|
||||
import { SelectPanelClassExample } from '../../../../../assets/angular-material-examples/select-panel-class/select-panel-class-example';
|
||||
import { SelectResetExample } from '../../../../../assets/angular-material-examples/select-reset/select-reset-example';
|
||||
import { SelectValueBindingExample } from '../../../../../assets/angular-material-examples/select-value-binding/select-value-binding-example';
|
||||
import { SidenavFabExample } from '../../../../../assets/angular-material-examples/sidenav-fab/sidenav-fab-example';
|
||||
import { SidenavOverviewExample } from '../../../../../assets/angular-material-examples/sidenav-overview/sidenav-overview-example';
|
||||
import { SlideToggleConfigurableExample } from '../../../../../assets/angular-material-examples/slide-toggle-configurable/slide-toggle-configurable-example';
|
||||
|
|
@ -97,10 +119,16 @@ export const COMPONENT_MAP = {
|
|||
'datepicker' : [
|
||||
'datepicker-overview',
|
||||
'datepicker-start-view',
|
||||
'datepicker-value',
|
||||
'datepicker-min-max',
|
||||
'datepicker-filter',
|
||||
'datepicker-events',
|
||||
'datepicker-disabled',
|
||||
'datepicker-touch',
|
||||
'datepicker-api'
|
||||
'datepicker-api',
|
||||
'datepicker-locale',
|
||||
'datepicker-moment',
|
||||
'datepicker-formats'
|
||||
],
|
||||
'form-field' : [
|
||||
'form-field-overview',
|
||||
|
|
@ -114,6 +142,8 @@ export const COMPONENT_MAP = {
|
|||
'input' : [
|
||||
'input-overview',
|
||||
'input-errors',
|
||||
'input-error-state-matcher',
|
||||
'input-autosize-textarea',
|
||||
'input-prefix-suffix',
|
||||
'input-hint',
|
||||
'input-clearable',
|
||||
|
|
@ -125,7 +155,17 @@ export const COMPONENT_MAP = {
|
|||
],
|
||||
'select' : [
|
||||
'select-overview',
|
||||
'select-form'
|
||||
'select-value-binding',
|
||||
'select-form',
|
||||
'select-hint-error',
|
||||
'select-disabled',
|
||||
'select-reset',
|
||||
'select-optgroup',
|
||||
'select-multiple',
|
||||
'select-custom-trigger',
|
||||
'select-no-ripple',
|
||||
'select-panel-class',
|
||||
'select-error-state-matcher'
|
||||
],
|
||||
'slider' : [
|
||||
'slider-overview',
|
||||
|
|
@ -169,6 +209,9 @@ export const COMPONENT_MAP = {
|
|||
'tabs-overview',
|
||||
'tabs-template-label'
|
||||
],
|
||||
'elevation' : [
|
||||
'elevation-overview'
|
||||
],
|
||||
'expansion-panel' : [
|
||||
'expansion-overview',
|
||||
'expansion-steps'
|
||||
|
|
@ -195,7 +238,10 @@ export const COMPONENT_MAP = {
|
|||
'progress-spinner-configurable'
|
||||
],
|
||||
'progress-bar' : [
|
||||
'progress-bar-overview',
|
||||
'progress-bar-determinate',
|
||||
'progress-bar-indeterminate',
|
||||
'progress-bar-query',
|
||||
'progress-bar-buffer',
|
||||
'progress-bar-configurable'
|
||||
],
|
||||
'dialog' : [
|
||||
|
|
@ -324,41 +370,77 @@ export const EXAMPLE_COMPONENTS = {
|
|||
selectorName : null
|
||||
},
|
||||
'datepicker-api' : {
|
||||
title : 'Datepicker API',
|
||||
title : 'Datepicker open method ',
|
||||
component : DatepickerApiExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-disabled' : {
|
||||
title : 'Disabled datepicker ',
|
||||
component : DatepickerDisabledExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-events' : {
|
||||
title : 'Datepicker input and change events ',
|
||||
component : DatepickerEventsExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-filter' : {
|
||||
title : 'Datepicker Filter',
|
||||
title : 'Datepicker with filter validation ',
|
||||
component : DatepickerFilterExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-formats' : {
|
||||
title : 'Datepicker with custom formats ',
|
||||
component : DatepickerFormatsExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-locale' : {
|
||||
title : 'Datepicker with different locale ',
|
||||
component : DatepickerLocaleExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-min-max' : {
|
||||
title : 'Datepicker Min Max',
|
||||
title : 'Datepicker with min & max validation ',
|
||||
component : DatepickerMinMaxExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-moment' : {
|
||||
title : 'Datepicker that uses Moment.js dates ',
|
||||
component : DatepickerMomentExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-overview' : {
|
||||
title : 'Basic datepicker',
|
||||
title : 'Basic datepicker ',
|
||||
component : DatepickerOverviewExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-start-view' : {
|
||||
title : 'Datepicker start date',
|
||||
title : 'Datepicker start date ',
|
||||
component : DatepickerStartViewExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-touch' : {
|
||||
title : 'Datepicker Touch',
|
||||
title : 'Datepicker touch UI ',
|
||||
component : DatepickerTouchExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'datepicker-value' : {
|
||||
title : 'Datepicker selected value ',
|
||||
component : DatepickerValueExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'dialog-content' : {
|
||||
title : 'Dialog with header, scrollable content and actions',
|
||||
component : DialogContentExample,
|
||||
|
|
@ -383,6 +465,12 @@ export const EXAMPLE_COMPONENTS = {
|
|||
additionalFiles: ['dialog-overview-example-dialog.html'],
|
||||
selectorName : 'DialogOverviewExample, DialogOverviewExampleDialog'
|
||||
},
|
||||
'elevation-overview' : {
|
||||
title : 'Elevation CSS classes',
|
||||
component : ElevationOverviewExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'expansion-overview' : {
|
||||
title : 'Basic expansion panel',
|
||||
component : ExpansionOverviewExample,
|
||||
|
|
@ -461,14 +549,26 @@ export const EXAMPLE_COMPONENTS = {
|
|||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'input-autosize-textarea' : {
|
||||
title : 'Auto-resizing textarea ',
|
||||
component : InputAutosizeTextareaExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'input-clearable' : {
|
||||
title : 'Input Clearable',
|
||||
title : 'Input with a clear button',
|
||||
component : InputClearableExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'input-error-state-matcher' : {
|
||||
title : 'Input with a custom ErrorStateMatcher ',
|
||||
component : InputErrorStateMatcherExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'input-errors' : {
|
||||
title : 'Input Errors',
|
||||
title : 'Input with error messages',
|
||||
component : InputErrorsExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
|
|
@ -480,7 +580,7 @@ export const EXAMPLE_COMPONENTS = {
|
|||
selectorName : null
|
||||
},
|
||||
'input-hint' : {
|
||||
title : 'Input hints',
|
||||
title : 'Input with hints',
|
||||
component : InputHintExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
|
|
@ -492,7 +592,7 @@ export const EXAMPLE_COMPONENTS = {
|
|||
selectorName : null
|
||||
},
|
||||
'input-prefix-suffix' : {
|
||||
title : 'Input Prefixes and Suffixes',
|
||||
title : 'Inputs with prefixes and suffixes',
|
||||
component : InputPrefixSuffixExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
|
|
@ -545,15 +645,33 @@ export const EXAMPLE_COMPONENTS = {
|
|||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'progress-bar-buffer' : {
|
||||
title : 'Buffer progress-bar',
|
||||
component : ProgressBarBufferExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'progress-bar-configurable' : {
|
||||
title : 'Configurable progress-bar',
|
||||
component : ProgressBarConfigurableExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'progress-bar-overview' : {
|
||||
title : 'Basic progress-bar',
|
||||
component : ProgressBarOverviewExample,
|
||||
'progress-bar-determinate' : {
|
||||
title : 'Determinate progress-bar',
|
||||
component : ProgressBarDeterminateExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'progress-bar-indeterminate' : {
|
||||
title : 'Indeterminate progress-bar',
|
||||
component : ProgressBarIndeterminateExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'progress-bar-query' : {
|
||||
title : 'Query progress-bar',
|
||||
component : ProgressBarQueryExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
|
|
@ -581,18 +699,78 @@ export const EXAMPLE_COMPONENTS = {
|
|||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-custom-trigger' : {
|
||||
title : 'Select with custom trigger text ',
|
||||
component : SelectCustomTriggerExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-disabled' : {
|
||||
title : 'Disabled select ',
|
||||
component : SelectDisabledExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-error-state-matcher' : {
|
||||
title : 'Select with a custom ErrorStateMatcher ',
|
||||
component : SelectErrorStateMatcherExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-form' : {
|
||||
title : 'Select in a form',
|
||||
component : SelectFormExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-hint-error' : {
|
||||
title : 'Select with form field features ',
|
||||
component : SelectHintErrorExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-multiple' : {
|
||||
title : 'Select with multiple selection ',
|
||||
component : SelectMultipleExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-no-ripple' : {
|
||||
title : 'Select with no option ripple ',
|
||||
component : SelectNoRippleExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-optgroup' : {
|
||||
title : 'Select with option groups ',
|
||||
component : SelectOptgroupExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-overview' : {
|
||||
title : 'Basic select',
|
||||
component : SelectOverviewExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-panel-class' : {
|
||||
title : 'Select with custom panel styling',
|
||||
component : SelectPanelClassExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-reset' : {
|
||||
title : 'Select with reset option ',
|
||||
component : SelectResetExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'select-value-binding' : {
|
||||
title : 'Select with 2-way value binding ',
|
||||
component : SelectValueBindingExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
},
|
||||
'sidenav-fab' : {
|
||||
title : 'Sidenav with a FAB',
|
||||
component : SidenavFabExample,
|
||||
|
|
@ -678,7 +856,7 @@ export const EXAMPLE_COMPONENTS = {
|
|||
selectorName : null
|
||||
},
|
||||
'table-overview' : {
|
||||
title : 'Feature-rich data table',
|
||||
title : 'Data table with sorting, pagination, and filtering.',
|
||||
component : TableOverviewExample,
|
||||
additionalFiles: null,
|
||||
selectorName : null
|
||||
|
|
@ -751,19 +929,22 @@ export const EXAMPLE_LIST = [
|
|||
ChipsOverviewExample,
|
||||
ChipsStackedExample,
|
||||
DatepickerApiExample,
|
||||
DatepickerDisabledExample,
|
||||
DatepickerEventsExample,
|
||||
DatepickerFilterExample,
|
||||
DatepickerFormatsExample,
|
||||
DatepickerLocaleExample,
|
||||
DatepickerMinMaxExample,
|
||||
DatepickerMomentExample,
|
||||
DatepickerOverviewExample,
|
||||
DatepickerStartViewExample,
|
||||
DatepickerTouchExample,
|
||||
DialogContentExampleDialog,
|
||||
DialogContentExample,
|
||||
DialogDataExampleDialog,
|
||||
DialogDataExample,
|
||||
DialogElementsExampleDialog,
|
||||
DialogElementsExample,
|
||||
DialogOverviewExampleDialog,
|
||||
DialogOverviewExample,
|
||||
DatepickerValueExample,
|
||||
DialogContentExampleDialog, DialogContentExample,
|
||||
DialogDataExampleDialog, DialogDataExample,
|
||||
DialogElementsExampleDialog, DialogElementsExample,
|
||||
DialogOverviewExampleDialog, DialogOverviewExample,
|
||||
ElevationOverviewExample,
|
||||
ExpansionOverviewExample,
|
||||
ExpansionStepsExample,
|
||||
MyTelInput, FormFieldCustomControlExample,
|
||||
|
|
@ -777,7 +958,9 @@ export const EXAMPLE_LIST = [
|
|||
GridListOverviewExample,
|
||||
IconOverviewExample,
|
||||
IconSvgExample,
|
||||
InputAutosizeTextareaExample,
|
||||
InputClearableExample,
|
||||
InputErrorStateMatcherExample,
|
||||
InputErrorsExample,
|
||||
InputFormExample,
|
||||
InputHintExample,
|
||||
|
|
@ -791,14 +974,27 @@ export const EXAMPLE_LIST = [
|
|||
NestedMenuExample,
|
||||
PaginatorConfigurableExample,
|
||||
PaginatorOverviewExample,
|
||||
ProgressBarBufferExample,
|
||||
ProgressBarConfigurableExample,
|
||||
ProgressBarOverviewExample,
|
||||
ProgressBarDeterminateExample,
|
||||
ProgressBarIndeterminateExample,
|
||||
ProgressBarQueryExample,
|
||||
ProgressSpinnerConfigurableExample,
|
||||
ProgressSpinnerOverviewExample,
|
||||
RadioNgModelExample,
|
||||
RadioOverviewExample,
|
||||
SelectCustomTriggerExample,
|
||||
SelectDisabledExample,
|
||||
SelectErrorStateMatcherExample,
|
||||
SelectFormExample,
|
||||
SelectHintErrorExample,
|
||||
SelectMultipleExample,
|
||||
SelectNoRippleExample,
|
||||
SelectOptgroupExample,
|
||||
SelectOverviewExample,
|
||||
SelectPanelClassExample,
|
||||
SelectResetExample,
|
||||
SelectValueBindingExample,
|
||||
SidenavFabExample,
|
||||
SidenavOverviewExample,
|
||||
SlideToggleConfigurableExample,
|
||||
|
|
|
|||
|
|
@ -649,6 +649,12 @@ export class NavigationModel
|
|||
'type' : 'item',
|
||||
'url' : '/components/angular-material/tabs'
|
||||
},
|
||||
{
|
||||
'id' : 'elevation',
|
||||
'title': 'Elevation',
|
||||
'type' : 'item',
|
||||
'url' : '/components/angular-material/elevation'
|
||||
},
|
||||
{
|
||||
'id' : 'expansion-panel',
|
||||
'title': 'Expansion Panel',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { MatChipInputEvent } from '@angular/material';
|
||||
import { ENTER } from '@angular/cdk/keycodes';
|
||||
|
||||
const COMMA = 188;
|
||||
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
||||
|
||||
/**
|
||||
* @title Chips with input
|
||||
|
|
|
|||
|
|
@ -13,16 +13,20 @@ export class ChipsStackedExample
|
|||
color: string;
|
||||
|
||||
availableColors = [
|
||||
{name : 'none',
|
||||
{
|
||||
name : 'none',
|
||||
color: ''
|
||||
},
|
||||
{name : 'Primary',
|
||||
{
|
||||
name : 'Primary',
|
||||
color: 'primary'
|
||||
},
|
||||
{name : 'Accent',
|
||||
{
|
||||
name : 'Accent',
|
||||
color: 'accent'
|
||||
},
|
||||
{name : 'Warn',
|
||||
{
|
||||
name : 'Warn',
|
||||
color: 'warn'
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Datepicker API
|
||||
*/
|
||||
/** @title Datepicker open method */
|
||||
@Component({
|
||||
selector : 'datepicker-api-example',
|
||||
templateUrl: 'datepicker-api-example.html',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="dp1" placeholder="Completely disabled" disabled>
|
||||
<mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dp1></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="dp2" placeholder="Popup disabled">
|
||||
<mat-datepicker-toggle matSuffix [for]="dp2" disabled></mat-datepicker-toggle>
|
||||
<mat-datepicker #dp2></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="dp3" placeholder="Input disabled" disabled>
|
||||
<mat-datepicker-toggle matSuffix [for]="dp3"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dp3 disabled="false"></mat-datepicker>
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/** @title Disabled datepicker */
|
||||
@Component({
|
||||
selector : 'datepicker-disabled-example',
|
||||
templateUrl: 'datepicker-disabled-example.html',
|
||||
styleUrls : ['datepicker-disabled-example.css']
|
||||
})
|
||||
export class DatepickerDisabledExample
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.example-events {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
border: 1px solid #555;
|
||||
overflow: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="picker" placeholder="Input & change events"
|
||||
(dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="example-events">
|
||||
<div *ngFor="let e of events">{{e}}</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
|
||||
|
||||
/** @title Datepicker input and change events */
|
||||
@Component({
|
||||
selector : 'datepicker-events-example',
|
||||
templateUrl: 'datepicker-events-example.html',
|
||||
styleUrls : ['datepicker-events-example.css']
|
||||
})
|
||||
export class DatepickerEventsExample
|
||||
{
|
||||
events: string[] = [];
|
||||
|
||||
addEvent(type: string, event: MatDatepickerInputEvent<Date>)
|
||||
{
|
||||
this.events.push(`${type}: ${event.value}`);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Datepicker Filter
|
||||
*/
|
||||
/** @title Datepicker with filter validation */
|
||||
@Component({
|
||||
selector : 'datepicker-filter-example',
|
||||
templateUrl: 'datepicker-filter-example.html',
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="dp" placeholder="Verbose datepicker" [formControl]="date">
|
||||
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dp></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { MomentDateAdapter } from '@angular/material-moment-adapter';
|
||||
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
|
||||
|
||||
import * as moment from 'moment';
|
||||
|
||||
// See the Moment.js docs for the meaning of these formats:
|
||||
// https://momentjs.com/docs/#/displaying/format/
|
||||
export const MY_FORMATS = {
|
||||
parse : {
|
||||
dateInput: 'LL'
|
||||
},
|
||||
display: {
|
||||
dateInput : 'LL',
|
||||
monthYearLabel : 'MMM YYYY',
|
||||
dateA11yLabel : 'LL',
|
||||
monthYearA11yLabel: 'MMMM YYYY'
|
||||
}
|
||||
};
|
||||
|
||||
/** @title Datepicker with custom formats */
|
||||
@Component({
|
||||
selector : 'datepicker-formats-example',
|
||||
templateUrl: 'datepicker-formats-example.html',
|
||||
styleUrls : ['datepicker-formats-example.css'],
|
||||
providers : [
|
||||
// `MomentDateAdapter` can be automatically provided by importing `MomentDateModule` in your
|
||||
// application's root module. We provide it at the component level here, due to limitations of
|
||||
// our example generation script.
|
||||
{provide : DateAdapter,
|
||||
useClass: MomentDateAdapter,
|
||||
deps : [MAT_DATE_LOCALE]
|
||||
},
|
||||
|
||||
{provide : MAT_DATE_FORMATS,
|
||||
useValue: MY_FORMATS
|
||||
}
|
||||
]
|
||||
})
|
||||
export class DatepickerFormatsExample
|
||||
{
|
||||
date = new FormControl(moment());
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="dp" placeholder="Different locale">
|
||||
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dp></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<button mat-button (click)="french()">Dynamically switch to French</button>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
|
||||
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
|
||||
|
||||
/** @title Datepicker with different locale */
|
||||
@Component({
|
||||
selector : 'datepicker-locale-example',
|
||||
templateUrl: 'datepicker-locale-example.html',
|
||||
styleUrls : ['datepicker-locale-example.css'],
|
||||
providers : [
|
||||
// The locale would typically be provided on the root module of your application. We do it at
|
||||
// the component level here, due to limitations of our example generation script.
|
||||
{
|
||||
provide : MAT_DATE_LOCALE,
|
||||
useValue: 'ja-JP'
|
||||
},
|
||||
|
||||
// `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
|
||||
// `MatMomentDateModule` in your applications root module. We provide it at the component level
|
||||
// here, due to limitations of our example generation script.
|
||||
{
|
||||
provide : DateAdapter,
|
||||
useClass: MomentDateAdapter,
|
||||
deps : [MAT_DATE_LOCALE]
|
||||
},
|
||||
{
|
||||
provide : MAT_DATE_FORMATS,
|
||||
useValue: MAT_MOMENT_DATE_FORMATS
|
||||
}
|
||||
]
|
||||
})
|
||||
export class DatepickerLocaleExample
|
||||
{
|
||||
constructor(private adapter: DateAdapter<any>)
|
||||
{
|
||||
}
|
||||
|
||||
french()
|
||||
{
|
||||
this.adapter.setLocale('fr');
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Datepicker Min Max
|
||||
*/
|
||||
/** @title Datepicker with min & max validation */
|
||||
@Component({
|
||||
selector : 'datepicker-min-max-example',
|
||||
templateUrl: 'datepicker-min-max-example.html',
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="dp" placeholder="Moment.js datepicker" [formControl]="date">
|
||||
<mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
|
||||
<mat-datepicker #dp></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
import { MAT_MOMENT_DATE_FORMATS, MomentDateAdapter } from '@angular/material-moment-adapter';
|
||||
import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
|
||||
|
||||
import * as moment from 'moment';
|
||||
|
||||
/** @title Datepicker that uses Moment.js dates */
|
||||
@Component({
|
||||
selector : 'datepicker-moment-example',
|
||||
templateUrl: 'datepicker-moment-example.html',
|
||||
styleUrls : ['datepicker-moment-example.css'],
|
||||
providers : [
|
||||
// `MomentDateAdapter` and `MAT_MOMENT_DATE_FORMATS` can be automatically provided by importing
|
||||
// `MatMomentDateModule` in your applications root module. We provide it at the component level
|
||||
// here, due to limitations of our example generation script.
|
||||
{
|
||||
provide : DateAdapter,
|
||||
useClass: MomentDateAdapter,
|
||||
deps : [MAT_DATE_LOCALE]
|
||||
},
|
||||
{
|
||||
provide : MAT_DATE_FORMATS,
|
||||
useValue: MAT_MOMENT_DATE_FORMATS
|
||||
}
|
||||
]
|
||||
})
|
||||
export class DatepickerMomentExample
|
||||
{
|
||||
// Datepicker takes `Moment` objects instead of `Date` objects.
|
||||
date = new FormControl(moment([2017, 0, 1]));
|
||||
}
|
||||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Basic datepicker
|
||||
*/
|
||||
/** @title Basic datepicker */
|
||||
@Component({
|
||||
selector : 'datepicker-overview-example',
|
||||
templateUrl: 'datepicker-overview-example.html',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Datepicker start date
|
||||
*/
|
||||
/** @title Datepicker start date */
|
||||
@Component({
|
||||
selector : 'datepicker-start-view-example',
|
||||
templateUrl: 'datepicker-start-view-example.html',
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Datepicker Touch
|
||||
*/
|
||||
/** @title Datepicker touch UI */
|
||||
@Component({
|
||||
selector : 'datepicker-touch-example',
|
||||
templateUrl: 'datepicker-touch-example.html',
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="picker1" placeholder="Angular forms" [formControl]="date">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker1></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="picker2" placeholder="Angular forms (w/ deserialization)"
|
||||
[formControl]="serializedDate">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker2></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field>
|
||||
<input matInput [matDatepicker]="picker3" placeholder="Value binding" [value]="date.value">
|
||||
<mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
|
||||
<mat-datepicker #picker3></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
/** @title Datepicker selected value */
|
||||
@Component({
|
||||
selector : 'datepicker-value-example',
|
||||
templateUrl: 'datepicker-value-example.html',
|
||||
styleUrls : ['datepicker-value-example.css']
|
||||
})
|
||||
export class DatepickerValueExample
|
||||
{
|
||||
date = new FormControl(new Date());
|
||||
serializedDate = new FormControl((new Date()).toISOString());
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.example-container {
|
||||
padding: 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<div class="example-container"
|
||||
[class.mat-elevation-z2]="!isActive"
|
||||
[class.mat-elevation-z8]="isActive">
|
||||
Example
|
||||
</div>
|
||||
|
||||
<button mat-button (click)="isActive = !isActive">Toggle Elevation</button>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Elevation CSS classes
|
||||
*/
|
||||
@Component({
|
||||
selector : 'elevation-overview-example',
|
||||
styleUrls : ['elevation-overview-example.css'],
|
||||
templateUrl: 'elevation-overview-example.html'
|
||||
})
|
||||
export class ElevationOverviewExample
|
||||
{
|
||||
isActive = false;
|
||||
}
|
||||
|
|
@ -165,12 +165,12 @@ export class MyTelInput implements MatFormFieldControl<MyTel>, OnDestroy
|
|||
@Component({
|
||||
selector: 'form-field-custom-control-example',
|
||||
template: `
|
||||
<mat-form-field>
|
||||
<my-tel-input placeholder="Phone number" required></my-tel-input>
|
||||
<mat-icon matSuffix>phone</mat-icon>
|
||||
<mat-hint>Include area code</mat-hint>
|
||||
</mat-form-field>
|
||||
`
|
||||
<mat-form-field>
|
||||
<my-tel-input placeholder="Phone number" required></my-tel-input>
|
||||
<mat-icon matSuffix>phone</mat-icon>
|
||||
<mat-hint>Include area code</mat-hint>
|
||||
</mat-form-field>
|
||||
`
|
||||
})
|
||||
export class FormFieldCustomControlExample
|
||||
{
|
||||
|
|
|
|||
|
|
@ -9,6 +9,6 @@
|
|||
|
||||
<mat-form-field [color]="options.value.color">
|
||||
<input matInput type="number" placeholder="Font size (px)" formControlName="fontSize" min="10">
|
||||
<mat-error *ngIf="options.get('fontSize').invalid">Min size: 10px</mat-error>
|
||||
<mat-error *ngIf="options.get('fontSize')?.invalid">Min size: 10px</mat-error>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -10,22 +10,26 @@ import { Component } from '@angular/core';
|
|||
export class GridListDynamicExample
|
||||
{
|
||||
tiles = [
|
||||
{text : 'One',
|
||||
{
|
||||
text : 'One',
|
||||
cols : 3,
|
||||
rows : 1,
|
||||
color: 'lightblue'
|
||||
},
|
||||
{text : 'Two',
|
||||
{
|
||||
text : 'Two',
|
||||
cols : 1,
|
||||
rows : 2,
|
||||
color: 'lightgreen'
|
||||
},
|
||||
{text : 'Three',
|
||||
{
|
||||
text : 'Three',
|
||||
cols : 1,
|
||||
rows : 1,
|
||||
color: 'lightpink'
|
||||
},
|
||||
{text : 'Four',
|
||||
{
|
||||
text : 'Four',
|
||||
cols : 2,
|
||||
rows : 1,
|
||||
color: '#DDBDF1'
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
<mat-form-field>
|
||||
<textarea matInput placeholder="Autosize textarea" matTextareaAutosize matAutosizeMinRows="2"
|
||||
matAutosizeMaxRows="5"></textarea>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/** @title Auto-resizing textarea */
|
||||
@Component({
|
||||
selector : 'input-autosize-textarea-example',
|
||||
templateUrl: './input-autosize-textarea-example.html',
|
||||
styleUrls : ['./input-autosize-textarea-example.css']
|
||||
})
|
||||
export class InputAutosizeTextareaExample
|
||||
{
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Input Clearable
|
||||
* @title Input with a clear button
|
||||
*/
|
||||
@Component({
|
||||
selector : 'input-clearable-example',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
.example-form {
|
||||
min-width: 150px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.example-full-width {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<form class="example-form">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input matInput placeholder="Email" [formControl]="emailFormControl"
|
||||
[errorStateMatcher]="matcher">
|
||||
<mat-hint>Errors appear instantly!</mat-hint>
|
||||
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="emailFormControl.hasError('required')">
|
||||
Email is <strong>required</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
|
||||
import { ErrorStateMatcher } from '@angular/material/core';
|
||||
|
||||
/** Error when invalid control is dirty, touched, or submitted. */
|
||||
export class MyErrorStateMatcher implements ErrorStateMatcher
|
||||
{
|
||||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
|
||||
{
|
||||
const isSubmitted = form && form.submitted;
|
||||
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
|
||||
}
|
||||
}
|
||||
|
||||
/** @title Input with a custom ErrorStateMatcher */
|
||||
@Component({
|
||||
selector : 'input-error-state-matcher-example',
|
||||
templateUrl: './input-error-state-matcher-example.html',
|
||||
styleUrls : ['./input-error-state-matcher-example.css']
|
||||
})
|
||||
export class InputErrorStateMatcherExample
|
||||
{
|
||||
emailFormControl = new FormControl('', [
|
||||
Validators.required,
|
||||
Validators.email
|
||||
]);
|
||||
|
||||
matcher = new MyErrorStateMatcher();
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<form class="example-form">
|
||||
<mat-form-field class="example-full-width">
|
||||
<input matInput placeholder="Email" [formControl]="emailFormControl">
|
||||
<mat-error *ngIf="emailFormControl.hasError('pattern')">
|
||||
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
|
||||
Please enter a valid email address
|
||||
</mat-error>
|
||||
<mat-error *ngIf="emailFormControl.hasError('required')">
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl, Validators } from '@angular/forms';
|
||||
|
||||
const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
|
||||
|
||||
/**
|
||||
* @title Input Errors
|
||||
* @title Input with error messages
|
||||
*/
|
||||
@Component({
|
||||
selector : 'input-errors-example',
|
||||
|
|
@ -13,10 +11,8 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA
|
|||
})
|
||||
export class InputErrorsExample
|
||||
{
|
||||
|
||||
emailFormControl = new FormControl('', [
|
||||
Validators.required,
|
||||
Validators.pattern(EMAIL_REGEX)
|
||||
Validators.email
|
||||
]);
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Input hints
|
||||
* @title Input with hints
|
||||
*/
|
||||
@Component({
|
||||
selector : 'input-hint-example',
|
||||
|
|
|
|||
|
|
@ -2,4 +2,8 @@
|
|||
<mat-form-field class="example-full-width">
|
||||
<input matInput placeholder="Favorite food" value="Sushi">
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="example-full-width">
|
||||
<textarea matInput placeholder="Leave a comment"></textarea>
|
||||
</mat-form-field>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Input Prefixes and Suffixes
|
||||
* @title Inputs with prefixes and suffixes
|
||||
*/
|
||||
@Component({
|
||||
selector : 'input-prefix-suffix-example',
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1 @@
|
|||
<mat-progress-bar mode="buffer"></mat-progress-bar>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Buffer progress-bar
|
||||
*/
|
||||
@Component({
|
||||
selector : 'progress-bar-buffer-example',
|
||||
templateUrl: 'progress-bar-buffer-example.html'
|
||||
})
|
||||
export class ProgressBarBufferExample
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1 @@
|
|||
<mat-progress-bar mode="determinate" value="40"></mat-progress-bar>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Determinate progress-bar
|
||||
*/
|
||||
@Component({
|
||||
selector : 'progress-bar-determinate-example',
|
||||
templateUrl: 'progress-bar-determinate-example.html'
|
||||
})
|
||||
export class ProgressBarDeterminateExample
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Indeterminate progress-bar
|
||||
*/
|
||||
@Component({
|
||||
selector : 'progress-bar-indeterminate-example',
|
||||
templateUrl: 'progress-bar-indeterminate-example.html'
|
||||
})
|
||||
export class ProgressBarIndeterminateExample
|
||||
{
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Basic progress-bar
|
||||
*/
|
||||
@Component({
|
||||
selector : 'progress-bar-overview-example',
|
||||
templateUrl: 'progress-bar-overview-example.html'
|
||||
})
|
||||
export class ProgressBarOverviewExample
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1 @@
|
|||
<mat-progress-bar mode="query"></mat-progress-bar>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/**
|
||||
* @title Query progress-bar
|
||||
*/
|
||||
@Component({
|
||||
selector : 'progress-bar-query-example',
|
||||
templateUrl: 'progress-bar-query-example.html'
|
||||
})
|
||||
export class ProgressBarQueryExample
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.example-additional-selection {
|
||||
opacity: 0.75;
|
||||
font-size: 0.75em;
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
|
||||
<mat-select-trigger>
|
||||
{{toppings.value ? toppings.value[0] : ''}}
|
||||
<span *ngIf="toppings.value?.length > 1" class="example-additional-selection">
|
||||
(+{{toppings.value.length - 1}} others)
|
||||
</span>
|
||||
</mat-select-trigger>
|
||||
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
/** @title Select with custom trigger text */
|
||||
@Component({
|
||||
selector : 'select-custom-trigger-example',
|
||||
templateUrl: 'select-custom-trigger-example.html',
|
||||
styleUrls : ['select-custom-trigger-example.css']
|
||||
})
|
||||
export class SelectCustomTriggerExample
|
||||
{
|
||||
toppings = new FormControl();
|
||||
|
||||
toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<p>
|
||||
<mat-checkbox [formControl]="disableSelect">Disable select</mat-checkbox>
|
||||
</p>
|
||||
<p>
|
||||
<mat-form-field>
|
||||
<mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
|
||||
<mat-option value="option1">Option 1</mat-option>
|
||||
<mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
|
||||
<mat-option value="option3">Option 3</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</p>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
/** @title Disabled select */
|
||||
@Component({
|
||||
selector : 'select-disabled-example',
|
||||
templateUrl: 'select-disabled-example.html',
|
||||
styleUrls : ['select-disabled-example.css']
|
||||
})
|
||||
export class SelectDisabledExample
|
||||
{
|
||||
disableSelect = new FormControl(false);
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Choose one" [formControl]="selected" [errorStateMatcher]="matcher">
|
||||
<mat-option>Clear</mat-option>
|
||||
<mat-option value="valid">Valid option</mat-option>
|
||||
<mat-option value="invalid">Invalid option</mat-option>
|
||||
</mat-select>
|
||||
<mat-hint>Errors appear instantly!</mat-hint>
|
||||
<mat-error *ngIf="selected.hasError('required')">You must make a selection</mat-error>
|
||||
<mat-error *ngIf="selected.hasError('pattern') && !selected.hasError('required')">
|
||||
Your selection is invalid
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl, FormGroupDirective, NgForm, Validators } from '@angular/forms';
|
||||
import { ErrorStateMatcher } from '@angular/material/core';
|
||||
|
||||
/** Error when invalid control is dirty, touched, or submitted. */
|
||||
export class MyErrorStateMatcher implements ErrorStateMatcher
|
||||
{
|
||||
isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean
|
||||
{
|
||||
const isSubmitted = form && form.submitted;
|
||||
return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
|
||||
}
|
||||
}
|
||||
|
||||
/** @title Select with a custom ErrorStateMatcher */
|
||||
@Component({
|
||||
selector : 'select-error-state-matcher-example',
|
||||
templateUrl: 'select-error-state-matcher-example.html',
|
||||
styleUrls : ['select-error-state-matcher-example.css']
|
||||
})
|
||||
export class SelectErrorStateMatcherExample
|
||||
{
|
||||
selected = new FormControl('valid', [
|
||||
Validators.required,
|
||||
Validators.pattern('valid')
|
||||
]);
|
||||
|
||||
matcher = new MyErrorStateMatcher();
|
||||
}
|
||||
|
|
@ -5,20 +5,24 @@ import { Component } from '@angular/core';
|
|||
*/
|
||||
@Component({
|
||||
selector : 'select-form-example',
|
||||
templateUrl: 'select-form-example.html'
|
||||
templateUrl: 'select-form-example.html',
|
||||
styleUrls : ['select-form-example.css']
|
||||
})
|
||||
export class SelectFormExample
|
||||
{
|
||||
selectedValue: string;
|
||||
|
||||
foods = [
|
||||
{value : 'steak-0',
|
||||
{
|
||||
value : 'steak-0',
|
||||
viewValue: 'Steak'
|
||||
},
|
||||
{value : 'pizza-1',
|
||||
{
|
||||
value : 'pizza-1',
|
||||
viewValue: 'Pizza'
|
||||
},
|
||||
{value : 'tacos-2',
|
||||
{
|
||||
value : 'tacos-2',
|
||||
viewValue: 'Tacos'
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Favorite animal" [formControl]="animalControl" required>
|
||||
<mat-option>--</mat-option>
|
||||
<mat-option *ngFor="let animal of animals" [value]="animal">
|
||||
{{animal.name}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
<mat-error *ngIf="animalControl.hasError('required')">Please choose an animal</mat-error>
|
||||
<mat-hint>{{animalControl.value?.sound}}</mat-hint>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl, Validators } from '@angular/forms';
|
||||
|
||||
/** @title Select with form field features */
|
||||
@Component({
|
||||
selector : 'select-hint-error-example',
|
||||
templateUrl: 'select-hint-error-example.html',
|
||||
styleUrls : ['select-hint-error-example.css']
|
||||
})
|
||||
export class SelectHintErrorExample
|
||||
{
|
||||
animalControl = new FormControl('', [Validators.required]);
|
||||
|
||||
animals = [
|
||||
{
|
||||
name : 'Dog',
|
||||
sound: 'Woof!'
|
||||
},
|
||||
{
|
||||
name : 'Cat',
|
||||
sound: 'Meow!'
|
||||
},
|
||||
{
|
||||
name : 'Cow',
|
||||
sound: 'Moo!'
|
||||
},
|
||||
{
|
||||
name : 'Fox',
|
||||
sound: 'Wa-pa-pa-pa-pa-pa-pow!'
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Toppings" [formControl]="toppings" multiple>
|
||||
<mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
/** @title Select with multiple selection */
|
||||
@Component({
|
||||
selector : 'select-multiple-example',
|
||||
templateUrl: 'select-multiple-example.html',
|
||||
styleUrls : ['select-multiple-example.css']
|
||||
})
|
||||
export class SelectMultipleExample
|
||||
{
|
||||
toppings = new FormControl();
|
||||
|
||||
toppingList = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Select an option" disableRipple>
|
||||
<mat-option value="1">Option 1</mat-option>
|
||||
<mat-option value="2">Option 2</mat-option>
|
||||
<mat-option value="3">Option 3</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/** @title Select with no option ripple */
|
||||
@Component({
|
||||
selector : 'select-no-ripple-example',
|
||||
templateUrl: 'select-no-ripple-example.html',
|
||||
styleUrls : ['select-no-ripple-example.css']
|
||||
})
|
||||
export class SelectNoRippleExample
|
||||
{
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
|
||||
<mat-option>-- None --</mat-option>
|
||||
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
|
||||
[disabled]="group.disabled">
|
||||
<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
|
||||
{{ pokemon.viewValue }}
|
||||
</mat-option>
|
||||
</mat-optgroup>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
/** @title Select with option groups */
|
||||
@Component({
|
||||
selector : 'select-optgroup-example',
|
||||
templateUrl: 'select-optgroup-example.html',
|
||||
styleUrls : ['select-optgroup-example.css']
|
||||
})
|
||||
export class SelectOptgroupExample
|
||||
{
|
||||
pokemonControl = new FormControl();
|
||||
|
||||
pokemonGroups = [
|
||||
{
|
||||
name : 'Grass',
|
||||
pokemon: [
|
||||
{
|
||||
value : 'bulbasaur-0',
|
||||
viewValue: 'Bulbasaur'
|
||||
},
|
||||
{
|
||||
value : 'oddish-1',
|
||||
viewValue: 'Oddish'
|
||||
},
|
||||
{
|
||||
value : 'bellsprout-2',
|
||||
viewValue: 'Bellsprout'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name : 'Water',
|
||||
pokemon: [
|
||||
{
|
||||
value : 'squirtle-3',
|
||||
viewValue: 'Squirtle'
|
||||
},
|
||||
{
|
||||
value : 'psyduck-4',
|
||||
viewValue: 'Psyduck'
|
||||
},
|
||||
{
|
||||
value : 'horsea-5',
|
||||
viewValue: 'Horsea'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name : 'Fire',
|
||||
disabled: true,
|
||||
pokemon : [
|
||||
{
|
||||
value : 'charmander-6',
|
||||
viewValue: 'Charmander'
|
||||
},
|
||||
{
|
||||
value : 'vulpix-7',
|
||||
viewValue: 'Vulpix'
|
||||
},
|
||||
{
|
||||
value : 'flareon-8',
|
||||
viewValue: 'Flareon'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name : 'Psychic',
|
||||
pokemon: [
|
||||
{
|
||||
value : 'mew-9',
|
||||
viewValue: 'Mew'
|
||||
},
|
||||
{
|
||||
value : 'mewtwo-10',
|
||||
viewValue: 'Mewtwo'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
@ -5,18 +5,22 @@ import { Component } from '@angular/core';
|
|||
*/
|
||||
@Component({
|
||||
selector : 'select-overview-example',
|
||||
templateUrl: 'select-overview-example.html'
|
||||
templateUrl: 'select-overview-example.html',
|
||||
styleUrls : ['select-overview-example.css']
|
||||
})
|
||||
export class SelectOverviewExample
|
||||
{
|
||||
foods = [
|
||||
{value : 'steak-0',
|
||||
{
|
||||
value : 'steak-0',
|
||||
viewValue: 'Steak'
|
||||
},
|
||||
{value : 'pizza-1',
|
||||
{
|
||||
value : 'pizza-1',
|
||||
viewValue: 'Pizza'
|
||||
},
|
||||
{value : 'tacos-2',
|
||||
{
|
||||
value : 'tacos-2',
|
||||
viewValue: 'Tacos'
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
.example-panel-red .mat-select-content {
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.example-panel-green .mat-select-content {
|
||||
background: rgba(0, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
.example-panel-blue .mat-select-content {
|
||||
background: rgba(0, 0, 255, 0.5);
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="Panel color" [formControl]="panelColor"
|
||||
panelClass="example-panel-{{panelColor.value}}">
|
||||
<mat-option value="red">Red</mat-option>
|
||||
<mat-option value="green">Green</mat-option>
|
||||
<mat-option value="blue">Blue</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { FormControl } from '@angular/forms';
|
||||
|
||||
/**
|
||||
* @title Select with custom panel styling
|
||||
*/
|
||||
@Component({
|
||||
selector : 'select-panel-class-example',
|
||||
templateUrl : 'select-panel-class-example.html',
|
||||
styleUrls : ['select-panel-class-example.css'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class SelectPanelClassExample
|
||||
{
|
||||
panelColor = new FormControl('red');
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<mat-form-field>
|
||||
<mat-select placeholder="State">
|
||||
<mat-option>None</mat-option>
|
||||
<mat-option *ngFor="let state of states" [value]="state">{{state}}</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/** @title Select with reset option */
|
||||
@Component({
|
||||
selector : 'select-reset-example',
|
||||
templateUrl: 'select-reset-example.html',
|
||||
styleUrls : ['select-reset-example.css']
|
||||
})
|
||||
export class SelectResetExample
|
||||
{
|
||||
states = [
|
||||
'Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware',
|
||||
'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
|
||||
'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
|
||||
'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico',
|
||||
'New York', 'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania',
|
||||
'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
|
||||
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
|
||||
];
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
/** No CSS for this example */
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<mat-form-field>
|
||||
<mat-select [(value)]="selected">
|
||||
<mat-option>None</mat-option>
|
||||
<mat-option value="option1">Option 1</mat-option>
|
||||
<mat-option value="option2">Option 2</mat-option>
|
||||
<mat-option value="option3">Option 3</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<p>You selected: {{selected}}</p>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { Component } from '@angular/core';
|
||||
|
||||
/** @title Select with 2-way value binding */
|
||||
@Component({
|
||||
selector : 'select-value-binding-example',
|
||||
templateUrl: 'select-value-binding-example.html',
|
||||
styleUrls : ['select-value-binding-example.css']
|
||||
})
|
||||
export class SelectValueBindingExample
|
||||
{
|
||||
selected = 'option2';
|
||||
}
|
||||
|
|
@ -12,31 +12,36 @@ import { Sort } from '@angular/material';
|
|||
export class SortOverviewExample
|
||||
{
|
||||
desserts = [
|
||||
{name : 'Frozen yogurt',
|
||||
{
|
||||
name : 'Frozen yogurt',
|
||||
calories: '159',
|
||||
fat : '6',
|
||||
carbs : '24',
|
||||
protein : '4'
|
||||
},
|
||||
{name : 'Ice cream sandwich',
|
||||
{
|
||||
name : 'Ice cream sandwich',
|
||||
calories: '237',
|
||||
fat : '9',
|
||||
carbs : '37',
|
||||
protein : '4'
|
||||
},
|
||||
{name : 'Eclair',
|
||||
{
|
||||
name : 'Eclair',
|
||||
calories: '262',
|
||||
fat : '16',
|
||||
carbs : '24',
|
||||
protein : '6'
|
||||
},
|
||||
{name : 'Cupcake',
|
||||
{
|
||||
name : 'Cupcake',
|
||||
calories: '305',
|
||||
fat : '4',
|
||||
carbs : '67',
|
||||
protein : '4'
|
||||
},
|
||||
{name : 'Gingerbread',
|
||||
{
|
||||
name : 'Gingerbread',
|
||||
calories: '356',
|
||||
fat : '16',
|
||||
carbs : '49',
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/observable/of';
|
||||
import { MatTableDataSource } from '@angular/material';
|
||||
|
||||
/**
|
||||
* @title Basic table
|
||||
|
|
@ -14,7 +12,7 @@ import 'rxjs/add/observable/of';
|
|||
export class TableBasicExample
|
||||
{
|
||||
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new ExampleDataSource();
|
||||
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
|
||||
}
|
||||
|
||||
export interface Element
|
||||
|
|
@ -25,124 +23,125 @@ export interface Element
|
|||
symbol: string;
|
||||
}
|
||||
|
||||
const data: Element[] = [
|
||||
{position : 1,
|
||||
name : 'Hydrogen',
|
||||
weight: 1.0079,
|
||||
symbol: 'H'
|
||||
const ELEMENT_DATA: Element[] = [
|
||||
{
|
||||
position: 1,
|
||||
name : 'Hydrogen',
|
||||
weight : 1.0079,
|
||||
symbol : 'H'
|
||||
},
|
||||
{position : 2,
|
||||
name : 'Helium',
|
||||
weight: 4.0026,
|
||||
symbol: 'He'
|
||||
{
|
||||
position: 2,
|
||||
name : 'Helium',
|
||||
weight : 4.0026,
|
||||
symbol : 'He'
|
||||
},
|
||||
{position : 3,
|
||||
name : 'Lithium',
|
||||
weight: 6.941,
|
||||
symbol: 'Li'
|
||||
{
|
||||
position: 3,
|
||||
name : 'Lithium',
|
||||
weight : 6.941,
|
||||
symbol : 'Li'
|
||||
},
|
||||
{position : 4,
|
||||
name : 'Beryllium',
|
||||
weight: 9.0122,
|
||||
symbol: 'Be'
|
||||
{
|
||||
position: 4,
|
||||
name : 'Beryllium',
|
||||
weight : 9.0122,
|
||||
symbol : 'Be'
|
||||
},
|
||||
{position : 5,
|
||||
name : 'Boron',
|
||||
weight: 10.811,
|
||||
symbol: 'B'
|
||||
{
|
||||
position: 5,
|
||||
name : 'Boron',
|
||||
weight : 10.811,
|
||||
symbol : 'B'
|
||||
},
|
||||
{position : 6,
|
||||
name : 'Carbon',
|
||||
weight: 12.0107,
|
||||
symbol: 'C'
|
||||
{
|
||||
position: 6,
|
||||
name : 'Carbon',
|
||||
weight : 12.0107,
|
||||
symbol : 'C'
|
||||
},
|
||||
{position : 7,
|
||||
name : 'Nitrogen',
|
||||
weight: 14.0067,
|
||||
symbol: 'N'
|
||||
{
|
||||
position: 7,
|
||||
name : 'Nitrogen',
|
||||
weight : 14.0067,
|
||||
symbol : 'N'
|
||||
},
|
||||
{position : 8,
|
||||
name : 'Oxygen',
|
||||
weight: 15.9994,
|
||||
symbol: 'O'
|
||||
{
|
||||
position: 8,
|
||||
name : 'Oxygen',
|
||||
weight : 15.9994,
|
||||
symbol : 'O'
|
||||
},
|
||||
{position : 9,
|
||||
name : 'Fluorine',
|
||||
weight: 18.9984,
|
||||
symbol: 'F'
|
||||
{
|
||||
position: 9,
|
||||
name : 'Fluorine',
|
||||
weight : 18.9984,
|
||||
symbol : 'F'
|
||||
},
|
||||
{position : 10,
|
||||
name : 'Neon',
|
||||
weight: 20.1797,
|
||||
symbol: 'Ne'
|
||||
{
|
||||
position: 10,
|
||||
name : 'Neon',
|
||||
weight : 20.1797,
|
||||
symbol : 'Ne'
|
||||
},
|
||||
{position : 11,
|
||||
name : 'Sodium',
|
||||
weight: 22.9897,
|
||||
symbol: 'Na'
|
||||
{
|
||||
position: 11,
|
||||
name : 'Sodium',
|
||||
weight : 22.9897,
|
||||
symbol : 'Na'
|
||||
},
|
||||
{position : 12,
|
||||
name : 'Magnesium',
|
||||
weight: 24.305,
|
||||
symbol: 'Mg'
|
||||
{
|
||||
position: 12,
|
||||
name : 'Magnesium',
|
||||
weight : 24.305,
|
||||
symbol : 'Mg'
|
||||
},
|
||||
{position : 13,
|
||||
name : 'Aluminum',
|
||||
weight: 26.9815,
|
||||
symbol: 'Al'
|
||||
{
|
||||
position: 13,
|
||||
name : 'Aluminum',
|
||||
weight : 26.9815,
|
||||
symbol : 'Al'
|
||||
},
|
||||
{position : 14,
|
||||
name : 'Silicon',
|
||||
weight: 28.0855,
|
||||
symbol: 'Si'
|
||||
{
|
||||
position: 14,
|
||||
name : 'Silicon',
|
||||
weight : 28.0855,
|
||||
symbol : 'Si'
|
||||
},
|
||||
{position : 15,
|
||||
name : 'Phosphorus',
|
||||
weight: 30.9738,
|
||||
symbol: 'P'
|
||||
{
|
||||
position: 15,
|
||||
name : 'Phosphorus',
|
||||
weight : 30.9738,
|
||||
symbol : 'P'
|
||||
},
|
||||
{position : 16,
|
||||
name : 'Sulfur',
|
||||
weight: 32.065,
|
||||
symbol: 'S'
|
||||
{
|
||||
position: 16,
|
||||
name : 'Sulfur',
|
||||
weight : 32.065,
|
||||
symbol : 'S'
|
||||
},
|
||||
{position : 17,
|
||||
name : 'Chlorine',
|
||||
weight: 35.453,
|
||||
symbol: 'Cl'
|
||||
{
|
||||
position: 17,
|
||||
name : 'Chlorine',
|
||||
weight : 35.453,
|
||||
symbol : 'Cl'
|
||||
},
|
||||
{position : 18,
|
||||
name : 'Argon',
|
||||
weight: 39.948,
|
||||
symbol: 'Ar'
|
||||
{
|
||||
position: 18,
|
||||
name : 'Argon',
|
||||
weight : 39.948,
|
||||
symbol : 'Ar'
|
||||
},
|
||||
{position : 19,
|
||||
name : 'Potassium',
|
||||
weight: 39.0983,
|
||||
symbol: 'K'
|
||||
{
|
||||
position: 19,
|
||||
name : 'Potassium',
|
||||
weight : 39.0983,
|
||||
symbol : 'K'
|
||||
},
|
||||
{position : 20,
|
||||
name : 'Calcium',
|
||||
weight: 40.078,
|
||||
symbol: 'Ca'
|
||||
{
|
||||
position: 20,
|
||||
name : 'Calcium',
|
||||
weight : 40.078,
|
||||
symbol : 'Ca'
|
||||
}
|
||||
];
|
||||
|
||||
/**
|
||||
* Data source to provide what data should be rendered in the table. The observable provided
|
||||
* in connect should emit exactly the data that should be rendered by the table. If the data is
|
||||
* altered, the observable should emit that new set of data on the stream. In our case here,
|
||||
* we return a stream that contains only one set of data that doesn't change.
|
||||
*/
|
||||
export class ExampleDataSource extends DataSource<any>
|
||||
{
|
||||
/** Connect function called by the table to retrieve one stream containing the data to render. */
|
||||
connect(): Observable<Element[]>
|
||||
{
|
||||
return Observable.of(data);
|
||||
}
|
||||
|
||||
disconnect()
|
||||
{
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,17 +7,12 @@
|
|||
|
||||
.example-header {
|
||||
min-height: 64px;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
padding: 8px 24px 0;
|
||||
font-size: 20px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mat-form-field {
|
||||
font-size: 14px;
|
||||
flex-grow: 1;
|
||||
margin-left: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mat-table {
|
||||
|
|
|
|||
|
|
@ -1,37 +1,34 @@
|
|||
<div class="example-container mat-elevation-z8">
|
||||
<div class="example-header">
|
||||
<mat-form-field floatPlaceholder="never">
|
||||
<input matInput #filter placeholder="Filter users">
|
||||
<mat-form-field>
|
||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-table #table [dataSource]="dataSource">
|
||||
|
||||
<!--- Note that these columns can be defined in any order.
|
||||
The actual rendered columns are set as a property on the row definition" -->
|
||||
|
||||
<!-- ID Column -->
|
||||
<ng-container matColumnDef="userId">
|
||||
<mat-header-cell *matHeaderCellDef> ID</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.id}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Progress Column -->
|
||||
<ng-container matColumnDef="progress">
|
||||
<mat-header-cell *matHeaderCellDef> Progress</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.progress}}%</mat-cell>
|
||||
<!-- Position Column -->
|
||||
<ng-container matColumnDef="position">
|
||||
<mat-header-cell *matHeaderCellDef> No.</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.position}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Name Column -->
|
||||
<ng-container matColumnDef="userName">
|
||||
<ng-container matColumnDef="name">
|
||||
<mat-header-cell *matHeaderCellDef> Name</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row"> {{row.name}}</mat-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.name}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Weight Column -->
|
||||
<ng-container matColumnDef="weight">
|
||||
<mat-header-cell *matHeaderCellDef> Weight</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.weight}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<!-- Color Column -->
|
||||
<ng-container matColumnDef="color">
|
||||
<mat-header-cell *matHeaderCellDef> Color</mat-header-cell>
|
||||
<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}}</mat-cell>
|
||||
<ng-container matColumnDef="symbol">
|
||||
<mat-header-cell *matHeaderCellDef> Symbol</mat-header-cell>
|
||||
<mat-cell *matCellDef="let element"> {{element.symbol}}</mat-cell>
|
||||
</ng-container>
|
||||
|
||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,5 @@
|
|||
import { Component, ElementRef, ViewChild } from '@angular/core';
|
||||
import { DataSource } from '@angular/cdk/collections';
|
||||
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
|
||||
import { Observable } from 'rxjs/Observable';
|
||||
import 'rxjs/add/operator/startWith';
|
||||
import 'rxjs/add/observable/merge';
|
||||
import 'rxjs/add/operator/map';
|
||||
import 'rxjs/add/operator/debounceTime';
|
||||
import 'rxjs/add/operator/distinctUntilChanged';
|
||||
import 'rxjs/add/observable/fromEvent';
|
||||
import { Component } from '@angular/core';
|
||||
import { MatTableDataSource } from '@angular/material';
|
||||
|
||||
/**
|
||||
* @title Table with filtering
|
||||
|
|
@ -19,134 +11,144 @@ import 'rxjs/add/observable/fromEvent';
|
|||
})
|
||||
export class TableFilteringExample
|
||||
{
|
||||
displayedColumns = ['userId', 'userName', 'progress', 'color'];
|
||||
exampleDatabase = new ExampleDatabase();
|
||||
dataSource: ExampleDataSource | null;
|
||||
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||
dataSource = new MatTableDataSource(ELEMENT_DATA);
|
||||
|
||||
@ViewChild('filter') filter: ElementRef;
|
||||
|
||||
ngOnInit()
|
||||
applyFilter(filterValue: string)
|
||||
{
|
||||
this.dataSource = new ExampleDataSource(this.exampleDatabase);
|
||||
Observable.fromEvent(this.filter.nativeElement, 'keyup')
|
||||
.debounceTime(150)
|
||||
.distinctUntilChanged()
|
||||
.subscribe(() => {
|
||||
if ( !this.dataSource )
|
||||
{
|
||||
return;
|
||||
}
|
||||
this.dataSource.filter = this.filter.nativeElement.value;
|
||||
});
|
||||
filterValue = filterValue.trim(); // Remove whitespace
|
||||
filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
|
||||
this.dataSource.filter = filterValue;
|
||||
}
|
||||
}
|
||||
|
||||
/** Constants used to fill up our data base. */
|
||||
const COLORS = [
|
||||
'maroon', 'red', 'orange', 'yellow', 'olive', 'green', 'purple',
|
||||
'fuchsia', 'lime', 'teal', 'aqua', 'blue', 'navy', 'black', 'gray'
|
||||
];
|
||||
const NAMES = [
|
||||
'Maia', 'Asher', 'Olivia', 'Atticus', 'Amelia', 'Jack',
|
||||
'Charlotte', 'Theodore', 'Isla', 'Oliver', 'Isabella', 'Jasper',
|
||||
'Cora', 'Levi', 'Violet', 'Arthur', 'Mia', 'Thomas', 'Elizabeth'
|
||||
];
|
||||
|
||||
export interface UserData
|
||||
export interface Element
|
||||
{
|
||||
id: string;
|
||||
name: string;
|
||||
progress: string;
|
||||
color: string;
|
||||
position: number;
|
||||
weight: number;
|
||||
symbol: string;
|
||||
}
|
||||
|
||||
/** An example database that the data source uses to retrieve data for the table. */
|
||||
export class ExampleDatabase
|
||||
{
|
||||
/** Stream that emits whenever the data has been modified. */
|
||||
dataChange: BehaviorSubject<UserData[]> = new BehaviorSubject<UserData[]>([]);
|
||||
|
||||
get data(): UserData[]
|
||||
const ELEMENT_DATA: Element[] = [
|
||||
{
|
||||
return this.dataChange.value;
|
||||
}
|
||||
|
||||
constructor()
|
||||
position: 1,
|
||||
name : 'Hydrogen',
|
||||
weight : 1.0079,
|
||||
symbol : 'H'
|
||||
},
|
||||
{
|
||||
// Fill up the database with 100 users.
|
||||
for ( let i = 0; i < 100; i++ )
|
||||
{
|
||||
this.addUser();
|
||||
}
|
||||
}
|
||||
|
||||
/** Adds a new user to the database. */
|
||||
addUser()
|
||||
position: 2,
|
||||
name : 'Helium',
|
||||
weight : 4.0026,
|
||||
symbol : 'He'
|
||||
},
|
||||
{
|
||||
const copiedData = this.data.slice();
|
||||
copiedData.push(this.createNewUser());
|
||||
this.dataChange.next(copiedData);
|
||||
}
|
||||
|
||||
/** Builds and returns a new User. */
|
||||
private createNewUser()
|
||||
position: 3,
|
||||
name : 'Lithium',
|
||||
weight : 6.941,
|
||||
symbol : 'Li'
|
||||
},
|
||||
{
|
||||
const name =
|
||||
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
|
||||
NAMES[Math.round(Math.random() * (NAMES.length - 1))].charAt(0) + '.';
|
||||
|
||||
return {
|
||||
id : (this.data.length + 1).toString(),
|
||||
name : name,
|
||||
progress: Math.round(Math.random() * 100).toString(),
|
||||
color : COLORS[Math.round(Math.random() * (COLORS.length - 1))]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Data source to provide what data should be rendered in the table. Note that the data source
|
||||
* can retrieve its data in any way. In this case, the data source is provided a reference
|
||||
* to a common data base, ExampleDatabase. It is not the data source's responsibility to manage
|
||||
* the underlying data. Instead, it only needs to take the data and send the table exactly what
|
||||
* should be rendered.
|
||||
*/
|
||||
export class ExampleDataSource extends DataSource<any>
|
||||
{
|
||||
_filterChange = new BehaviorSubject('');
|
||||
|
||||
get filter(): string
|
||||
position: 4,
|
||||
name : 'Beryllium',
|
||||
weight : 9.0122,
|
||||
symbol : 'Be'
|
||||
},
|
||||
{
|
||||
return this._filterChange.value;
|
||||
}
|
||||
|
||||
set filter(filter: string)
|
||||
position: 5,
|
||||
name : 'Boron',
|
||||
weight : 10.811,
|
||||
symbol : 'B'
|
||||
},
|
||||
{
|
||||
this._filterChange.next(filter);
|
||||
}
|
||||
|
||||
constructor(private _exampleDatabase: ExampleDatabase)
|
||||
position: 6,
|
||||
name : 'Carbon',
|
||||
weight : 12.0107,
|
||||
symbol : 'C'
|
||||
},
|
||||
{
|
||||
super();
|
||||
}
|
||||
|
||||
/** Connect function called by the table to retrieve one stream containing the data to render. */
|
||||
connect(): Observable<UserData[]>
|
||||
position: 7,
|
||||
name : 'Nitrogen',
|
||||
weight : 14.0067,
|
||||
symbol : 'N'
|
||||
},
|
||||
{
|
||||
const displayDataChanges = [
|
||||
this._exampleDatabase.dataChange,
|
||||
this._filterChange
|
||||
];
|
||||
|
||||
return Observable.merge(...displayDataChanges).map(() => {
|
||||
return this._exampleDatabase.data.slice().filter((item: UserData) => {
|
||||
let searchStr = (item.name + item.color).toLowerCase();
|
||||
return searchStr.indexOf(this.filter.toLowerCase()) != -1;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
disconnect()
|
||||
position: 8,
|
||||
name : 'Oxygen',
|
||||
weight : 15.9994,
|
||||
symbol : 'O'
|
||||
},
|
||||
{
|
||||
position: 9,
|
||||
name : 'Fluorine',
|
||||
weight : 18.9984,
|
||||
symbol : 'F'
|
||||
},
|
||||
{
|
||||
position: 10,
|
||||
name : 'Neon',
|
||||
weight : 20.1797,
|
||||
symbol : 'Ne'
|
||||
},
|
||||
{
|
||||
position: 11,
|
||||
name : 'Sodium',
|
||||
weight : 22.9897,
|
||||
symbol : 'Na'
|
||||
},
|
||||
{
|
||||
position: 12,
|
||||
name : 'Magnesium',
|
||||
weight : 24.305,
|
||||
symbol : 'Mg'
|
||||
},
|
||||
{
|
||||
position: 13,
|
||||
name : 'Aluminum',
|
||||
weight : 26.9815,
|
||||
symbol : 'Al'
|
||||
},
|
||||
{
|
||||
position: 14,
|
||||
name : 'Silicon',
|
||||
weight : 28.0855,
|
||||
symbol : 'Si'
|
||||
},
|
||||
{
|
||||
position: 15,
|
||||
name : 'Phosphorus',
|
||||
weight : 30.9738,
|
||||
symbol : 'P'
|
||||
},
|
||||
{
|
||||
position: 16,
|
||||
name : 'Sulfur',
|
||||
weight : 32.065,
|
||||
symbol : 'S'
|
||||
},
|
||||
{
|
||||
position: 17,
|
||||
name : 'Chlorine',
|
||||
weight : 35.453,
|
||||
symbol : 'Cl'
|
||||
},
|
||||
{
|
||||
position: 18,
|
||||
name : 'Argon',
|
||||
weight : 39.948,
|
||||
symbol : 'Ar'
|
||||
},
|
||||
{
|
||||
position: 19,
|
||||
name : 'Potassium',
|
||||
weight : 39.0983,
|
||||
symbol : 'K'
|
||||
},
|
||||
{
|
||||
position: 20,
|
||||
name : 'Calcium',
|
||||
weight : 40.078,
|
||||
symbol : 'Ca'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
|
|
|||
|
|
@ -20,23 +20,6 @@
|
|||
min-height: 300px;
|
||||
}
|
||||
|
||||
.mat-column-title {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Column Widths */
|
||||
.mat-column-number,
|
||||
.mat-column-state {
|
||||
max-width: 64px;
|
||||
}
|
||||
|
||||
.mat-column-created {
|
||||
max-width: 124px;
|
||||
}
|
||||
|
||||
.example-loading-shade {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -55,3 +38,13 @@
|
|||
max-width: 360px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Column Widths */
|
||||
.mat-column-number,
|
||||
.mat-column-state {
|
||||
max-width: 64px;
|
||||
}
|
||||
|
||||
.mat-column-created {
|
||||
max-width: 124px;
|
||||
}
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user