mirror of
https://github.com/zhigang1992/DefinitelyTyped.git
synced 2026-04-24 05:06:02 +08:00
Angular Material type definitions
This commit is contained in:
Matt Traynham
96
angular-material/angular-material-tests.ts
Normal file
96
angular-material/angular-material-tests.ts
Normal file
@@ -0,0 +1,96 @@
|
||||
/// <reference path="angular-material.d.ts" />
|
||||
|
||||
var myApp = angular.module('testModule', ['ngMaterial']);
|
||||
|
||||
myApp.config((
|
||||
$mdThemingProvider: ng.material.MDThemingProvider,
|
||||
$mdIconProvider: ng.material.MDIconProvider) => {
|
||||
|
||||
$mdThemingProvider.alwaysWatchTheme(true);
|
||||
var neonRedMap: ng.material.MDPalette = $mdThemingProvider.extendPalette('red', {
|
||||
'500': 'ff0000'
|
||||
});
|
||||
// Register the new color palette map with the name <code>neonRed</code>
|
||||
$mdThemingProvider.definePalette('neonRed', neonRedMap);
|
||||
// Use that theme for the primary intentions
|
||||
$mdThemingProvider.theme('default')
|
||||
.primaryPalette('neonRed')
|
||||
.accentPalette('blue')
|
||||
.backgroundPalette('grey')
|
||||
.warnPalette('red')
|
||||
.dark(true);
|
||||
|
||||
$mdIconProvider
|
||||
.defaultIconSet('my/app/icons.svg') // Register a default set of SVG icons
|
||||
.iconSet('social', 'my/app/social.svg') // Register a named icon set of SVGs
|
||||
.icon('android', 'my/app/android.svg') // Register a specific icon (by name)
|
||||
.icon('work:chair', 'my/app/chair.svg'); // Register icon in a specific set
|
||||
});
|
||||
|
||||
app.controller('BottomSheetController', ($scope: ng.IScope, $mdBottomSheet: ng.material.MDBottomSheetService) => {
|
||||
$scope['openBottomSheet'] = () => {
|
||||
$mdBottomSheet.show({
|
||||
template: '<md-bottom-sheet>Hello!</md-bottom-sheet>'
|
||||
});
|
||||
};
|
||||
$scope['hideBottomSheet'] = $mdBottomSheet.hide.bind($mdBottomSheet, 'hide');
|
||||
$scope['cancelBottomSheet'] = $mdBottomSheet.cancel.bind($mdBottomSheet, 'cancel');
|
||||
});
|
||||
|
||||
app.controller('DialogController', ($scope: ng.IScope, $mdDialog: ng.material.MDDialogService) => {
|
||||
$scope['openDialog'] = () => {
|
||||
$mdDialog.show({
|
||||
template: '<md-dialog>Hello!</md-dialog>'
|
||||
});
|
||||
};
|
||||
$scope['alertDialog'] = () => {
|
||||
$mdDialog.show($mdDialog.alert().content('Alert!'));
|
||||
};
|
||||
$scope['confirmDialog'] = () => {
|
||||
$mdDialog.show($mdDialog.confirm().content('Confirm!'));
|
||||
};
|
||||
$scope['hideDialog'] = $mdDialog.hide.bind($mdDialog, 'hide');
|
||||
$scope['cancelDialog'] = $mdDialog.cancel.bind($mdDialog, 'cancel');
|
||||
});
|
||||
|
||||
class IconDirective implements ng.IDirective {
|
||||
|
||||
private $mdIcon: ng.material.MDIcon;
|
||||
constructor($mdIcon: ng.material.MDIcon) {
|
||||
this.$mdIcon = $mdIcon;
|
||||
}
|
||||
|
||||
public link($scope: ng.IScope, $elm: ng.IAugmentedJQuery) {
|
||||
this.$mdIcon('android').then((iconEl: Element) => $elm.append(iconEl));
|
||||
this.$mdIcon('work:chair').then((iconEl: Element) => $elm.append(iconEl));
|
||||
// Load and cache the external SVG using a URL
|
||||
this.$mdIcon('img/icons/android.svg').then((iconEl: Element) => {
|
||||
$elm.append(iconEl);
|
||||
});
|
||||
}
|
||||
}
|
||||
myApp.directive('icon-directive', ($mdIcon: ng.material.MDIcon) => new IconDirective($mdIcon));
|
||||
|
||||
app.controller('MediaController', ($scope: ng.IScope, $mdMedia: ng.material.MDMedia) => {
|
||||
$scope.$watch(() => $mdMedia('lg'), (big: boolean) => {
|
||||
$scope['bigScreen'] = big;
|
||||
});
|
||||
$scope['screenIsSmall'] = $mdMedia('sm');
|
||||
$scope['customQuery'] = $mdMedia('(min-width: 1234px)');
|
||||
$scope['anotherCustom'] = $mdMedia('max-width: 300px');
|
||||
});
|
||||
|
||||
app.controller('SidenavController', ($scope: ng.IScope, $mdSidenav: ng.material.MDSidenavService) => {
|
||||
var componentId = 'left';
|
||||
$scope['toggle'] = () => $mdSidenav(componentId).toggle();
|
||||
$scope['open'] = () => $mdSidenav(componentId).open();
|
||||
$scope['close'] = () => $mdSidenav(componentId).close();
|
||||
$scope['isOpen'] = $mdSidenav(componentId).isOpen();
|
||||
$scope['isLockedOpen'] = $mdSidenav(componentId).isLockedOpen();
|
||||
});
|
||||
|
||||
app.controller('ToastController', ($scope: ng.IScope, $mdToast: ng.material.MDToastService) => {
|
||||
$scope['openToast'] = function($event) {
|
||||
$mdToast.show($mdToast.simple().content('Hello!'));
|
||||
};
|
||||
});
|
||||
195
angular-material/angular-material.d.ts
vendored
Normal file
195
angular-material/angular-material.d.ts
vendored
Normal file
@@ -0,0 +1,195 @@
|
||||
// Type definitions for Angular Material 0.8.3+ (ng.material module)
|
||||
// Project: https://github.com/angular/material
|
||||
// Definitions by: Matt Traynham <https://github.com/mtraynham>
|
||||
// Definitions: https://github.com/borisyankov/DefinitelyTyped
|
||||
|
||||
/// <reference path="../angularjs/angular.d.ts" />
|
||||
declare module ng.material {
|
||||
|
||||
interface MDBottomSheetOptions {
|
||||
templateUrl?: string;
|
||||
template?: string;
|
||||
controller?: any;
|
||||
locals?: {[index: string]: any};
|
||||
targetEvent?: any;
|
||||
resolve?: {[index: string]: ng.IPromise<any>}
|
||||
controllerAs?: string;
|
||||
parent?: Element;
|
||||
disableParentScroll?: boolean;
|
||||
}
|
||||
|
||||
interface MDBottomSheetService {
|
||||
show(options: MDBottomSheetOptions): ng.IPromise<any>;
|
||||
hide(response?: any): void;
|
||||
cancel(response?: any): void;
|
||||
}
|
||||
|
||||
interface MDPresetDialog<T> {
|
||||
title(title: string): T;
|
||||
content(content: string): T;
|
||||
ok(content: string): T;
|
||||
theme(theme: string): T;
|
||||
}
|
||||
|
||||
interface MDAlertDialog extends MDPresetDialog<MDAlertDialog> {
|
||||
}
|
||||
|
||||
interface MDConfirmDialog extends MDPresetDialog<MDConfirmDialog> {
|
||||
cancel(reason?: string): MDConfirmDialog;
|
||||
}
|
||||
|
||||
interface MDDialogOptions {
|
||||
templateUrl?: string;
|
||||
template?: string;
|
||||
domClickEvent?: any;
|
||||
disableParentScroll?: boolean;
|
||||
clickOutsideToClose?: boolean;
|
||||
hasBackdrop?: boolean;
|
||||
escapeToClose?: boolean;
|
||||
controller?: any;
|
||||
locals?: {[index: string]: any};
|
||||
bindToController?: boolean;
|
||||
resolve?: {[index: string]: ng.IPromise<any>}
|
||||
controllerAs?: string;
|
||||
parent?: Element;
|
||||
onComplete?: Function;
|
||||
}
|
||||
|
||||
interface MDDialogService {
|
||||
show(dialog: MDDialogOptions|MDPresetDialog<any>): ng.IPromise<any>;
|
||||
confirm(): MDConfirmDialog;
|
||||
alert(): MDAlertDialog;
|
||||
hide(response?: any): void;
|
||||
cancel(response?: any): void;
|
||||
}
|
||||
|
||||
interface MDIcon {
|
||||
(path: string): ng.IPromise<Element>;
|
||||
}
|
||||
|
||||
interface MDIconProvider {
|
||||
icon(id: string, url: string, iconSize?: string): MDIconProvider;
|
||||
iconSet(id: string, url: string, iconSize?: string): MDIconProvider;
|
||||
defaultIconSet(url: string, iconSize?: string): MDIconProvider;
|
||||
defaultIconSize(iconSize: string): MDIconProvider;
|
||||
}
|
||||
|
||||
interface MDMedia {
|
||||
(media: string): boolean;
|
||||
}
|
||||
|
||||
interface MDSidenavObject {
|
||||
toggle(): void;
|
||||
open(): void;
|
||||
close(): void;
|
||||
isOpen(): boolean;
|
||||
isLockedOpen(): boolean;
|
||||
}
|
||||
|
||||
interface MDSidenavService {
|
||||
(component: string): MDSidenavObject;
|
||||
}
|
||||
|
||||
interface MDToastPreset<T> {
|
||||
content(content: string): T;
|
||||
action(action: string): T;
|
||||
highlightAction(highlightAction: boolean): T;
|
||||
capsule(capsule: boolean): T;
|
||||
theme(theme: string): T;
|
||||
hideDelay(delay: number): T;
|
||||
}
|
||||
|
||||
interface MDSimpleToastPreset extends MDToastPreset<MDSimpleToastPreset> {
|
||||
}
|
||||
|
||||
interface MDToastOptions {
|
||||
templateUrl?: string;
|
||||
template?: string;
|
||||
hideDelay?: number;
|
||||
position?: string;
|
||||
controller?: any;
|
||||
locals?: {[index: string]: any};
|
||||
bindToController?: boolean;
|
||||
resolve?: {[index: string]: ng.IPromise<any>}
|
||||
controllerAs?: string;
|
||||
parent?: Element;
|
||||
}
|
||||
|
||||
interface MDToastService {
|
||||
show(optionsOrPreset: MDToastOptions|MDToastPreset<any>): ng.IPromise<any>;
|
||||
showSimple(): ng.IPromise<any>;
|
||||
simple(): MDSimpleToastPreset;
|
||||
build(): MDToastPreset<any>;
|
||||
updateContent(): void;
|
||||
hide(response?: any): void;
|
||||
cancel(response?: any): void;
|
||||
}
|
||||
|
||||
interface MDPalette {
|
||||
0?: string;
|
||||
50?: string;
|
||||
100?: string;
|
||||
200?: string;
|
||||
300?: string;
|
||||
400?: string;
|
||||
500?: string;
|
||||
600?: string;
|
||||
700?: string;
|
||||
800?: string;
|
||||
900?: string;
|
||||
A100?: string;
|
||||
A200?: string;
|
||||
A400?: string;
|
||||
A700?: string;
|
||||
contrastDefaultColor?: string;
|
||||
contrastDarkColors?: string;
|
||||
contrastStrongLightColors?: string;
|
||||
}
|
||||
|
||||
interface MDThemeHues {
|
||||
default?: string;
|
||||
'hue-1'?: string;
|
||||
'hue-2'?: string;
|
||||
'hue-3'?: string;
|
||||
}
|
||||
|
||||
interface MDThemePalette {
|
||||
name: string;
|
||||
hues: MDThemeHues;
|
||||
}
|
||||
|
||||
interface MDThemeColors {
|
||||
accent: MDThemePalette;
|
||||
background: MDThemePalette;
|
||||
primary: MDThemePalette;
|
||||
warn: MDThemePalette;
|
||||
}
|
||||
|
||||
interface MDThemeGrayScalePalette {
|
||||
1: string;
|
||||
2: string;
|
||||
3: string;
|
||||
4: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface MDTheme {
|
||||
name: string;
|
||||
colors: MDThemeColors;
|
||||
foregroundPalette: MDThemeGrayScalePalette;
|
||||
foregroundShadow: string;
|
||||
accentPalette(name: string, hues?: MDThemeHues): MDTheme;
|
||||
primaryPalette(name: string, hues?: MDThemeHues): MDTheme;
|
||||
warnPalette(name: string, hues?: MDThemeHues): MDTheme;
|
||||
backgroundPalette(name: string, hues?: MDThemeHues): MDTheme;
|
||||
dark(isDark?: boolean): MDTheme;
|
||||
}
|
||||
|
||||
interface MDThemingProvider {
|
||||
theme(name: string, inheritFrom?: string): MDTheme;
|
||||
definePalette(name: string, palette: MDPalette): MDThemingProvider;
|
||||
extendPalette(name: string, palette: MDPalette): MDPalette;
|
||||
setDefaultTheme(theme: string): void;
|
||||
alwaysWatchTheme(alwaysWatch: boolean): void;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user