mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-01-10 04:25:08 +00:00
Updated Angular Material examples
This commit is contained in:
parent
faef6ec6f8
commit
13746c2a73
|
@ -95,8 +95,6 @@ import { TableHttpExample } from 'assets/angular-material-examples/table-http/ta
|
||||||
import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example';
|
import { TableOverviewExample } from 'assets/angular-material-examples/table-overview/table-overview-example';
|
||||||
import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example';
|
import { TablePaginationExample } from 'assets/angular-material-examples/table-pagination/table-pagination-example';
|
||||||
import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example';
|
import { TableSortingExample } from 'assets/angular-material-examples/table-sorting/table-sorting-example';
|
||||||
import { TabsOverviewExample } from 'assets/angular-material-examples/tabs-overview/tabs-overview-example';
|
|
||||||
import { TabsTemplateLabelExample } from 'assets/angular-material-examples/tabs-template-label/tabs-template-label-example';
|
|
||||||
import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
|
import { ToolbarMultirowExample } from 'assets/angular-material-examples/toolbar-multirow/toolbar-multirow-example';
|
||||||
import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
|
import { ToolbarOverviewExample } from 'assets/angular-material-examples/toolbar-overview/toolbar-overview-example';
|
||||||
import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
|
import { TooltipOverviewExample } from 'assets/angular-material-examples/tooltip-overview/tooltip-overview-example';
|
||||||
|
@ -137,7 +135,6 @@ import { SliderFormattingExample } from 'assets/angular-material-examples/slider
|
||||||
import { StepperEditableExample } from 'assets/angular-material-examples/stepper-editable/stepper-editable-example';
|
import { StepperEditableExample } from 'assets/angular-material-examples/stepper-editable/stepper-editable-example';
|
||||||
import { StepperOptionalExample } from 'assets/angular-material-examples/stepper-optional/stepper-optional-example';
|
import { StepperOptionalExample } from 'assets/angular-material-examples/stepper-optional/stepper-optional-example';
|
||||||
import { TableFooterRowExample } from 'assets/angular-material-examples/table-footer-row/table-footer-row-example';
|
import { TableFooterRowExample } from 'assets/angular-material-examples/table-footer-row/table-footer-row-example';
|
||||||
import { TableNativeOnlyExample } from 'assets/angular-material-examples/table-native-only/table-native-only-example';
|
|
||||||
import { TextFieldAutofillDirectiveExample } from 'assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example';
|
import { TextFieldAutofillDirectiveExample } from 'assets/angular-material-examples/text-field-autofill-directive/text-field-autofill-directive-example';
|
||||||
import { TextFieldAutofillMonitorExample } from 'assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example';
|
import { TextFieldAutofillMonitorExample } from 'assets/angular-material-examples/text-field-autofill-monitor/text-field-autofill-monitor-example';
|
||||||
import { TextFieldAutosizeTextareaExample } from 'assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example';
|
import { TextFieldAutosizeTextareaExample } from 'assets/angular-material-examples/text-field-autosize-textarea/text-field-autosize-textarea-example';
|
||||||
|
@ -146,6 +143,32 @@ import { TreeDynamicExample } from 'assets/angular-material-examples/tree-dynami
|
||||||
import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example';
|
import { TreeFlatOverviewExample } from 'assets/angular-material-examples/tree-flat-overview/tree-flat-overview-example';
|
||||||
import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example';
|
import { TreeLoadmoreExample } from 'assets/angular-material-examples/tree-loadmore/tree-loadmore-example';
|
||||||
import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example';
|
import { TreeNestedOverviewExample } from 'assets/angular-material-examples/tree-nested-overview/tree-nested-overview-example';
|
||||||
|
import { CdkTableBasicFlexExample } from 'assets/angular-material-examples/cdk-table-basic-flex/cdk-table-basic-flex-example';
|
||||||
|
import { StepperVerticalExample } from 'assets/angular-material-examples/stepper-vertical/stepper-vertical-example';
|
||||||
|
import { TabGroupBasicExample } from 'assets/angular-material-examples/tab-group-basic/tab-group-basic-example';
|
||||||
|
import { TabGroupAsyncExample } from 'assets/angular-material-examples/tab-group-async/tab-group-async-example';
|
||||||
|
import { TabGroupCustomLabelExample } from 'assets/angular-material-examples/tab-group-custom-label/tab-group-custom-label-example';
|
||||||
|
import { TabGroupDynamicExample } from 'assets/angular-material-examples/tab-group-dynamic/tab-group-dynamic-example';
|
||||||
|
import { TabGroupDynamicHeightExample } from 'assets/angular-material-examples/tab-group-dynamic-height/tab-group-dynamic-height-example';
|
||||||
|
import { TabGroupHeaderBelowExample } from 'assets/angular-material-examples/tab-group-header-below/tab-group-header-below-example';
|
||||||
|
import { TabGroupLazyLoadedExample } from 'assets/angular-material-examples/tab-group-lazy-loaded/tab-group-lazy-loaded-example';
|
||||||
|
import { TabGroupStretchedExample } from 'assets/angular-material-examples/tab-group-stretched/tab-group-stretched-example';
|
||||||
|
import { TabGroupThemeExample } from 'assets/angular-material-examples/tab-group-theme/tab-group-theme-example';
|
||||||
|
import { TabNavBarBasicExample } from 'assets/angular-material-examples/tab-nav-bar-basic/tab-nav-bar-basic-example';
|
||||||
|
import { TooltipAutoHideExample } from 'assets/angular-material-examples/tooltip-auto-hide/tooltip-auto-hide-example';
|
||||||
|
import { TooltipCustomClassExample } from 'assets/angular-material-examples/tooltip-custom-class/tooltip-custom-class-example';
|
||||||
|
import { TooltipDisabledExample } from 'assets/angular-material-examples/tooltip-disabled/tooltip-disabled-example';
|
||||||
|
import { TooltipMessageExample } from 'assets/angular-material-examples/tooltip-message/tooltip-message-example';
|
||||||
|
import { TableBasicFlexExample } from 'assets/angular-material-examples/table-basic-flex/table-basic-flex-example';
|
||||||
|
import { TableDynamicColumnsExample } from 'assets/angular-material-examples/table-dynamic-columns/table-dynamic-columns-example';
|
||||||
|
import { TableExpandableRowsExample } from 'assets/angular-material-examples/table-expandable-rows/table-expandable-rows-example';
|
||||||
|
import { TableMultipleHeaderFooterExample } from 'assets/angular-material-examples/table-multiple-header-footer/table-multiple-header-footer-example';
|
||||||
|
import { TableRowContextExample } from 'assets/angular-material-examples/table-row-context/table-row-context-example';
|
||||||
|
import { TableStickyColumnsExample } from 'assets/angular-material-examples/table-sticky-columns/table-sticky-columns-example';
|
||||||
|
import { TableStickyComplexExample } from 'assets/angular-material-examples/table-sticky-complex/table-sticky-complex-example';
|
||||||
|
import { TableStickyComplexFlexExample } from 'assets/angular-material-examples/table-sticky-complex-flex/table-sticky-complex-flex-example';
|
||||||
|
import { TableStickyFooterExample } from 'assets/angular-material-examples/table-sticky-footer/table-sticky-footer-example';
|
||||||
|
import { TableStickyHeaderExample } from 'assets/angular-material-examples/table-sticky-header/table-sticky-header-example';
|
||||||
|
|
||||||
export const COMPONENT_MAP = {
|
export const COMPONENT_MAP = {
|
||||||
'autocomplete' : [
|
'autocomplete' : [
|
||||||
|
@ -176,6 +199,7 @@ export const COMPONENT_MAP = {
|
||||||
],
|
],
|
||||||
// 'cdk-table' : [
|
// 'cdk-table' : [
|
||||||
// 'cdk-table-basic',
|
// 'cdk-table-basic',
|
||||||
|
// 'cdk-table-basic-flex',
|
||||||
// 'cdk-table-flat'
|
// 'cdk-table-flat'
|
||||||
// ],
|
// ],
|
||||||
// 'cdk-tree' : [
|
// 'cdk-tree' : [
|
||||||
|
@ -333,22 +357,40 @@ export const COMPONENT_MAP = {
|
||||||
'stepper' : [
|
'stepper' : [
|
||||||
'stepper-overview',
|
'stepper-overview',
|
||||||
'stepper-editable',
|
'stepper-editable',
|
||||||
'stepper-optional'
|
'stepper-optional',
|
||||||
|
'stepper-vertical'
|
||||||
],
|
],
|
||||||
'table' : [
|
'table' : [
|
||||||
'table-overview',
|
'table-overview',
|
||||||
'table-basic',
|
'table-basic',
|
||||||
|
'table-basic-flex',
|
||||||
|
'table-dynamic-columns',
|
||||||
|
'table-expandable-rows',
|
||||||
'table-filtering',
|
'table-filtering',
|
||||||
'table-footer-row',
|
'table-footer-row',
|
||||||
'table-http',
|
'table-http',
|
||||||
'table-native-only',
|
'table-multiple-header-footer',
|
||||||
'table-pagination',
|
'table-pagination',
|
||||||
|
'table-row-context',
|
||||||
'table-selection',
|
'table-selection',
|
||||||
'table-sorting'
|
'table-sorting',
|
||||||
|
'table-sticky-columns',
|
||||||
|
'table-sticky-complex',
|
||||||
|
'table-sticky-complex-flex',
|
||||||
|
'table-sticky-header',
|
||||||
|
'table-sticky-footer',
|
||||||
],
|
],
|
||||||
'tabs' : [
|
'tabs' : [
|
||||||
'tabs-overview',
|
'tab-group-basic',
|
||||||
'tabs-template-label'
|
'tab-group-async',
|
||||||
|
'tab-group-custom-label',
|
||||||
|
'tab-group-dynamic',
|
||||||
|
'tab-group-dynamic-height',
|
||||||
|
'tab-group-header-below',
|
||||||
|
'tab-group-lazy-loaded',
|
||||||
|
'tab-group-stretched',
|
||||||
|
'tab-group-theme',
|
||||||
|
'tab-nav-bar-basic'
|
||||||
],
|
],
|
||||||
'text-field' : [
|
'text-field' : [
|
||||||
'text-field-autofill-directive',
|
'text-field-autofill-directive',
|
||||||
|
@ -361,8 +403,12 @@ export const COMPONENT_MAP = {
|
||||||
],
|
],
|
||||||
'tooltip' : [
|
'tooltip' : [
|
||||||
'tooltip-overview',
|
'tooltip-overview',
|
||||||
|
'tooltip-auto-hide',
|
||||||
|
'tooltip-custom-class',
|
||||||
'tooltip-delay',
|
'tooltip-delay',
|
||||||
|
'tooltip-disabled',
|
||||||
'tooltip-manual',
|
'tooltip-manual',
|
||||||
|
'tooltip-message',
|
||||||
'tooltip-modified-defaults',
|
'tooltip-modified-defaults',
|
||||||
'tooltip-position'
|
'tooltip-position'
|
||||||
],
|
],
|
||||||
|
@ -438,6 +484,10 @@ export const EXAMPLE_COMPONENTS = {
|
||||||
title : 'Basic CDK data-table',
|
title : 'Basic CDK data-table',
|
||||||
component: CdkTableBasicExample
|
component: CdkTableBasicExample
|
||||||
},
|
},
|
||||||
|
'cdk-table-basic-flex' : {
|
||||||
|
title : 'Basic use of `<cdk-table>` (uses display flex)',
|
||||||
|
component: CdkTableBasicFlexExample
|
||||||
|
},
|
||||||
'cdk-tree-flat' : {
|
'cdk-tree-flat' : {
|
||||||
title : 'Tree with flat nodes',
|
title : 'Tree with flat nodes',
|
||||||
component: CdkTreeFlatExample
|
component: CdkTreeFlatExample
|
||||||
|
@ -879,10 +929,26 @@ export const EXAMPLE_COMPONENTS = {
|
||||||
title : 'Stepper overview',
|
title : 'Stepper overview',
|
||||||
component: StepperOverviewExample
|
component: StepperOverviewExample
|
||||||
},
|
},
|
||||||
|
'stepper-vertical' : {
|
||||||
|
title : 'Stepper vertical',
|
||||||
|
component: StepperVerticalExample
|
||||||
|
},
|
||||||
'table-basic' : {
|
'table-basic' : {
|
||||||
title : 'Basic table',
|
title : 'Basic table',
|
||||||
component: TableBasicExample
|
component: TableBasicExample
|
||||||
},
|
},
|
||||||
|
'table-basic-flex' : {
|
||||||
|
title : 'Basic use of `<mat-table>` (uses display flex)',
|
||||||
|
component: TableBasicFlexExample
|
||||||
|
},
|
||||||
|
'table-dynamic-columns' : {
|
||||||
|
title : 'Table dynamically changing the columns displayed',
|
||||||
|
component: TableDynamicColumnsExample
|
||||||
|
},
|
||||||
|
'table-expandable-rows' : {
|
||||||
|
title : 'Table with expandable rows',
|
||||||
|
component: TableExpandableRowsExample
|
||||||
|
},
|
||||||
'table-filtering' : {
|
'table-filtering' : {
|
||||||
title : 'Table with filtering',
|
title : 'Table with filtering',
|
||||||
component: TableFilteringExample
|
component: TableFilteringExample
|
||||||
|
@ -895,9 +961,9 @@ export const EXAMPLE_COMPONENTS = {
|
||||||
title : 'Table retrieving data through HTTP',
|
title : 'Table retrieving data through HTTP',
|
||||||
component: TableHttpExample
|
component: TableHttpExample
|
||||||
},
|
},
|
||||||
'table-native-only' : {
|
'table-multiple-header-footer' : {
|
||||||
title : 'Native `<table>` that only applies the Material styles',
|
title : 'Table with multiple header and footer rows',
|
||||||
component: TableNativeOnlyExample
|
component: TableMultipleHeaderFooterExample
|
||||||
},
|
},
|
||||||
'table-overview' : {
|
'table-overview' : {
|
||||||
title : 'Data table with sorting, pagination, and filtering.',
|
title : 'Data table with sorting, pagination, and filtering.',
|
||||||
|
@ -907,6 +973,10 @@ export const EXAMPLE_COMPONENTS = {
|
||||||
title : 'Table with pagination',
|
title : 'Table with pagination',
|
||||||
component: TablePaginationExample
|
component: TablePaginationExample
|
||||||
},
|
},
|
||||||
|
'table-row-context' : {
|
||||||
|
title : 'Table showing each row context properties',
|
||||||
|
component: TableRowContextExample
|
||||||
|
},
|
||||||
'table-selection' : {
|
'table-selection' : {
|
||||||
title : 'Table with selection',
|
title : 'Table with selection',
|
||||||
component: TableSelectionExample
|
component: TableSelectionExample
|
||||||
|
@ -915,13 +985,65 @@ export const EXAMPLE_COMPONENTS = {
|
||||||
title : 'Table with sorting',
|
title : 'Table with sorting',
|
||||||
component: TableSortingExample
|
component: TableSortingExample
|
||||||
},
|
},
|
||||||
'tabs-overview' : {
|
'table-sticky-columns' : {
|
||||||
title : 'Basic tabs',
|
title : 'Table with a sticky columns',
|
||||||
component: TabsOverviewExample
|
component: TableStickyColumnsExample
|
||||||
},
|
},
|
||||||
'tabs-template-label' : {
|
'table-sticky-complex' : {
|
||||||
title : 'Complex Example',
|
title : 'Tables with toggle-able sticky headers, footers, and columns',
|
||||||
component: TabsTemplateLabelExample
|
component: TableStickyComplexExample
|
||||||
|
},
|
||||||
|
'table-sticky-complex-flex' : {
|
||||||
|
title : 'Flex-layout tables with toggle-able sticky headers, footers, and columns',
|
||||||
|
component: TableStickyComplexFlexExample
|
||||||
|
},
|
||||||
|
'table-sticky-footer' : {
|
||||||
|
title : 'Table with a sticky footer',
|
||||||
|
component: TableStickyFooterExample
|
||||||
|
},
|
||||||
|
'table-sticky-header' : {
|
||||||
|
title : 'Table with sticky header',
|
||||||
|
component: TableStickyHeaderExample
|
||||||
|
},
|
||||||
|
'tab-group-basic' : {
|
||||||
|
title : 'Basic use of the tab group',
|
||||||
|
component: TabGroupBasicExample
|
||||||
|
},
|
||||||
|
'tab-group-async' : {
|
||||||
|
title : 'Tab group with asynchronously loading tab contents',
|
||||||
|
component: TabGroupAsyncExample
|
||||||
|
},
|
||||||
|
'tab-group-custom-label' : {
|
||||||
|
title : 'Using tabs with a custom label template',
|
||||||
|
component: TabGroupCustomLabelExample
|
||||||
|
},
|
||||||
|
'tab-group-dynamic' : {
|
||||||
|
title : 'Tab group with dynamically changing tabs',
|
||||||
|
component: TabGroupDynamicExample
|
||||||
|
},
|
||||||
|
'tab-group-dynamic-height' : {
|
||||||
|
title : 'Tab group with dynamic height based on tab contents',
|
||||||
|
component: TabGroupDynamicHeightExample
|
||||||
|
},
|
||||||
|
'tab-group-header-below' : {
|
||||||
|
title : 'Tab group with the headers on the bottom',
|
||||||
|
component: TabGroupHeaderBelowExample
|
||||||
|
},
|
||||||
|
'tab-group-lazy-loaded' : {
|
||||||
|
title : 'Tab group where the tab content is loaded lazily (when activated)',
|
||||||
|
component: TabGroupLazyLoadedExample
|
||||||
|
},
|
||||||
|
'tab-group-stretched' : {
|
||||||
|
title : 'Tab group with stretched labels',
|
||||||
|
component: TabGroupStretchedExample
|
||||||
|
},
|
||||||
|
'tab-group-theme' : {
|
||||||
|
title : 'Customizing the theme options on the tab group',
|
||||||
|
component: TabGroupThemeExample
|
||||||
|
},
|
||||||
|
'tab-nav-bar-basic' : {
|
||||||
|
title : 'Basic use of the tab nav bar',
|
||||||
|
component: TabNavBarBasicExample
|
||||||
},
|
},
|
||||||
'text-field-autofill-directive' : {
|
'text-field-autofill-directive' : {
|
||||||
title : 'Monitoring autofill state with cdkAutofill',
|
title : 'Monitoring autofill state with cdkAutofill',
|
||||||
|
@ -943,14 +1065,30 @@ export const EXAMPLE_COMPONENTS = {
|
||||||
title : 'Basic toolbar',
|
title : 'Basic toolbar',
|
||||||
component: ToolbarOverviewExample
|
component: ToolbarOverviewExample
|
||||||
},
|
},
|
||||||
|
'tooltip-auto-hide' : {
|
||||||
|
title : 'Tooltip that demonstrates auto-hiding when it clips out of its scrolling container',
|
||||||
|
component: TooltipAutoHideExample
|
||||||
|
},
|
||||||
|
'tooltip-custom-class' : {
|
||||||
|
title : 'Tooltip that can have a custom class applied',
|
||||||
|
component: TooltipCustomClassExample
|
||||||
|
},
|
||||||
'tooltip-delay' : {
|
'tooltip-delay' : {
|
||||||
title : 'Tooltip with a show and hide delay',
|
title : 'Tooltip with a show and hide delay',
|
||||||
component: TooltipDelayExample
|
component: TooltipDelayExample
|
||||||
},
|
},
|
||||||
|
'tooltip-disabled' : {
|
||||||
|
title : 'Tooltip that can be disabled',
|
||||||
|
component: TooltipDisabledExample
|
||||||
|
},
|
||||||
'tooltip-manual' : {
|
'tooltip-manual' : {
|
||||||
title : 'Tooltip that can be manually shown/hidden.',
|
title : 'Tooltip that can be manually shown/hidden',
|
||||||
component: TooltipManualExample
|
component: TooltipManualExample
|
||||||
},
|
},
|
||||||
|
'tooltip-message' : {
|
||||||
|
title : 'Tooltip with a changing message',
|
||||||
|
component: TooltipMessageExample
|
||||||
|
},
|
||||||
'tooltip-modified-defaults' : {
|
'tooltip-modified-defaults' : {
|
||||||
title : 'Tooltip with a show and hide delay',
|
title : 'Tooltip with a show and hide delay',
|
||||||
component: TooltipModifiedDefaultsExample
|
component: TooltipModifiedDefaultsExample
|
||||||
|
@ -1001,6 +1139,7 @@ export const EXAMPLE_LIST = [
|
||||||
CardFancyExample,
|
CardFancyExample,
|
||||||
CardOverviewExample,
|
CardOverviewExample,
|
||||||
CdkTableBasicExample,
|
CdkTableBasicExample,
|
||||||
|
CdkTableBasicFlexExample,
|
||||||
CdkTreeFlatExample,
|
CdkTreeFlatExample,
|
||||||
CdkTreeNestedExample,
|
CdkTreeNestedExample,
|
||||||
CheckboxConfigurableExample,
|
CheckboxConfigurableExample,
|
||||||
|
@ -1108,24 +1247,47 @@ export const EXAMPLE_LIST = [
|
||||||
StepperEditableExample,
|
StepperEditableExample,
|
||||||
StepperOptionalExample,
|
StepperOptionalExample,
|
||||||
StepperOverviewExample,
|
StepperOverviewExample,
|
||||||
|
StepperVerticalExample,
|
||||||
TableBasicExample,
|
TableBasicExample,
|
||||||
|
TableBasicFlexExample,
|
||||||
|
TableDynamicColumnsExample,
|
||||||
|
TableExpandableRowsExample,
|
||||||
TableFilteringExample,
|
TableFilteringExample,
|
||||||
TableFooterRowExample,
|
TableFooterRowExample,
|
||||||
TableHttpExample,
|
TableHttpExample,
|
||||||
TableNativeOnlyExample,
|
TableMultipleHeaderFooterExample,
|
||||||
TableOverviewExample,
|
TableOverviewExample,
|
||||||
TablePaginationExample,
|
TablePaginationExample,
|
||||||
|
TableRowContextExample,
|
||||||
TableSelectionExample,
|
TableSelectionExample,
|
||||||
TableSortingExample,
|
TableSortingExample,
|
||||||
TabsOverviewExample,
|
TableStickyColumnsExample,
|
||||||
TabsTemplateLabelExample,
|
TableStickyComplexExample,
|
||||||
|
TableStickyComplexFlexExample,
|
||||||
|
TableStickyFooterExample,
|
||||||
|
TableStickyHeaderExample,
|
||||||
|
TabGroupBasicExample,
|
||||||
|
TabGroupAsyncExample,
|
||||||
|
TabGroupCustomLabelExample,
|
||||||
|
TabGroupDynamicExample,
|
||||||
|
TabGroupDynamicHeightExample,
|
||||||
|
TabGroupHeaderBelowExample,
|
||||||
|
TabGroupLazyLoadedExample,
|
||||||
|
TabGroupStretchedExample,
|
||||||
|
TabGroupStretchedExample,
|
||||||
|
TabGroupThemeExample,
|
||||||
|
TabNavBarBasicExample,
|
||||||
TextFieldAutofillDirectiveExample,
|
TextFieldAutofillDirectiveExample,
|
||||||
TextFieldAutofillMonitorExample,
|
TextFieldAutofillMonitorExample,
|
||||||
TextFieldAutosizeTextareaExample,
|
TextFieldAutosizeTextareaExample,
|
||||||
ToolbarMultirowExample,
|
ToolbarMultirowExample,
|
||||||
ToolbarOverviewExample,
|
ToolbarOverviewExample,
|
||||||
|
TooltipAutoHideExample,
|
||||||
|
TooltipCustomClassExample,
|
||||||
TooltipDelayExample,
|
TooltipDelayExample,
|
||||||
|
TooltipDisabledExample,
|
||||||
TooltipManualExample,
|
TooltipManualExample,
|
||||||
|
TooltipMessageExample,
|
||||||
TooltipModifiedDefaultsExample,
|
TooltipModifiedDefaultsExample,
|
||||||
TooltipOverviewExample,
|
TooltipOverviewExample,
|
||||||
TooltipPositionExample,
|
TooltipPositionExample,
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {FormControl} from '@angular/forms';
|
import {FormControl} from '@angular/forms';
|
||||||
import {Observable} from 'rxjs';
|
import {Observable} from 'rxjs';
|
||||||
import {map, startWith} from 'rxjs/operators';
|
import {map, startWith} from 'rxjs/operators';
|
||||||
|
@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators';
|
||||||
templateUrl: 'autocomplete-auto-active-first-option-example.html',
|
templateUrl: 'autocomplete-auto-active-first-option-example.html',
|
||||||
styleUrls: ['autocomplete-auto-active-first-option-example.css']
|
styleUrls: ['autocomplete-auto-active-first-option-example.css']
|
||||||
})
|
})
|
||||||
export class AutocompleteAutoActiveFirstOptionExample {
|
export class AutocompleteAutoActiveFirstOptionExample implements OnInit {
|
||||||
myControl: FormControl = new FormControl();
|
myControl: FormControl = new FormControl();
|
||||||
options = ['One', 'Two', 'Three'];
|
options = ['One', 'Two', 'Three'];
|
||||||
filteredOptions: Observable<string[]>;
|
filteredOptions: Observable<string[]>;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {FormControl} from '@angular/forms';
|
import {FormControl} from '@angular/forms';
|
||||||
import {Observable} from 'rxjs';
|
import {Observable} from 'rxjs';
|
||||||
import {map, startWith} from 'rxjs/operators';
|
import {map, startWith} from 'rxjs/operators';
|
||||||
|
@ -15,7 +15,7 @@ export class User {
|
||||||
templateUrl: 'autocomplete-display-example.html',
|
templateUrl: 'autocomplete-display-example.html',
|
||||||
styleUrls: ['autocomplete-display-example.css']
|
styleUrls: ['autocomplete-display-example.css']
|
||||||
})
|
})
|
||||||
export class AutocompleteDisplayExample {
|
export class AutocompleteDisplayExample implements OnInit {
|
||||||
|
|
||||||
myControl = new FormControl();
|
myControl = new FormControl();
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {FormControl} from '@angular/forms';
|
import {FormControl} from '@angular/forms';
|
||||||
import {Observable} from 'rxjs';
|
import {Observable} from 'rxjs';
|
||||||
import {map, startWith} from 'rxjs/operators';
|
import {map, startWith} from 'rxjs/operators';
|
||||||
|
@ -11,7 +11,7 @@ import {map, startWith} from 'rxjs/operators';
|
||||||
templateUrl: 'autocomplete-filter-example.html',
|
templateUrl: 'autocomplete-filter-example.html',
|
||||||
styleUrls: ['autocomplete-filter-example.css']
|
styleUrls: ['autocomplete-filter-example.css']
|
||||||
})
|
})
|
||||||
export class AutocompleteFilterExample {
|
export class AutocompleteFilterExample implements OnInit {
|
||||||
|
|
||||||
myControl: FormControl = new FormControl();
|
myControl: FormControl = new FormControl();
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,10 @@
|
||||||
|
/**
|
||||||
|
* Add basic flex styling so that the cells evenly space themselves in the row.
|
||||||
|
*/
|
||||||
|
cdk-row, cdk-header-row, cdk-footer-row {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
cdk-cell, cdk-header-cell, cdk-footer-cell {
|
||||||
|
flex: 1;
|
||||||
|
}
|
|
@ -0,0 +1,28 @@
|
||||||
|
<cdk-table [dataSource]="dataSource">
|
||||||
|
<!-- Position Column -->
|
||||||
|
<ng-container cdkColumnDef="position">
|
||||||
|
<cdk-header-cell *cdkHeaderCellDef> No. </cdk-header-cell>
|
||||||
|
<cdk-cell *cdkCellDef="let element"> {{element.position}} </cdk-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container cdkColumnDef="name">
|
||||||
|
<cdk-header-cell *cdkHeaderCellDef> Name </cdk-header-cell>
|
||||||
|
<cdk-cell *cdkCellDef="let element"> {{element.name}} </cdk-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Weight Column -->
|
||||||
|
<ng-container cdkColumnDef="weight">
|
||||||
|
<cdk-header-cell *cdkHeaderCellDef> Weight </cdk-header-cell>
|
||||||
|
<cdk-cell *cdkCellDef="let element"> {{element.weight}} </cdk-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Symbol Column -->
|
||||||
|
<ng-container cdkColumnDef="symbol">
|
||||||
|
<cdk-header-cell *cdkHeaderCellDef> Symbol </cdk-header-cell>
|
||||||
|
<cdk-cell *cdkCellDef="let element"> {{element.symbol}} </cdk-cell>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<cdk-header-row *cdkHeaderRowDef="displayedColumns"></cdk-header-row>
|
||||||
|
<cdk-row *cdkRowDef="let row; columns: displayedColumns;"></cdk-row>
|
||||||
|
</cdk-table>
|
|
@ -0,0 +1,55 @@
|
||||||
|
import {DataSource} from '@angular/cdk/collections';
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {BehaviorSubject, Observable} from 'rxjs';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Basic use of `<cdk-table>` (uses display flex)
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'cdk-table-basic-flex-example',
|
||||||
|
styleUrls: ['cdk-table-basic-flex-example.css'],
|
||||||
|
templateUrl: 'cdk-table-basic-flex-example.html',
|
||||||
|
})
|
||||||
|
export class CdkTableBasicFlexExample {
|
||||||
|
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||||
|
dataSource = new ExampleDataSource();
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PeriodicElement {
|
||||||
|
name: string;
|
||||||
|
position: number;
|
||||||
|
weight: number;
|
||||||
|
symbol: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
|
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||||
|
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||||
|
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||||
|
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||||
|
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||||
|
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||||
|
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||||
|
{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'},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 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<PeriodicElement> {
|
||||||
|
/** Stream of data that is provided to the table. */
|
||||||
|
data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
|
||||||
|
|
||||||
|
/** Connect function called by the table to retrieve one stream containing the data to render. */
|
||||||
|
connect(): Observable<PeriodicElement[]> {
|
||||||
|
return this.data;
|
||||||
|
}
|
||||||
|
|
||||||
|
disconnect() {}
|
||||||
|
}
|
|
@ -1,39 +1,7 @@
|
||||||
/* Structure */
|
table {
|
||||||
.example-container {
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
th {
|
||||||
* Styles to make the demo's cdk-table match the material design spec
|
text-align: left;
|
||||||
* https://material.io/guidelines/components/data-tables.html
|
|
||||||
*/
|
|
||||||
.example-table {
|
|
||||||
flex: 1 1 auto;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-header-row, .example-row {
|
|
||||||
display: flex;
|
|
||||||
border-bottom: 1px solid #ccc;
|
|
||||||
align-items: center;
|
|
||||||
height: 32px;
|
|
||||||
padding: 0 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-cell, .example-header-cell {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-header-cell {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: rgba(0, 0, 0, 0.54);
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-cell {
|
|
||||||
font-size: 13px;
|
|
||||||
color: rgba(0, 0, 0, 0.87);
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,36 +1,28 @@
|
||||||
<div class="example-container mat-elevation-z8">
|
<table cdk-table [dataSource]="dataSource">
|
||||||
<cdk-table #table [dataSource]="dataSource" class="example-table">
|
<!-- Position Column -->
|
||||||
<!--- Note that these columns can be defined in any order.
|
<ng-container cdkColumnDef="position">
|
||||||
The actual rendered columns are set as a property on the row definition" -->
|
<th cdk-header-cell *cdkHeaderCellDef> No. </th>
|
||||||
|
<td cdk-cell *cdkCellDef="let element"> {{element.position}} </td>
|
||||||
<!-- ID Column -->
|
|
||||||
<ng-container cdkColumnDef="userId">
|
|
||||||
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> ID </cdk-header-cell>
|
|
||||||
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.id}} </cdk-cell>
|
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
<!-- Progress Column -->
|
|
||||||
<ng-container cdkColumnDef="progress">
|
|
||||||
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Progress </cdk-header-cell>
|
|
||||||
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.progress}}% </cdk-cell>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- Name Column -->
|
<!-- Name Column -->
|
||||||
<ng-container cdkColumnDef="userName">
|
<ng-container cdkColumnDef="name">
|
||||||
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell"> Name </cdk-header-cell>
|
<th cdk-header-cell *cdkHeaderCellDef> Name </th>
|
||||||
<cdk-cell *cdkCellDef="let row" class="example-cell"> {{row.name}} </cdk-cell>
|
<td cdk-cell *cdkCellDef="let element"> {{element.name}} </td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- Color Column -->
|
<!-- Weight Column -->
|
||||||
<ng-container cdkColumnDef="color">
|
<ng-container cdkColumnDef="weight">
|
||||||
<cdk-header-cell *cdkHeaderCellDef class="example-header-cell">Color</cdk-header-cell>
|
<th cdk-header-cell *cdkHeaderCellDef> Weight </th>
|
||||||
<cdk-cell *cdkCellDef="let row" class="example-cell"
|
<td cdk-cell *cdkCellDef="let element"> {{element.weight}} </td>
|
||||||
[style.color]="row.color">
|
|
||||||
{{row.color}}
|
|
||||||
</cdk-cell>
|
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<cdk-header-row *cdkHeaderRowDef="displayedColumns" class="example-header-row"></cdk-header-row>
|
<!-- Symbol Column -->
|
||||||
<cdk-row *cdkRowDef="let row; columns: displayedColumns;" class="example-row"></cdk-row>
|
<ng-container cdkColumnDef="symbol">
|
||||||
</cdk-table>
|
<th cdk-header-cell *cdkHeaderCellDef> Symbol </th>
|
||||||
</div>
|
<td cdk-cell *cdkCellDef="let element"> {{element.symbol}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
</table>
|
||||||
|
|
|
@ -11,61 +11,29 @@ import {BehaviorSubject, Observable} from 'rxjs';
|
||||||
templateUrl: 'cdk-table-basic-example.html',
|
templateUrl: 'cdk-table-basic-example.html',
|
||||||
})
|
})
|
||||||
export class CdkTableBasicExample {
|
export class CdkTableBasicExample {
|
||||||
displayedColumns = ['userId', 'userName', 'progress', 'color'];
|
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||||
exampleDatabase = new ExampleDatabase();
|
dataSource = new ExampleDataSource();
|
||||||
dataSource: ExampleDataSource | null;
|
|
||||||
|
|
||||||
ngOnInit() {
|
|
||||||
this.dataSource = new ExampleDataSource(this.exampleDatabase);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Constants used to fill up our data base. */
|
export interface PeriodicElement {
|
||||||
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 {
|
|
||||||
id: string;
|
|
||||||
name: string;
|
name: string;
|
||||||
progress: string;
|
position: number;
|
||||||
color: string;
|
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[] { return this.dataChange.value; }
|
|
||||||
|
|
||||||
constructor() {
|
|
||||||
// Fill up the database with 100 users.
|
|
||||||
for (let i = 0; i < 100; i++) { this.addUser(); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Adds a new user to the database. */
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
addUser() {
|
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||||
const copiedData = this.data.slice();
|
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||||
copiedData.push(this.createNewUser());
|
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||||
this.dataChange.next(copiedData);
|
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||||
}
|
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||||
|
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||||
/** Builds and returns a new User. */
|
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||||
private createNewUser() {
|
{position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
|
||||||
const name =
|
{position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
|
||||||
NAMES[Math.round(Math.random() * (NAMES.length - 1))] + ' ' +
|
{position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
|
||||||
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
|
* Data source to provide what data should be rendered in the table. Note that the data source
|
||||||
|
@ -74,14 +42,13 @@ export class ExampleDatabase {
|
||||||
* the underlying data. Instead, it only needs to take the data and send the table exactly what
|
* the underlying data. Instead, it only needs to take the data and send the table exactly what
|
||||||
* should be rendered.
|
* should be rendered.
|
||||||
*/
|
*/
|
||||||
export class ExampleDataSource extends DataSource<any> {
|
export class ExampleDataSource extends DataSource<PeriodicElement> {
|
||||||
constructor(private _exampleDatabase: ExampleDatabase) {
|
/** Stream of data that is provided to the table. */
|
||||||
super();
|
data: BehaviorSubject<PeriodicElement[]> = new BehaviorSubject<PeriodicElement[]>(ELEMENT_DATA);
|
||||||
}
|
|
||||||
|
|
||||||
/** Connect function called by the table to retrieve one stream containing the data to render. */
|
/** Connect function called by the table to retrieve one stream containing the data to render. */
|
||||||
connect(): Observable<UserData[]> {
|
connect(): Observable<PeriodicElement[]> {
|
||||||
return this._exampleDatabase.dataChange;
|
return this.data;
|
||||||
}
|
}
|
||||||
|
|
||||||
disconnect() {}
|
disconnect() {}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import {Component, Injectable} from '@angular/core';
|
|
||||||
import {FlatTreeControl} from '@angular/cdk/tree';
|
import {FlatTreeControl} from '@angular/cdk/tree';
|
||||||
import {MatTreeFlattener, MatTreeFlatDataSource} from '@angular/material/tree';
|
import {Component, Injectable} from '@angular/core';
|
||||||
import {of, Observable, BehaviorSubject} from 'rxjs';
|
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
|
||||||
|
import {BehaviorSubject, Observable, of as observableOf} from 'rxjs';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* File node data with nested structure.
|
* File node data with nested structure.
|
||||||
|
@ -154,7 +154,9 @@ export class CdkTreeFlatExample {
|
||||||
|
|
||||||
private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
|
private _isExpandable = (node: FileFlatNode) => { return node.expandable; };
|
||||||
|
|
||||||
private _getChildren = (node: FileNode): Observable<FileNode[]> => { return of(node.children); };
|
private _getChildren = (node: FileNode): Observable<FileNode[]> => {
|
||||||
|
return observableOf(node.children);
|
||||||
|
}
|
||||||
|
|
||||||
hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
|
hasChild = (_: number, _nodeData: FileFlatNode) => { return _nodeData.expandable; };
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import {Component, Injectable} from '@angular/core';
|
|
||||||
import {NestedTreeControl} from '@angular/cdk/tree';
|
import {NestedTreeControl} from '@angular/cdk/tree';
|
||||||
|
import {Component, Injectable} from '@angular/core';
|
||||||
import {MatTreeNestedDataSource} from '@angular/material/tree';
|
import {MatTreeNestedDataSource} from '@angular/material/tree';
|
||||||
import {of, BehaviorSubject} from 'rxjs';
|
import {BehaviorSubject, of as observableOf} from 'rxjs';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Json node data with nested structure. Each node has a filename and a value or a list of children
|
* Json node data with nested structure. Each node has a filename and a value or a list of children
|
||||||
|
@ -125,7 +125,7 @@ export class CdkTreeNestedExample {
|
||||||
database.dataChange.subscribe(data => this.nestedDataSource.data = data);
|
database.dataChange.subscribe(data => this.nestedDataSource.data = data);
|
||||||
}
|
}
|
||||||
|
|
||||||
private _getChildren = (node: FileNode) => { return of(node.children); };
|
private _getChildren = (node: FileNode) => { return observableOf(node.children); };
|
||||||
|
|
||||||
hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
|
hasNestedChild = (_: number, nodeData: FileNode) => {return !(nodeData.type); };
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
[selectable]="selectable"
|
[selectable]="selectable"
|
||||||
[removable]="removable"
|
[removable]="removable"
|
||||||
(removed)="remove(fruit)">
|
(removed)="remove(fruit)">
|
||||||
{{fruit.name}}
|
{{fruit}}
|
||||||
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
|
||||||
</mat-chip>
|
</mat-chip>
|
||||||
<input
|
<input
|
||||||
|
|
|
@ -26,14 +26,15 @@ export class ChipsAutocompleteExample {
|
||||||
filteredFruits: Observable<any[]>;
|
filteredFruits: Observable<any[]>;
|
||||||
|
|
||||||
fruits = [
|
fruits = [
|
||||||
{ name: 'Lemon' },
|
'Lemon',
|
||||||
];
|
];
|
||||||
|
|
||||||
allFruits = [
|
allFruits = [
|
||||||
'Orange',
|
|
||||||
'Strawberry',
|
|
||||||
'Lime',
|
|
||||||
'Apple',
|
'Apple',
|
||||||
|
'Lemon',
|
||||||
|
'Lime',
|
||||||
|
'Orange',
|
||||||
|
'Strawberry'
|
||||||
];
|
];
|
||||||
|
|
||||||
@ViewChild('fruitInput') fruitInput: ElementRef;
|
@ViewChild('fruitInput') fruitInput: ElementRef;
|
||||||
|
@ -50,13 +51,15 @@ export class ChipsAutocompleteExample {
|
||||||
|
|
||||||
// Add our fruit
|
// Add our fruit
|
||||||
if ((value || '').trim()) {
|
if ((value || '').trim()) {
|
||||||
this.fruits.push({ name: value.trim() });
|
this.fruits.push(value.trim());
|
||||||
}
|
}
|
||||||
|
|
||||||
// Reset the input value
|
// Reset the input value
|
||||||
if (input) {
|
if (input) {
|
||||||
input.value = '';
|
input.value = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.fruitCtrl.setValue(null);
|
||||||
}
|
}
|
||||||
|
|
||||||
remove(fruit: any): void {
|
remove(fruit: any): void {
|
||||||
|
@ -73,7 +76,8 @@ export class ChipsAutocompleteExample {
|
||||||
}
|
}
|
||||||
|
|
||||||
selected(event: MatAutocompleteSelectedEvent): void {
|
selected(event: MatAutocompleteSelectedEvent): void {
|
||||||
this.fruits.push({ name: event.option.viewValue });
|
this.fruits.push(event.option.viewValue);
|
||||||
this.fruitInput.nativeElement.value = '';
|
this.fruitInput.nativeElement.value = '';
|
||||||
|
this.fruitCtrl.setValue(null);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
|
||||||
// the `default as` syntax.
|
// the `default as` syntax.
|
||||||
import * as _moment from 'moment';
|
import * as _moment from 'moment';
|
||||||
// tslint:disable-next-line:no-duplicate-imports
|
// tslint:disable-next-line:no-duplicate-imports
|
||||||
// import {default as _rollupMoment} from 'moment';
|
import {default as _rollupMoment} from 'moment';
|
||||||
|
|
||||||
// const moment = _rollupMoment || _moment;
|
const moment = _rollupMoment || _moment;
|
||||||
const moment = _moment;
|
|
||||||
|
|
||||||
// See the Moment.js docs for the meaning of these formats:
|
// See the Moment.js docs for the meaning of these formats:
|
||||||
// https://momentjs.com/docs/#/displaying/format/
|
// https://momentjs.com/docs/#/displaying/format/
|
||||||
|
|
|
@ -9,10 +9,9 @@ import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/
|
||||||
// the `default as` syntax.
|
// the `default as` syntax.
|
||||||
import * as _moment from 'moment';
|
import * as _moment from 'moment';
|
||||||
// tslint:disable-next-line:no-duplicate-imports
|
// tslint:disable-next-line:no-duplicate-imports
|
||||||
// import {default as _rollupMoment} from 'moment';
|
import {default as _rollupMoment} from 'moment';
|
||||||
|
|
||||||
// const moment = _rollupMoment || _moment;
|
const moment = _rollupMoment || _moment;
|
||||||
const moment = _moment;
|
|
||||||
|
|
||||||
/** @title Datepicker that uses Moment.js dates */
|
/** @title Datepicker that uses Moment.js dates */
|
||||||
@Component({
|
@Component({
|
||||||
|
|
|
@ -9,12 +9,10 @@ import {MatDatepicker} from '@angular/material/datepicker';
|
||||||
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
|
// syntax. However, rollup creates a synthetic default module and we thus need to import it using
|
||||||
// the `default as` syntax.
|
// the `default as` syntax.
|
||||||
import * as _moment from 'moment';
|
import * as _moment from 'moment';
|
||||||
import { Moment } from 'moment';
|
|
||||||
// tslint:disable-next-line:no-duplicate-imports
|
// tslint:disable-next-line:no-duplicate-imports
|
||||||
// import {default as _rollupMoment, Moment} from 'moment';
|
import {default as _rollupMoment, Moment} from 'moment';
|
||||||
|
|
||||||
// const moment = _rollupMoment || _moment;
|
const moment = _rollupMoment || _moment;
|
||||||
const moment = _moment;
|
|
||||||
|
|
||||||
// See the Moment.js docs for the meaning of these formats:
|
// See the Moment.js docs for the meaning of these formats:
|
||||||
// https://momentjs.com/docs/#/displaying/format/
|
// https://momentjs.com/docs/#/displaying/format/
|
||||||
|
|
|
@ -14,6 +14,6 @@ export class IconSvgExample {
|
||||||
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
|
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
|
||||||
iconRegistry.addSvgIcon(
|
iconRegistry.addSvgIcon(
|
||||||
'thumbs-up',
|
'thumbs-up',
|
||||||
sanitizer.bypassSecurityTrustResourceUrl('assets/images/examples/thumbup-icon.svg'));
|
sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import {MediaMatcher} from '@angular/cdk/layout';
|
import {MediaMatcher} from '@angular/cdk/layout';
|
||||||
import {ChangeDetectorRef, Component} from '@angular/core';
|
import {ChangeDetectorRef, Component, OnDestroy} from '@angular/core';
|
||||||
|
|
||||||
/** @title Responsive sidenav */
|
/** @title Responsive sidenav */
|
||||||
@Component({
|
@Component({
|
||||||
|
@ -7,7 +7,7 @@ import {ChangeDetectorRef, Component} from '@angular/core';
|
||||||
templateUrl: 'sidenav-responsive-example.html',
|
templateUrl: 'sidenav-responsive-example.html',
|
||||||
styleUrls: ['sidenav-responsive-example.css'],
|
styleUrls: ['sidenav-responsive-example.css'],
|
||||||
})
|
})
|
||||||
export class SidenavResponsiveExample {
|
export class SidenavResponsiveExample implements OnDestroy {
|
||||||
mobileQuery: MediaQueryList;
|
mobileQuery: MediaQueryList;
|
||||||
|
|
||||||
fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`);
|
fillerNav = Array(50).fill(0).map((_, i) => `Nav Item ${i + 1}`);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||||
templateUrl: 'stepper-editable-example.html',
|
templateUrl: 'stepper-editable-example.html',
|
||||||
styleUrls: ['stepper-editable-example.css']
|
styleUrls: ['stepper-editable-example.css']
|
||||||
})
|
})
|
||||||
export class StepperEditableExample {
|
export class StepperEditableExample implements OnInit {
|
||||||
firstFormGroup: FormGroup;
|
firstFormGroup: FormGroup;
|
||||||
secondFormGroup: FormGroup;
|
secondFormGroup: FormGroup;
|
||||||
isEditable: boolean = false;
|
isEditable: boolean = false;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||||
templateUrl: 'stepper-optional-example.html',
|
templateUrl: 'stepper-optional-example.html',
|
||||||
styleUrls: ['stepper-optional-example.css']
|
styleUrls: ['stepper-optional-example.css']
|
||||||
})
|
})
|
||||||
export class StepperOptionalExample {
|
export class StepperOptionalExample implements OnInit {
|
||||||
firstFormGroup: FormGroup;
|
firstFormGroup: FormGroup;
|
||||||
secondFormGroup: FormGroup;
|
secondFormGroup: FormGroup;
|
||||||
isOptional: boolean = false;
|
isOptional: boolean = false;
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component} from '@angular/core';
|
import {Component, OnInit} from '@angular/core';
|
||||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -9,7 +9,7 @@ import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||||
templateUrl: 'stepper-overview-example.html',
|
templateUrl: 'stepper-overview-example.html',
|
||||||
styleUrls: ['stepper-overview-example.css']
|
styleUrls: ['stepper-overview-example.css']
|
||||||
})
|
})
|
||||||
export class StepperOverviewExample {
|
export class StepperOverviewExample implements OnInit {
|
||||||
isLinear = false;
|
isLinear = false;
|
||||||
firstFormGroup: FormGroup;
|
firstFormGroup: FormGroup;
|
||||||
secondFormGroup: FormGroup;
|
secondFormGroup: FormGroup;
|
||||||
|
|
|
@ -0,0 +1,36 @@
|
||||||
|
<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
|
||||||
|
{{!isLinear ? 'Enable linear mode' : 'Disable linear mode'}}
|
||||||
|
</button>
|
||||||
|
<mat-vertical-stepper [linear]="isLinear" #stepper>
|
||||||
|
<mat-step [stepControl]="firstFormGroup">
|
||||||
|
<form [formGroup]="firstFormGroup">
|
||||||
|
<ng-template matStepLabel>Fill out your name</ng-template>
|
||||||
|
<mat-form-field>
|
||||||
|
<input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
|
||||||
|
</mat-form-field>
|
||||||
|
<div>
|
||||||
|
<button mat-button matStepperNext>Next</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</mat-step>
|
||||||
|
<mat-step [stepControl]="secondFormGroup">
|
||||||
|
<form [formGroup]="secondFormGroup">
|
||||||
|
<ng-template matStepLabel>Fill out your address</ng-template>
|
||||||
|
<mat-form-field>
|
||||||
|
<input matInput placeholder="Address" formControlName="secondCtrl" required>
|
||||||
|
</mat-form-field>
|
||||||
|
<div>
|
||||||
|
<button mat-button matStepperPrevious>Back</button>
|
||||||
|
<button mat-button matStepperNext>Next</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</mat-step>
|
||||||
|
<mat-step>
|
||||||
|
<ng-template matStepLabel>Done</ng-template>
|
||||||
|
You are now done.
|
||||||
|
<div>
|
||||||
|
<button mat-button matStepperPrevious>Back</button>
|
||||||
|
<button mat-button (click)="stepper.reset()">Reset</button>
|
||||||
|
</div>
|
||||||
|
</mat-step>
|
||||||
|
</mat-vertical-stepper>
|
|
@ -0,0 +1,27 @@
|
||||||
|
import {Component, OnInit} from '@angular/core';
|
||||||
|
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Stepper vertical
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'stepper-vertical',
|
||||||
|
templateUrl: 'stepper-vertical-example.html',
|
||||||
|
styleUrls: ['stepper-vertical-example.css']
|
||||||
|
})
|
||||||
|
export class StepperVerticalExample implements OnInit {
|
||||||
|
isLinear = false;
|
||||||
|
firstFormGroup: FormGroup;
|
||||||
|
secondFormGroup: FormGroup;
|
||||||
|
|
||||||
|
constructor(private _formBuilder: FormBuilder) { }
|
||||||
|
|
||||||
|
ngOnInit() {
|
||||||
|
this.firstFormGroup = this._formBuilder.group({
|
||||||
|
firstCtrl: ['', Validators.required]
|
||||||
|
});
|
||||||
|
this.secondFormGroup = this._formBuilder.group({
|
||||||
|
secondCtrl: ['', Validators.required]
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
/** No CSS for this example */
|
|
@ -0,0 +1,10 @@
|
||||||
|
<ng-container *ngIf="(asyncTabs | async) === null">
|
||||||
|
Loading tabs...
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<mat-tab-group>
|
||||||
|
<mat-tab *ngFor="let tab of asyncTabs | async">
|
||||||
|
<ng-template mat-tab-label>{{tab.label}}</ng-template>
|
||||||
|
{{tab.content}}
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,31 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {Observable, Observer} from 'rxjs';
|
||||||
|
|
||||||
|
export interface ExampleTab {
|
||||||
|
label: string;
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Tab group with asynchronously loading tab contents
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-async-example',
|
||||||
|
templateUrl: 'tab-group-async-example.html',
|
||||||
|
styleUrls: ['tab-group-async-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupAsyncExample {
|
||||||
|
asyncTabs: Observable<ExampleTab[]>;
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
this.asyncTabs = Observable.create((observer: Observer<ExampleTab[]>) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
observer.next([
|
||||||
|
{label: 'First', content: 'Content 1'},
|
||||||
|
{label: 'Second', content: 'Content 2'},
|
||||||
|
{label: 'Third', content: 'Content 3'},
|
||||||
|
]);
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
/** No CSS for this example */
|
|
@ -0,0 +1,5 @@
|
||||||
|
<mat-tab-group>
|
||||||
|
<mat-tab label="First"> Content 1 </mat-tab>
|
||||||
|
<mat-tab label="Second"> Content 2 </mat-tab>
|
||||||
|
<mat-tab label="Third"> Content 3 </mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Basic use of the tab group
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-basic-example',
|
||||||
|
templateUrl: 'tab-group-basic-example.html',
|
||||||
|
styleUrls: ['tab-group-basic-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupBasicExample {}
|
|
@ -0,0 +1,3 @@
|
||||||
|
.example-tab-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
|
@ -0,0 +1,26 @@
|
||||||
|
<mat-tab-group>
|
||||||
|
<mat-tab>
|
||||||
|
<ng-template mat-tab-label>
|
||||||
|
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
|
||||||
|
First
|
||||||
|
</ng-template>
|
||||||
|
Content 1
|
||||||
|
</mat-tab>
|
||||||
|
|
||||||
|
<mat-tab>
|
||||||
|
<ng-template mat-tab-label>
|
||||||
|
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
|
||||||
|
Second
|
||||||
|
</ng-template>
|
||||||
|
Content 2
|
||||||
|
</mat-tab>
|
||||||
|
|
||||||
|
<mat-tab>
|
||||||
|
<ng-template mat-tab-label>
|
||||||
|
<mat-icon class="example-tab-icon">thumb_up</mat-icon>
|
||||||
|
Third
|
||||||
|
</ng-template>
|
||||||
|
|
||||||
|
Content 3
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Using tabs with a custom label template
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-custom-label-example',
|
||||||
|
templateUrl: 'tab-group-custom-label-example.html',
|
||||||
|
styleUrls: ['tab-group-custom-label-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupCustomLabelExample {}
|
|
@ -0,0 +1,18 @@
|
||||||
|
.example-small-box, .example-large-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-small-box {
|
||||||
|
height: 100px;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-large-box {
|
||||||
|
height: 300px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
|
@ -0,0 +1,12 @@
|
||||||
|
<mat-tab-group dynamicHeight>
|
||||||
|
<mat-tab label="Short tab">
|
||||||
|
<div class="example-small-box mat-elevation-z4">
|
||||||
|
Small content
|
||||||
|
</div>
|
||||||
|
</mat-tab>
|
||||||
|
<mat-tab label="Long tab">
|
||||||
|
<div class="example-large-box mat-elevation-z4">
|
||||||
|
Large content
|
||||||
|
</div>
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Tag group with dynamic height based on tab contents
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-dynamic-height-example',
|
||||||
|
templateUrl: 'tab-group-dynamic-height-example.html',
|
||||||
|
styleUrls: ['tab-group-dynamic-height-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupDynamicHeightExample {}
|
|
@ -0,0 +1,5 @@
|
||||||
|
.example-input-label,
|
||||||
|
.example-add-tab-button,
|
||||||
|
.example-delete-tab-button {
|
||||||
|
margin: 8px;
|
||||||
|
}
|
|
@ -0,0 +1,29 @@
|
||||||
|
<div>
|
||||||
|
<span class="example-input-label"> Selected tab index: </span>
|
||||||
|
<mat-form-field>
|
||||||
|
<input matInput type="number" [formControl]="selected">
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button mat-raised-button
|
||||||
|
class="example-add-tab-button"
|
||||||
|
(click)="addTab(selectAfterAdding.checked)">
|
||||||
|
Add new tab
|
||||||
|
</button>
|
||||||
|
<mat-checkbox #selectAfterAdding> Select tab after adding </mat-checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-tab-group [selectedIndex]="selected.value"
|
||||||
|
(selectedIndexChange)="selected.setValue($event)">
|
||||||
|
<mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
|
||||||
|
Contents for {{tab}} tab
|
||||||
|
|
||||||
|
<button mat-raised-button
|
||||||
|
class="example-delete-tab-button"
|
||||||
|
[disabled]="tabs.length === 1"
|
||||||
|
(click)="removeTab(index)">
|
||||||
|
Delete Tab
|
||||||
|
</button>
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,27 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {FormControl} from '@angular/forms';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Tag group with dynamically changing tabs
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-dynamic-example',
|
||||||
|
templateUrl: 'tab-group-dynamic-example.html',
|
||||||
|
styleUrls: ['tab-group-dynamic-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupDynamicExample {
|
||||||
|
tabs = ['First', 'Second', 'Third'];
|
||||||
|
selected = new FormControl(0);
|
||||||
|
|
||||||
|
addTab(selectAfterAdding: boolean) {
|
||||||
|
this.tabs.push('New');
|
||||||
|
|
||||||
|
if (selectAfterAdding) {
|
||||||
|
this.selected.setValue(this.tabs.length - 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
removeTab(index: number) {
|
||||||
|
this.tabs.splice(index, 1);
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1 @@
|
||||||
|
/** No CSS for this example */
|
|
@ -0,0 +1,5 @@
|
||||||
|
<mat-tab-group headerPosition="below">
|
||||||
|
<mat-tab label="First"> Content 1 </mat-tab>
|
||||||
|
<mat-tab label="Second"> Content 2 </mat-tab>
|
||||||
|
<mat-tab label="Third"> Content 3 </mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Tab group with the headers on the bottom
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-header-below-example',
|
||||||
|
templateUrl: 'tab-group-header-below-example.html',
|
||||||
|
styleUrls: ['tab-group-header-below-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupHeaderBelowExample {}
|
|
@ -0,0 +1 @@
|
||||||
|
/** No CSS for this example */
|
|
@ -0,0 +1,17 @@
|
||||||
|
<mat-tab-group>
|
||||||
|
<mat-tab label="First">
|
||||||
|
<ng-template matTabContent>
|
||||||
|
Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
|
||||||
|
</ng-template>
|
||||||
|
</mat-tab>
|
||||||
|
<mat-tab label="Second">
|
||||||
|
<ng-template matTabContent>
|
||||||
|
Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
|
||||||
|
</ng-template>
|
||||||
|
</mat-tab>
|
||||||
|
<mat-tab label="Third">
|
||||||
|
<ng-template matTabContent>
|
||||||
|
Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
|
||||||
|
</ng-template>
|
||||||
|
</mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,21 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Tab group where the tab content is loaded lazily (when activated)
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-lazy-loaded-example',
|
||||||
|
templateUrl: 'tab-group-lazy-loaded-example.html',
|
||||||
|
styleUrls: ['tab-group-lazy-loaded-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupLazyLoadedExample {
|
||||||
|
tabLoadTimes: Date[] = [];
|
||||||
|
|
||||||
|
getTimeLoaded(index: number) {
|
||||||
|
if (!this.tabLoadTimes[index]) {
|
||||||
|
this.tabLoadTimes[index] = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.tabLoadTimes[index];
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
.example-stretched-tabs {
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
|
@ -0,0 +1,5 @@
|
||||||
|
<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
|
||||||
|
<mat-tab label="First"> Content 1 </mat-tab>
|
||||||
|
<mat-tab label="Second"> Content 2 </mat-tab>
|
||||||
|
<mat-tab label="Third"> Content 3 </mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Tab group with stretched labels
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-stretched-example',
|
||||||
|
templateUrl: 'tab-group-stretched-example.html',
|
||||||
|
styleUrls: ['tab-group-stretched-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupStretchedExample {}
|
|
@ -0,0 +1,4 @@
|
||||||
|
.example-button-toggle-label {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 16px;
|
||||||
|
}
|
|
@ -0,0 +1,25 @@
|
||||||
|
<div>
|
||||||
|
<mat-button-toggle-group #colorToggle="matButtonToggleGroup"
|
||||||
|
value="primary"
|
||||||
|
aria-label="Change color">
|
||||||
|
<mat-button-toggle value="primary"> Primary </mat-button-toggle>
|
||||||
|
<mat-button-toggle value="accent"> Accent </mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
<span class="example-button-toggle-label"> Color </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<mat-button-toggle-group #backgroundColorToggle="matButtonToggleGroup"
|
||||||
|
value="primary"
|
||||||
|
aria-label="Change color">
|
||||||
|
<mat-button-toggle value="primary"> Primary </mat-button-toggle>
|
||||||
|
<mat-button-toggle value="accent"> Accent </mat-button-toggle>
|
||||||
|
</mat-button-toggle-group>
|
||||||
|
<span class="example-button-toggle-label"> Background Color </span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<mat-tab-group [color]="colorToggle.value" [backgroundColor]="backgroundColorToggle.value">
|
||||||
|
<mat-tab label="First"> Content 1 </mat-tab>
|
||||||
|
<mat-tab label="Second"> Content 2 </mat-tab>
|
||||||
|
<mat-tab label="Third"> Content 3 </mat-tab>
|
||||||
|
</mat-tab-group>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Customizing the theme options on the tab group
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-group-theme-example',
|
||||||
|
templateUrl: 'tab-group-theme-example.html',
|
||||||
|
styleUrls: ['tab-group-theme-example.css'],
|
||||||
|
})
|
||||||
|
export class TabGroupThemeExample {}
|
|
@ -0,0 +1,3 @@
|
||||||
|
.example-action-button {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
|
@ -0,0 +1,12 @@
|
||||||
|
<button mat-raised-button
|
||||||
|
class="example-action-button"
|
||||||
|
(click)="toggleBackground()">
|
||||||
|
Toggle background
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<nav mat-tab-nav-bar [backgroundColor]="background">
|
||||||
|
<a mat-tab-link *ngFor="let link of links"
|
||||||
|
(click)="activeLink = link"
|
||||||
|
[active]="activeLink == link"> {{ link }} </a>
|
||||||
|
<a mat-tab-link disabled>Disabled Link</a>
|
||||||
|
</nav>
|
|
@ -0,0 +1,19 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Basic use of the tab nav bar
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'tab-nav-bar-basic-example',
|
||||||
|
templateUrl: 'tab-nav-bar-basic-example.html',
|
||||||
|
styleUrls: ['tab-nav-bar-basic-example.css'],
|
||||||
|
})
|
||||||
|
export class TabNavBarBasicExample {
|
||||||
|
links = ['First', 'Second', 'Third'];
|
||||||
|
activeLink = this.links[0];
|
||||||
|
background = '';
|
||||||
|
|
||||||
|
toggleBackground() {
|
||||||
|
this.background = this.background ? '' : 'primary';
|
||||||
|
}
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -0,0 +1,28 @@
|
||||||
|
<mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||||
|
<!-- 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="name">
|
||||||
|
<mat-header-cell *matHeaderCellDef> Name </mat-header-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>
|
||||||
|
|
||||||
|
<!-- Symbol Column -->
|
||||||
|
<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>
|
||||||
|
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
||||||
|
</mat-table>
|
|
@ -0,0 +1,34 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Basic use of `<mat-table>` (uses display flex)
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'table-basic-flex-example',
|
||||||
|
styleUrls: ['table-basic-flex-example.css'],
|
||||||
|
templateUrl: 'table-basic-flex-example.html',
|
||||||
|
})
|
||||||
|
export class TableBasicFlexExample {
|
||||||
|
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||||
|
dataSource = ELEMENT_DATA;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PeriodicElement {
|
||||||
|
name: string;
|
||||||
|
position: number;
|
||||||
|
weight: number;
|
||||||
|
symbol: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
|
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||||
|
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||||
|
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||||
|
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||||
|
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||||
|
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||||
|
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||||
|
{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'},
|
||||||
|
];
|
|
@ -1,7 +1,3 @@
|
||||||
.example-container {
|
table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
max-height: 500px;
|
|
||||||
min-width: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="example-container mat-elevation-z8">
|
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||||
<table mat-table #table [dataSource]="dataSource">
|
|
||||||
|
|
||||||
<!--- Note that these columns can be defined in any order.
|
<!--- Note that these columns can be defined in any order.
|
||||||
The actual rendered columns are set as a property on the row definition" -->
|
The actual rendered columns are set as a property on the row definition" -->
|
||||||
|
@ -31,4 +30,4 @@
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import {Component} from '@angular/core';
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @title Basic table
|
* @title Basic use of `<table mat-table>`
|
||||||
*/
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'table-basic-example',
|
selector: 'table-basic-example',
|
||||||
|
@ -13,14 +13,14 @@ export class TableBasicExample {
|
||||||
dataSource = ELEMENT_DATA;
|
dataSource = ELEMENT_DATA;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Element {
|
export interface PeriodicElement {
|
||||||
name: string;
|
name: string;
|
||||||
position: number;
|
position: number;
|
||||||
weight: number;
|
weight: number;
|
||||||
symbol: string;
|
symbol: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ELEMENT_DATA: Element[] = [
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
{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'},
|
||||||
|
@ -31,14 +31,4 @@ const ELEMENT_DATA: Element[] = [
|
||||||
{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: 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'},
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 16px 8px;
|
||||||
|
}
|
|
@ -0,0 +1,13 @@
|
||||||
|
<button mat-raised-button (click)="addColumn()"> Add column </button>
|
||||||
|
<button mat-raised-button (click)="removeColumn()"> Remove column </button>
|
||||||
|
<button mat-raised-button (click)="shuffle()"> Shuffle </button>
|
||||||
|
|
||||||
|
<table mat-table [dataSource]="data" class="mat-elevation-z8">
|
||||||
|
<ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
|
||||||
|
</table>
|
|
@ -0,0 +1,59 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Table dynamically changing the columns displayed
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'table-dynamic-columns-example',
|
||||||
|
styleUrls: ['table-dynamic-columns-example.css'],
|
||||||
|
templateUrl: 'table-dynamic-columns-example.html',
|
||||||
|
})
|
||||||
|
export class TableDynamicColumnsExample {
|
||||||
|
definedColumns = ['name', 'weight', 'symbol', 'position'];
|
||||||
|
columnsToDisplay = this.definedColumns.slice();
|
||||||
|
data: PeriodicElement[] = ELEMENT_DATA;
|
||||||
|
|
||||||
|
addColumn() {
|
||||||
|
const randomColumn = Math.floor(Math.random() * this.definedColumns.length);
|
||||||
|
this.columnsToDisplay.push(this.definedColumns[randomColumn]);
|
||||||
|
}
|
||||||
|
|
||||||
|
removeColumn() {
|
||||||
|
if (this.columnsToDisplay.length) {
|
||||||
|
this.columnsToDisplay.pop();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
shuffle() {
|
||||||
|
let currentIndex = this.columnsToDisplay.length;
|
||||||
|
while (0 !== currentIndex) {
|
||||||
|
let randomIndex = Math.floor(Math.random() * currentIndex);
|
||||||
|
currentIndex -= 1;
|
||||||
|
|
||||||
|
// Swap
|
||||||
|
let temp = this.columnsToDisplay[currentIndex];
|
||||||
|
this.columnsToDisplay[currentIndex] = this.columnsToDisplay[randomIndex];
|
||||||
|
this.columnsToDisplay[randomIndex] = temp;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PeriodicElement {
|
||||||
|
name: string;
|
||||||
|
position: number;
|
||||||
|
weight: number;
|
||||||
|
symbol: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
|
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||||
|
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||||
|
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||||
|
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||||
|
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||||
|
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||||
|
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||||
|
{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'},
|
||||||
|
];
|
|
@ -0,0 +1,47 @@
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.example-detail-row {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.example-element-row:not(.example-expanded-row):hover {
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
tr.example-element-row:not(.example-expanded-row):active {
|
||||||
|
background: #efefef;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-element-row td {
|
||||||
|
border-bottom-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-element-detail {
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-element-diagram {
|
||||||
|
min-width: 80px;
|
||||||
|
border: 2px solid black;
|
||||||
|
padding: 8px;
|
||||||
|
font-weight: lighter;
|
||||||
|
margin: 8px 0;
|
||||||
|
height: 104px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-element-symbol {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-element-description {
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-element-description-attribution {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
|
@ -0,0 +1,35 @@
|
||||||
|
<table mat-table
|
||||||
|
[dataSource]="dataSource" multiTemplateDataRows
|
||||||
|
class="mat-elevation-z8">
|
||||||
|
<ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
|
||||||
|
<ng-container matColumnDef="expandedDetail">
|
||||||
|
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
|
||||||
|
<div class="example-element-detail"
|
||||||
|
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
|
||||||
|
<div class="example-element-diagram">
|
||||||
|
<div class="example-element-position"> {{element.position}} </div>
|
||||||
|
<div class="example-element-symbol"> {{element.symbol}} </div>
|
||||||
|
<div class="example-element-name"> {{element.name}} </div>
|
||||||
|
<div class="example-element-weight"> {{element.weight}} </div>
|
||||||
|
</div>
|
||||||
|
<div class="example-element-description">
|
||||||
|
{{element.description}}
|
||||||
|
<span class="example-element-description-attribution"> -- Wikipedia </span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
|
||||||
|
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
|
||||||
|
class="example-element-row"
|
||||||
|
[class.example-expanded-row]="expandedElement === element"
|
||||||
|
(click)="expandedElement = element">
|
||||||
|
</tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
|
||||||
|
</table>
|
|
@ -0,0 +1,113 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {animate, state, style, transition, trigger} from '@angular/animations';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Table with expandable rows
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'table-expandable-rows-example',
|
||||||
|
styleUrls: ['table-expandable-rows-example.css'],
|
||||||
|
templateUrl: 'table-expandable-rows-example.html',
|
||||||
|
animations: [
|
||||||
|
trigger('detailExpand', [
|
||||||
|
state('collapsed', style({height: '0px', minHeight: '0', display: 'none'})),
|
||||||
|
state('expanded', style({height: '*'})),
|
||||||
|
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
|
||||||
|
]),
|
||||||
|
],
|
||||||
|
})
|
||||||
|
export class TableExpandableRowsExample {
|
||||||
|
dataSource = ELEMENT_DATA;
|
||||||
|
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
|
||||||
|
expandedElement: PeriodicElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PeriodicElement {
|
||||||
|
name: string;
|
||||||
|
position: number;
|
||||||
|
weight: number;
|
||||||
|
symbol: string;
|
||||||
|
description: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
|
{
|
||||||
|
position: 1,
|
||||||
|
name: 'Hydrogen',
|
||||||
|
weight: 1.0079,
|
||||||
|
symbol: 'H',
|
||||||
|
description: `Hydrogen is a chemical element with symbol H and atomic number 1. With a standard
|
||||||
|
atomic weight of 1.008, hydrogen is the lightest element on the periodic table.`
|
||||||
|
}, {
|
||||||
|
position: 2,
|
||||||
|
name: 'Helium',
|
||||||
|
weight: 4.0026,
|
||||||
|
symbol: 'He',
|
||||||
|
description: `Helium is a chemical element with symbol He and atomic number 2. It is a
|
||||||
|
colorless, odorless, tasteless, non-toxic, inert, monatomic gas, the first in the noble gas
|
||||||
|
group in the periodic table. Its boiling point is the lowest among all the elements.`
|
||||||
|
}, {
|
||||||
|
position: 3,
|
||||||
|
name: 'Lithium',
|
||||||
|
weight: 6.941,
|
||||||
|
symbol: 'Li',
|
||||||
|
description: `Lithium is a chemical element with symbol Li and atomic number 3. It is a soft,
|
||||||
|
silvery-white alkali metal. Under standard conditions, it is the lightest metal and the
|
||||||
|
lightest solid element.`
|
||||||
|
}, {
|
||||||
|
position: 4,
|
||||||
|
name: 'Beryllium',
|
||||||
|
weight: 9.0122,
|
||||||
|
symbol: 'Be',
|
||||||
|
description: `Beryllium is a chemical element with symbol Be and atomic number 4. It is a
|
||||||
|
relatively rare element in the universe, usually occurring as a product of the spallation of
|
||||||
|
larger atomic nuclei that have collided with cosmic rays.`
|
||||||
|
}, {
|
||||||
|
position: 5,
|
||||||
|
name: 'Boron',
|
||||||
|
weight: 10.811,
|
||||||
|
symbol: 'B',
|
||||||
|
description: `Boron is a chemical element with symbol B and atomic number 5. Produced entirely
|
||||||
|
by cosmic ray spallation and supernovae and not by stellar nucleosynthesis, it is a
|
||||||
|
low-abundance element in the Solar system and in the Earth's crust.`
|
||||||
|
}, {
|
||||||
|
position: 6,
|
||||||
|
name: 'Carbon',
|
||||||
|
weight: 12.0107,
|
||||||
|
symbol: 'C',
|
||||||
|
description: `Carbon is a chemical element with symbol C and atomic number 6. It is nonmetallic
|
||||||
|
and tetravalent—making four electrons available to form covalent chemical bonds. It belongs
|
||||||
|
to group 14 of the periodic table.`
|
||||||
|
}, {
|
||||||
|
position: 7,
|
||||||
|
name: 'Nitrogen',
|
||||||
|
weight: 14.0067,
|
||||||
|
symbol: 'N',
|
||||||
|
description: `Nitrogen is a chemical element with symbol N and atomic number 7. It was first
|
||||||
|
discovered and isolated by Scottish physician Daniel Rutherford in 1772.`
|
||||||
|
}, {
|
||||||
|
position: 8,
|
||||||
|
name: 'Oxygen',
|
||||||
|
weight: 15.9994,
|
||||||
|
symbol: 'O',
|
||||||
|
description: `Oxygen is a chemical element with symbol O and atomic number 8. It is a member of
|
||||||
|
the chalcogen group on the periodic table, a highly reactive nonmetal, and an oxidizing
|
||||||
|
agent that readily forms oxides with most elements as well as with other compounds.`
|
||||||
|
}, {
|
||||||
|
position: 9,
|
||||||
|
name: 'Fluorine',
|
||||||
|
weight: 18.9984,
|
||||||
|
symbol: 'F',
|
||||||
|
description: `Fluorine is a chemical element with symbol F and atomic number 9. It is the
|
||||||
|
lightest halogen and exists as a highly toxic pale yellow diatomic gas at standard
|
||||||
|
conditions.`
|
||||||
|
}, {
|
||||||
|
position: 10,
|
||||||
|
name: 'Neon',
|
||||||
|
weight: 20.1797,
|
||||||
|
symbol: 'Ne',
|
||||||
|
description: `Neon is a chemical element with symbol Ne and atomic number 10. It is a noble gas.
|
||||||
|
Neon is a colorless, odorless, inert monatomic gas under standard conditions, with about
|
||||||
|
two-thirds the density of air.`
|
||||||
|
},
|
||||||
|
];
|
|
@ -1,15 +1,6 @@
|
||||||
/* Structure */
|
/* Structure */
|
||||||
.example-container {
|
table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
min-width: 300px;
|
|
||||||
max-height: 500px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-header {
|
|
||||||
min-height: 64px;
|
|
||||||
padding: 8px 24px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-form-field {
|
.mat-form-field {
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
<div class="example-container mat-elevation-z8">
|
|
||||||
<div class="example-header">
|
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
|
||||||
|
|
||||||
<table mat-table #table [dataSource]="dataSource">
|
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||||
|
|
||||||
<!-- Position Column -->
|
<!-- Position Column -->
|
||||||
<ng-container matColumnDef="position">
|
<ng-container matColumnDef="position">
|
||||||
|
@ -34,4 +31,3 @@
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
|
@ -20,14 +20,14 @@ export class TableFilteringExample {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Element {
|
export interface PeriodicElement {
|
||||||
name: string;
|
name: string;
|
||||||
position: number;
|
position: number;
|
||||||
weight: number;
|
weight: number;
|
||||||
symbol: string;
|
symbol: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ELEMENT_DATA: Element[] = [
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
{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'},
|
||||||
|
@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
|
||||||
{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: 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'},
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -1,11 +1,7 @@
|
||||||
.example-container {
|
table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
max-height: 500px;
|
|
||||||
min-width: 300px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-table {
|
tr.mat-footer-row {
|
||||||
overflow: auto;
|
font-weight: bold;
|
||||||
max-height: 500px;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,22 +1,19 @@
|
||||||
<div class="example-container mat-elevation-z8">
|
<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
|
||||||
<mat-table [dataSource]="transactions">
|
|
||||||
|
|
||||||
<!-- Item Column -->
|
<!-- Item Column -->
|
||||||
<ng-container matColumnDef="item">
|
<ng-container matColumnDef="item">
|
||||||
<mat-header-cell *matHeaderCellDef> Item </mat-header-cell>
|
<th mat-header-cell *matHeaderCellDef> Item </th>
|
||||||
<mat-cell *matCellDef="let transaction"> {{transaction.item}} </mat-cell>
|
<td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
|
||||||
<mat-footer-cell *matFooterCellDef></mat-footer-cell>
|
<td mat-footer-cell *matFooterCellDef> Total </td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<!-- Cost Column -->
|
<!-- Cost Column -->
|
||||||
<ng-container matColumnDef="cost">
|
<ng-container matColumnDef="cost">
|
||||||
<mat-header-cell *matHeaderCellDef> Cost </mat-header-cell>
|
<th mat-header-cell *matHeaderCellDef> Cost </th>
|
||||||
<mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </mat-cell>
|
<td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
|
||||||
<mat-footer-cell *matFooterCellDef> getTotalCost() </mat-footer-cell>
|
<td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
<mat-footer-row *matFooterRowDef="displayedColumns"></mat-footer-row>
|
<tr mat-footer-row *matFooterRowDef="displayedColumns"></tr>
|
||||||
</mat-table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
|
@ -1,19 +1,16 @@
|
||||||
/* Structure */
|
/* Structure */
|
||||||
.example-container {
|
.example-container {
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-width: 300px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
max-height: 500px;
|
}
|
||||||
|
|
||||||
|
.example-table-container {
|
||||||
|
position: relative;
|
||||||
|
max-height: 400px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.example-header {
|
table {
|
||||||
min-height: 64px;
|
width: 100%;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 24px;
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.example-loading-shade {
|
.example-loading-shade {
|
||||||
|
|
|
@ -7,12 +7,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table mat-table #table [dataSource]="dataSource" class="example-table"
|
<div class="example-table-container">
|
||||||
|
|
||||||
|
<table mat-table [dataSource]="data" class="example-table"
|
||||||
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
|
matSort matSortActive="created" matSortDisableClear matSortDirection="asc">
|
||||||
|
|
||||||
<!--- Note that these columns can be defined in any order.
|
|
||||||
The actual rendered columns are set as a property on the row definition" -->
|
|
||||||
|
|
||||||
<!-- Number Column -->
|
<!-- Number Column -->
|
||||||
<ng-container matColumnDef="number">
|
<ng-container matColumnDef="number">
|
||||||
<th mat-header-cell *matHeaderCellDef>#</th>
|
<th mat-header-cell *matHeaderCellDef>#</th>
|
||||||
|
@ -33,9 +31,7 @@
|
||||||
|
|
||||||
<!-- Created Column -->
|
<!-- Created Column -->
|
||||||
<ng-container matColumnDef="created">
|
<ng-container matColumnDef="created">
|
||||||
<th mat-header-cell *matHeaderCellDef
|
<th mat-header-cell *matHeaderCellDef mat-sort-header disableClear="true">
|
||||||
mat-sort-header
|
|
||||||
disableClear="true">
|
|
||||||
Created
|
Created
|
||||||
</th>
|
</th>
|
||||||
<td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
|
<td mat-cell *matCellDef="let row">{{ row.created_at | date }}</td>
|
||||||
|
@ -44,7 +40,7 @@
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
</table>
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
<mat-paginator [length]="resultsLength" [pageSize]="30">
|
<mat-paginator [length]="resultsLength" [pageSize]="30"></mat-paginator>
|
||||||
</mat-paginator>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import {HttpClient} from '@angular/common/http';
|
import {HttpClient} from '@angular/common/http';
|
||||||
import {AfterViewInit, Component, ViewChild} from '@angular/core';
|
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||||
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
|
import {MatPaginator, MatSort} from '@angular/material';
|
||||||
import {merge, Observable, of as observableOf} from 'rxjs';
|
import {merge, Observable, of as observableOf} from 'rxjs';
|
||||||
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
|
import {catchError, map, startWith, switchMap} from 'rxjs/operators';
|
||||||
|
|
||||||
|
@ -12,10 +12,10 @@ import {catchError, map, startWith, switchMap} from 'rxjs/operators';
|
||||||
styleUrls: ['table-http-example.css'],
|
styleUrls: ['table-http-example.css'],
|
||||||
templateUrl: 'table-http-example.html',
|
templateUrl: 'table-http-example.html',
|
||||||
})
|
})
|
||||||
export class TableHttpExample implements AfterViewInit {
|
export class TableHttpExample implements OnInit {
|
||||||
displayedColumns = ['created', 'state', 'number', 'title'];
|
displayedColumns = ['created', 'state', 'number', 'title'];
|
||||||
exampleDatabase: ExampleHttpDao | null;
|
exampleDatabase: ExampleHttpDao | null;
|
||||||
dataSource = new MatTableDataSource();
|
data: GithubIssue[] = [];
|
||||||
|
|
||||||
resultsLength = 0;
|
resultsLength = 0;
|
||||||
isLoadingResults = true;
|
isLoadingResults = true;
|
||||||
|
@ -26,7 +26,7 @@ export class TableHttpExample implements AfterViewInit {
|
||||||
|
|
||||||
constructor(private http: HttpClient) {}
|
constructor(private http: HttpClient) {}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngOnInit() {
|
||||||
this.exampleDatabase = new ExampleHttpDao(this.http);
|
this.exampleDatabase = new ExampleHttpDao(this.http);
|
||||||
|
|
||||||
// If the user changes the sort order, reset back to the first page.
|
// If the user changes the sort order, reset back to the first page.
|
||||||
|
@ -54,7 +54,7 @@ export class TableHttpExample implements AfterViewInit {
|
||||||
this.isRateLimitReached = true;
|
this.isRateLimitReached = true;
|
||||||
return observableOf([]);
|
return observableOf([]);
|
||||||
})
|
})
|
||||||
).subscribe(data => this.dataSource.data = data);
|
).subscribe(data => this.data = data);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,19 @@
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-first-header-row th {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-second-header-row {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-first-footer-row {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-second-footer-row td {
|
||||||
|
color: #900000;
|
||||||
|
}
|
|
@ -0,0 +1,45 @@
|
||||||
|
<table mat-table [dataSource]="transactions" class="mat-elevation-z8">
|
||||||
|
<!-- Item Column -->
|
||||||
|
<ng-container matColumnDef="item">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Item </th>
|
||||||
|
<td mat-cell *matCellDef="let transaction"> {{transaction.item}} </td>
|
||||||
|
<td mat-footer-cell *matFooterCellDef> Total </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Cost Column -->
|
||||||
|
<ng-container matColumnDef="cost">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Cost </th>
|
||||||
|
<td mat-cell *matCellDef="let transaction"> {{transaction.cost | currency}} </td>
|
||||||
|
<td mat-footer-cell *matFooterCellDef> {{getTotalCost() | currency}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Item Description Column -->
|
||||||
|
<ng-container matColumnDef="item-description">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Name of the item purchased </th>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Cost Description Column -->
|
||||||
|
<ng-container matColumnDef="cost-description">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Cost of the item in USD </th>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Disclaimer column -->
|
||||||
|
<ng-container matColumnDef="disclaimer">
|
||||||
|
<td mat-footer-cell *matFooterCellDef colspan="2">
|
||||||
|
Please note that the cost of items displayed are completely and totally made up.
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- The table will render two header rows, one data row per data object, and two footer rows. -->
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"
|
||||||
|
class="example-first-header-row">
|
||||||
|
</tr>
|
||||||
|
<tr mat-header-row *matHeaderRowDef="['item-description', 'cost-description']"
|
||||||
|
class="example-second-header-row">
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
|
||||||
|
<tr mat-footer-row *matFooterRowDef="displayedColumns" class="example-first-footer-row"></tr>
|
||||||
|
<tr mat-footer-row *matFooterRowDef="['disclaimer']" class="example-second-footer-row"></tr>
|
||||||
|
</table>
|
|
@ -0,0 +1,32 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {Transaction} from '../table-footer-row/table-footer-row-example';
|
||||||
|
|
||||||
|
export interface Transaction {
|
||||||
|
item: string;
|
||||||
|
cost: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Table with multiple header and footer rows
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'table-multiple-header-footer-example',
|
||||||
|
styleUrls: ['table-multiple-header-footer-example.css'],
|
||||||
|
templateUrl: 'table-multiple-header-footer-example.html',
|
||||||
|
})
|
||||||
|
export class TableMultipleHeaderFooterExample {
|
||||||
|
displayedColumns = ['item', 'cost'];
|
||||||
|
transactions: Transaction[] = [
|
||||||
|
{item: 'Beach ball', cost: 4},
|
||||||
|
{item: 'Towel', cost: 5},
|
||||||
|
{item: 'Frisbee', cost: 2},
|
||||||
|
{item: 'Sunscreen', cost: 4},
|
||||||
|
{item: 'Cooler', cost: 25},
|
||||||
|
{item: 'Swim suit', cost: 15},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Gets the total cost of all transactions. */
|
||||||
|
getTotalCost() {
|
||||||
|
return this.transactions.map(t => t.cost).reduce((acc, value) => acc + value, 0);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,18 +0,0 @@
|
||||||
<table class="mat-table">
|
|
||||||
<thead>
|
|
||||||
<tr class="mat-header-row">
|
|
||||||
<th class="mat-header-cell"> No. </th>
|
|
||||||
<th class="mat-header-cell"> Name </th>
|
|
||||||
<th class="mat-header-cell"> Weight </th>
|
|
||||||
<th class="mat-header-cell"> Symbol </th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<tr class="mat-row" *ngFor="let element of elements">
|
|
||||||
<td class="mat-cell"> {{element.position}} </td>
|
|
||||||
<td class="mat-cell"> {{element.name}} </td>
|
|
||||||
<td class="mat-cell"> {{element.weight}} </td>
|
|
||||||
<td class="mat-cell"> {{element.symbol}} </td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
|
@ -1,19 +0,0 @@
|
||||||
import {Component} from '@angular/core';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @title Native `<table>` that only applies the Material styles
|
|
||||||
*/
|
|
||||||
@Component({
|
|
||||||
selector: 'table-native-only-example',
|
|
||||||
styleUrls: ['table-native-only-example.css'],
|
|
||||||
templateUrl: 'table-native-only-example.html',
|
|
||||||
})
|
|
||||||
export class TableNativeOnlyExample {
|
|
||||||
elements = [
|
|
||||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
|
||||||
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
|
||||||
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
|
||||||
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
|
||||||
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
|
||||||
];
|
|
||||||
}
|
|
|
@ -1,14 +1,5 @@
|
||||||
.example-container {
|
table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
min-width: 300px;
|
|
||||||
max-height: 500px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-header {
|
|
||||||
min-height: 64px;
|
|
||||||
padding: 8px 24px 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-form-field {
|
.mat-form-field {
|
||||||
|
@ -16,3 +7,6 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
|
@ -1,11 +1,8 @@
|
||||||
<div class="example-header">
|
|
||||||
<mat-form-field>
|
<mat-form-field>
|
||||||
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="example-container mat-elevation-z8">
|
|
||||||
|
|
||||||
|
<div class="mat-elevation-z8">
|
||||||
<table mat-table [dataSource]="dataSource" matSort>
|
<table mat-table [dataSource]="dataSource" matSort>
|
||||||
|
|
||||||
<!-- ID Column -->
|
<!-- ID Column -->
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component, ViewChild} from '@angular/core';
|
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||||
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
|
import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -9,7 +9,7 @@ import {MatPaginator, MatSort, MatTableDataSource} from '@angular/material';
|
||||||
styleUrls: ['table-overview-example.css'],
|
styleUrls: ['table-overview-example.css'],
|
||||||
templateUrl: 'table-overview-example.html',
|
templateUrl: 'table-overview-example.html',
|
||||||
})
|
})
|
||||||
export class TableOverviewExample {
|
export class TableOverviewExample implements OnInit {
|
||||||
displayedColumns = ['id', 'name', 'progress', 'color'];
|
displayedColumns = ['id', 'name', 'progress', 'color'];
|
||||||
dataSource: MatTableDataSource<UserData>;
|
dataSource: MatTableDataSource<UserData>;
|
||||||
|
|
||||||
|
@ -34,6 +34,9 @@ export class TableOverviewExample {
|
||||||
filterValue = filterValue.trim(); // Remove whitespace
|
filterValue = filterValue.trim(); // Remove whitespace
|
||||||
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
|
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
|
||||||
this.dataSource.filter = filterValue;
|
this.dataSource.filter = filterValue;
|
||||||
|
if (this.dataSource.paginator) {
|
||||||
|
this.dataSource.paginator.firstPage();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,3 @@
|
||||||
.example-container {
|
table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
min-width: 300px;
|
|
||||||
max-height: 500px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="example-container mat-elevation-z8">
|
<div class="mat-elevation-z8">
|
||||||
<table mat-table #table [dataSource]="dataSource">
|
<table mat-table [dataSource]="dataSource">
|
||||||
|
|
||||||
<!-- Position Column -->
|
<!-- Position Column -->
|
||||||
<ng-container matColumnDef="position">
|
<ng-container matColumnDef="position">
|
||||||
|
@ -29,9 +29,5 @@
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<mat-paginator #paginator
|
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
|
||||||
[pageSize]="10"
|
|
||||||
[pageSizeOptions]="[5, 10, 20]"
|
|
||||||
[showFirstLastButtons]="true">
|
|
||||||
</mat-paginator>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import {Component, ViewChild} from '@angular/core';
|
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||||
import {MatPaginator, MatTableDataSource} from '@angular/material';
|
import {MatPaginator, MatTableDataSource} from '@angular/material';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -9,9 +9,9 @@ import {MatPaginator, MatTableDataSource} from '@angular/material';
|
||||||
styleUrls: ['table-pagination-example.css'],
|
styleUrls: ['table-pagination-example.css'],
|
||||||
templateUrl: 'table-pagination-example.html',
|
templateUrl: 'table-pagination-example.html',
|
||||||
})
|
})
|
||||||
export class TablePaginationExample {
|
export class TablePaginationExample implements OnInit {
|
||||||
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||||
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
|
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
|
||||||
|
|
||||||
@ViewChild(MatPaginator) paginator: MatPaginator;
|
@ViewChild(MatPaginator) paginator: MatPaginator;
|
||||||
|
|
||||||
|
@ -20,14 +20,14 @@ export class TablePaginationExample {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Element {
|
export interface PeriodicElement {
|
||||||
name: string;
|
name: string;
|
||||||
position: number;
|
position: number;
|
||||||
weight: number;
|
weight: number;
|
||||||
symbol: string;
|
symbol: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ELEMENT_DATA: Element[] = [
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
{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'},
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
|
@ -0,0 +1,46 @@
|
||||||
|
<table mat-table [dataSource]="data" class="mat-elevation-z8">
|
||||||
|
<!-- Index Column -->
|
||||||
|
<ng-container matColumnDef="$implicit">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> $implicit </th>
|
||||||
|
<td mat-cell *matCellDef="let data"> {{data}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Index Column -->
|
||||||
|
<ng-container matColumnDef="index">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> index </th>
|
||||||
|
<td mat-cell *matCellDef="let index = index"> {{index}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Index Column -->
|
||||||
|
<ng-container matColumnDef="count">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> count </th>
|
||||||
|
<td mat-cell *matCellDef="let count = count"> {{count}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Index Column -->
|
||||||
|
<ng-container matColumnDef="first">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> first </th>
|
||||||
|
<td mat-cell *matCellDef="let first = first"> {{first}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Index Column -->
|
||||||
|
<ng-container matColumnDef="last">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> last </th>
|
||||||
|
<td mat-cell *matCellDef="let last = last"> {{last}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Index Column -->
|
||||||
|
<ng-container matColumnDef="even">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> even </th>
|
||||||
|
<td mat-cell *matCellDef="let even = even"> {{even}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Index Column -->
|
||||||
|
<ng-container matColumnDef="odd">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> odd </th>
|
||||||
|
<td mat-cell *matCellDef="let odd = odd"> {{odd}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
</table>
|
|
@ -0,0 +1,14 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Table showing each row context properties.
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'table-row-context-example',
|
||||||
|
styleUrls: ['table-row-context-example.css'],
|
||||||
|
templateUrl: 'table-row-context-example.html',
|
||||||
|
})
|
||||||
|
export class TableRowContextExample {
|
||||||
|
displayedColumns = ['$implicit', 'index', 'count', 'first', 'last', 'even', 'odd'];
|
||||||
|
data: string[] = ['one', 'two', 'three', 'four', 'five'];
|
||||||
|
}
|
|
@ -1,11 +1,3 @@
|
||||||
.example-container {
|
table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
max-height: 500px;
|
|
||||||
min-width: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-column-select {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="example-container mat-elevation-z8">
|
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
|
||||||
<table mat-table #table [dataSource]="dataSource">
|
|
||||||
|
|
||||||
<!-- Checkbox Column -->
|
<!-- Checkbox Column -->
|
||||||
<ng-container matColumnDef="select">
|
<ng-container matColumnDef="select">
|
||||||
|
@ -46,4 +45,3 @@
|
||||||
(click)="selection.toggle(row)">
|
(click)="selection.toggle(row)">
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
|
@ -12,8 +12,8 @@ import {SelectionModel} from '@angular/cdk/collections';
|
||||||
})
|
})
|
||||||
export class TableSelectionExample {
|
export class TableSelectionExample {
|
||||||
displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
|
displayedColumns = ['select', 'position', 'name', 'weight', 'symbol'];
|
||||||
dataSource = new MatTableDataSource<Element>(ELEMENT_DATA);
|
dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
|
||||||
selection = new SelectionModel<Element>(true, []);
|
selection = new SelectionModel<PeriodicElement>(true, []);
|
||||||
|
|
||||||
/** Whether the number of selected elements matches the total number of rows. */
|
/** Whether the number of selected elements matches the total number of rows. */
|
||||||
isAllSelected() {
|
isAllSelected() {
|
||||||
|
@ -30,14 +30,14 @@ export class TableSelectionExample {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Element {
|
export interface PeriodicElement {
|
||||||
name: string;
|
name: string;
|
||||||
position: number;
|
position: number;
|
||||||
weight: number;
|
weight: number;
|
||||||
symbol: string;
|
symbol: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ELEMENT_DATA: Element[] = [
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
{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'},
|
||||||
|
@ -48,14 +48,4 @@ const ELEMENT_DATA: Element[] = [
|
||||||
{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: 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'},
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -1,11 +1,7 @@
|
||||||
.example-container {
|
table {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: column;
|
|
||||||
min-width: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
max-height: 500px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-header-cell.mat-sort-header-sorted {
|
th.mat-sort-header-sorted {
|
||||||
color: black;
|
color: black;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="example-container mat-elevation-z8">
|
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
|
||||||
<table mat-table #table [dataSource]="dataSource" matSort>
|
|
||||||
|
|
||||||
<!-- Position Column -->
|
<!-- Position Column -->
|
||||||
<ng-container matColumnDef="position">
|
<ng-container matColumnDef="position">
|
||||||
|
@ -28,4 +27,3 @@
|
||||||
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import {Component, ViewChild} from '@angular/core';
|
import {Component, OnInit, ViewChild} from '@angular/core';
|
||||||
import {MatTableDataSource, MatSort} from '@angular/material';
|
import {MatSort, MatTableDataSource} from '@angular/material';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @title Table with sorting
|
* @title Table with sorting
|
||||||
|
@ -9,7 +9,7 @@ import {MatTableDataSource, MatSort} from '@angular/material';
|
||||||
styleUrls: ['table-sorting-example.css'],
|
styleUrls: ['table-sorting-example.css'],
|
||||||
templateUrl: 'table-sorting-example.html',
|
templateUrl: 'table-sorting-example.html',
|
||||||
})
|
})
|
||||||
export class TableSortingExample {
|
export class TableSortingExample implements OnInit {
|
||||||
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
displayedColumns = ['position', 'name', 'weight', 'symbol'];
|
||||||
dataSource = new MatTableDataSource(ELEMENT_DATA);
|
dataSource = new MatTableDataSource(ELEMENT_DATA);
|
||||||
|
|
||||||
|
@ -20,14 +20,14 @@ export class TableSortingExample {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface Element {
|
export interface PeriodicElement {
|
||||||
name: string;
|
name: string;
|
||||||
position: number;
|
position: number;
|
||||||
weight: number;
|
weight: number;
|
||||||
symbol: string;
|
symbol: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const ELEMENT_DATA: Element[] = [
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
{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'},
|
||||||
|
@ -38,14 +38,4 @@ const ELEMENT_DATA: Element[] = [
|
||||||
{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: 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'},
|
|
||||||
];
|
];
|
||||||
|
|
|
@ -0,0 +1,26 @@
|
||||||
|
.example-container {
|
||||||
|
height: 400px;
|
||||||
|
width: 550px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td.mat-column-star {
|
||||||
|
width: 20px;
|
||||||
|
padding-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
th.mat-column-position, td.mat-column-position {
|
||||||
|
padding-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-table-sticky:first-child {
|
||||||
|
border-right: 1px solid #e0e0e0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-table-sticky:last-child {
|
||||||
|
border-left: 1px solid #e0e0e0;
|
||||||
|
}
|
|
@ -0,0 +1,39 @@
|
||||||
|
<div class="example-container mat-elevation-z8">
|
||||||
|
<table mat-table [dataSource]="dataSource">
|
||||||
|
|
||||||
|
<!-- Name Column -->
|
||||||
|
<ng-container matColumnDef="name" sticky>
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Name </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Position Column -->
|
||||||
|
<ng-container matColumnDef="position">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> No. </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Weight Column -->
|
||||||
|
<ng-container matColumnDef="weight">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Weight </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.weight}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Symbol Column -->
|
||||||
|
<ng-container matColumnDef="symbol">
|
||||||
|
<th mat-header-cell *matHeaderCellDef> Symbol </th>
|
||||||
|
<td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<!-- Star Column -->
|
||||||
|
<ng-container matColumnDef="star" stickyEnd>
|
||||||
|
<th mat-header-cell *matHeaderCellDef></th>
|
||||||
|
<td mat-cell *matCellDef="let element">
|
||||||
|
<mat-icon>more_vert</mat-icon>
|
||||||
|
</td>
|
||||||
|
</ng-container>
|
||||||
|
|
||||||
|
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
|
||||||
|
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
|
@ -0,0 +1,35 @@
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @title Table with a sticky columns
|
||||||
|
*/
|
||||||
|
@Component({
|
||||||
|
selector: 'table-sticky-columns-example',
|
||||||
|
styleUrls: ['table-sticky-columns-example.css'],
|
||||||
|
templateUrl: 'table-sticky-columns-example.html',
|
||||||
|
})
|
||||||
|
export class TableStickyColumnsExample {
|
||||||
|
displayedColumns =
|
||||||
|
['name', 'position', 'weight', 'symbol', 'position', 'weight', 'symbol', 'star'];
|
||||||
|
dataSource = ELEMENT_DATA;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PeriodicElement {
|
||||||
|
name: string;
|
||||||
|
position: number;
|
||||||
|
weight: number;
|
||||||
|
symbol: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ELEMENT_DATA: PeriodicElement[] = [
|
||||||
|
{position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
|
||||||
|
{position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
|
||||||
|
{position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
|
||||||
|
{position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
|
||||||
|
{position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
|
||||||
|
{position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
|
||||||
|
{position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
|
||||||
|
{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'},
|
||||||
|
];
|
|
@ -0,0 +1,28 @@
|
||||||
|
.example-container {
|
||||||
|
height: 400px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-table-sticky {
|
||||||
|
background: #59abfd;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.example-sticky-toggle-group {
|
||||||
|
margin: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-column-filler {
|
||||||
|
padding: 0 8px;
|
||||||
|
font-size: 10px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-header-cell, .mat-footer-cell, .mat-cell {
|
||||||
|
min-width: 80px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mat-header-row, .mat-footer-row, .mat-row {
|
||||||
|
min-width: 1920px; /* 24 columns, 80px each */
|
||||||
|
}
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user