purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-09 20:15:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added new Angular Material examples

Browse Source
This commit is contained in:
sercan 2019-05-30 11:37:35 +03:00
parent 7ec117202d
commit bb3764aaff
17 changed files with 227 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/app/main/angular-material-elements/example-components.ts
View File

@ -173,6 +173,11 @@ import { StepperErrorsExample } from 'assets/angular-material-examples/stepper-e
import { TabGroupAlignExample } from 'assets/angular-material-examples/tab-group-align/tab-group-align-example';
import { SimpleColumn, TableSimpleColumnExample } from 'assets/angular-material-examples/table-simple-column/table-simple-column-example';
import { TableWrappedExample, WrapperTable } from 'assets/angular-material-examples/table-wrapped/table-wrapped-example';
import { PlainInputAutocompleteExample } from 'assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example';
import { ChipsDragDropExample } from 'assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example';
import { DatepickerDateClassExample } from 'assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example';
import { MenuPositionExample } from 'assets/angular-material-examples/menu-position/menu-position-example';
import { TabGroupAnimationsExample } from 'assets/angular-material-examples/tab-group-animations/tab-group-animations-example';
export const COMPONENT_MAP = {
'autocomplete' : [
@ -181,7 +186,8 @@ export const COMPONENT_MAP = {
'autocomplete-display',
'autocomplete-filter',
'autocomplete-optgroup',
'autocomplete-simple'
'autocomplete-simple',
'autocomplete-plain-input'
],
'badge' : [
'badge-overview'
@ -209,6 +215,7 @@ export const COMPONENT_MAP = {
'chips' : [
'chips-overview',
'chips-autocomplete',
// 'chips-drag-and-drop',
'chips-input',
'chips-stacked'
],
@ -218,6 +225,7 @@ export const COMPONENT_MAP = {
'datepicker-color',
'datepicker-custom-header',
'datepicker-custom-icon',
'datepicker-date-class',
'datepicker-disabled',
'datepicker-events',
'datepicker-filter',
@ -286,6 +294,7 @@ export const COMPONENT_MAP = {
],
'menu' : [
'menu-overview',
'menu-position',
'menu-icons',
'nested-menu'
],
@ -389,6 +398,7 @@ export const COMPONENT_MAP = {
'tab-group-basic',
'tab-group-async',
'tab-group-align',
'tab-group-animations',
'tab-group-custom-label',
'tab-group-dynamic',
'tab-group-dynamic-height',
@ -448,6 +458,10 @@ export const EXAMPLE_COMPONENTS = {
title : 'Autocomplete overview',
component: AutocompleteOverviewExample
},
'autocomplete-plain-input' : {
title : 'Plain input autocomplete',
component: PlainInputAutocompleteExample
},
'autocomplete-simple' : {
title : 'Simple autocomplete',
component: AutocompleteSimpleExample
@ -502,6 +516,10 @@ export const EXAMPLE_COMPONENTS = {
title : 'Chips Autocomplete',
component: ChipsAutocompleteExample
},
'chips-drag-and-drop' : {
title : 'Chips Drag and Drop',
component: ChipsDragDropExample
},
'chips-input' : {
title : 'Chips with input',
component: ChipsInputExample
@ -531,6 +549,10 @@ export const EXAMPLE_COMPONENTS = {
title : 'Datepicker with custom icon',
component: DatepickerCustomIconExample
},
'datepicker-date-class' : {
title : 'Datepicker with custom date classes',
component: DatepickerDateClassExample
},
'datepicker-disabled' : {
title : 'Disabled datepicker',
component: DatepickerDisabledExample
@ -733,6 +755,10 @@ export const EXAMPLE_COMPONENTS = {
title : 'Basic menu',
component: MenuOverviewExample
},
'menu-position' : {
title : 'Menu positioning',
component: MenuPositionExample
},
'nested-menu' : {
title : 'Nested menu',
component: NestedMenuExample
@ -1027,6 +1053,10 @@ export const EXAMPLE_COMPONENTS = {
title : 'Tab group with aligned labels',
component: TabGroupAlignExample
},
'tab-group-animations' : {
title : 'Tab group animations',
component: TabGroupAnimationsExample
},
'tab-group-basic' : {
title : 'Basic use of the tab group',
component: TabGroupBasicExample
@ -1152,6 +1182,7 @@ export const EXAMPLE_LIST = [
AutocompleteOptgroupExample,
AutocompleteOverviewExample,
AutocompleteSimpleExample,
PlainInputAutocompleteExample,
BadgeOverviewExample,
BottomSheetOverviewExample, BottomSheetOverviewExampleSheet,
ButtonOverviewExample,
@ -1164,6 +1195,7 @@ export const EXAMPLE_LIST = [
CheckboxConfigurableExample,
CheckboxOverviewExample,
ChipsAutocompleteExample,
ChipsDragDropExample,
ChipsInputExample,
ChipsOverviewExample,
ChipsStackedExample,
@ -1171,6 +1203,7 @@ export const EXAMPLE_LIST = [
DatepickerColorExample,
DatepickerCustomHeaderExample, ExampleHeader,
DatepickerCustomIconExample,
DatepickerDateClassExample,
DatepickerDisabledExample,
DatepickerEventsExample,
DatepickerFilterExample,
@ -1219,6 +1252,7 @@ export const EXAMPLE_LIST = [
ListSelectionExample,
MenuIconsExample,
MenuOverviewExample,
MenuPositionExample,
NestedMenuExample,
PaginatorConfigurableExample,
PaginatorOverviewExample,
@ -1292,6 +1326,7 @@ export const EXAMPLE_LIST = [
TableStickyHeaderExample,
TableWrappedExample, WrapperTable,
TabGroupAlignExample,
TabGroupAnimationsExample,
TabGroupBasicExample,
TabGroupAsyncExample,
TabGroupCustomLabelExample,

9
src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.css Executable file
View File

@ -0,0 +1,9 @@
.example-form {
min-width: 150px;
max-width: 500px;
width: 100%;
}
.example-full-width {
width: 100%;
}

8
src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.html Executable file
View File

@ -0,0 +1,8 @@
<form class="example-form">
<input type="text" placeholder="Search for a street" [formControl]="control" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let street of filteredStreets | async" [value]="street">
{{street}}
</mat-option>
</mat-autocomplete>
</form>

34
src/assets/angular-material-examples/autocomplete-plain-input/autocomplete-plain-input-example.ts Executable file
View File

@ -0,0 +1,34 @@
import {Component, OnInit} from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable} from 'rxjs';
import {startWith, map} from 'rxjs/operators';
/**
* @title Plain input autocomplete
*/
@Component({
selector: 'autocomplete-plain-input-example',
templateUrl: 'autocomplete-plain-input-example.html',
styleUrls: ['autocomplete-plain-input-example.css'],
})
export class PlainInputAutocompleteExample implements OnInit {
control = new FormControl();
streets: string[] = ['Champs-Élysées', 'Lombard Street', 'Abbey Road', 'Fifth Avenue'];
filteredStreets: Observable<string[]>;
ngOnInit() {
this.filteredStreets = this.control.valueChanges.pipe(
startWith(''),
map(value => this._filter(value))
);
}
private _filter(value: string): string[] {
const filterValue = this._normalizeValue(value);
return this.streets.filter(street => this._normalizeValue(street).includes(filterValue));
}
private _normalizeValue(value: string): string {
return value.toLowerCase().replace(/\s/g, '');
}
}

7
src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.css Executable file
View File

@ -0,0 +1,7 @@
.example-box.cdk-drag-animating {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
.example-chip .cdk-drop-list-dragging {
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

12
src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.html Executable file
View File

@ -0,0 +1,12 @@
<mat-chip-list
class="example-chip"
cdkDropList
cdkDropListOrientation="horizontal"
(cdkDropListDropped)="drop($event)">
<mat-chip
class="example-box"
cdkDrag
*ngFor="let vegetable of vegetables">
{{vegetable.name}}
</mat-chip>
</mat-chip-list>

29
src/assets/angular-material-examples/chips-drag-and-drop/chips-drag-and-drop-example.ts Executable file
View File

@ -0,0 +1,29 @@
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
import {Component} from '@angular/core';
export interface Vegetable {
name: string;
}
/**
* @title Chips Drag and Drop
*/
@Component({
selector: 'chips-drag-drop-example',
templateUrl: 'chips-drag-and-drop-example.html',
styleUrls: ['chips-drag-and-drop-example.css']
})
export class ChipsDragDropExample {
vegetables: Vegetable[] = [
{name: 'apple'},
{name: 'banana'},
{name: 'strawberry'},
{name: 'orange'},
{name: 'kiwi'},
{name: 'cherry'},
];
drop(event: CdkDragDrop<Vegetable[]>) {
moveItemInArray(this.vegetables, event.previousIndex, event.currentIndex);
}
}

4
src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.css Executable file
View File

@ -0,0 +1,4 @@
.example-custom-date-class {
background: orange;
border-radius: 100%;
}

5
src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.html Executable file
View File

@ -0,0 +1,5 @@
<mat-form-field class="example-full-width">
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
</mat-form-field>

18
src/assets/angular-material-examples/datepicker-date-class/datepicker-date-class-example.ts Executable file
View File

@ -0,0 +1,18 @@
import {Component, ViewEncapsulation} from '@angular/core';
/** @title Datepicker with custom date classes */
@Component({
selector: 'datepicker-date-class-example',
templateUrl: 'datepicker-date-class-example.html',
styleUrls: ['datepicker-date-class-example.css'],
encapsulation: ViewEncapsulation.None,
})
export class DatepickerDateClassExample {
dateClass = (d: Date) => {
const date = d.date();
// Highlight the 1st and 20th day of each month.
return (date === 1 || date === 20) ? 'example-custom-date-class' : undefined;
}
}

1
src/assets/angular-material-examples/menu-position/menu-position-example.css Executable file
View File

@ -0,0 +1 @@
/** No CSS for this example */

24
src/assets/angular-material-examples/menu-position/menu-position-example.html Executable file
View File

@ -0,0 +1,24 @@
<button mat-button [matMenuTriggerFor]="aboveMenu">Above</button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="belowMenu">Below</button>
<mat-menu #belowMenu="matMenu" yPosition="below">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="beforeMenu">Before</button>
<mat-menu #beforeMenu="matMenu" xPosition="before">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button [matMenuTriggerFor]="afterMenu">After</button>
<mat-menu #afterMenu="matMenu" xPosition="after">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>

11
src/assets/angular-material-examples/menu-position/menu-position-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Menu positioning
*/
@Component({
selector: 'menu-position-example',
templateUrl: 'menu-position-example.html',
styleUrls: ['menu-position-example.css'],
})
export class MenuPositionExample {}

3
src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.css Executable file
View File

@ -0,0 +1,3 @@
.mat-tab-group {
margin-bottom: 48px;
}

14
src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.html Executable file
View File

@ -0,0 +1,14 @@
<h3>No animation</h3>
<mat-tab-group animationDuration="0ms">
<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>
<h3>Very slow animation</h3>
<mat-tab-group animationDuration="2000ms">
<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>

11
src/assets/angular-material-examples/tab-group-animations/tab-group-animations-example.ts Executable file
View File

@ -0,0 +1,11 @@
import {Component} from '@angular/core';
/**
* @title Tab group animations
*/
@Component({
selector: 'tab-group-animations-example',
templateUrl: 'tab-group-animations-example.html',
styleUrls: ['tab-group-animations-example.css'],
})
export class TabGroupAnimationsExample {}

2
src/assets/angular-material-examples/tooltip-manual/tooltip-manual-example.html
View File

@ -25,4 +25,4 @@
matTooltipPosition="right"
aria-tooltip="Button that displays and hides a tooltip triggered by other buttons">
Action
</button>
</button>