mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs: Rename and update overview and readme files (#2614)
This commit is contained in:
Raven Avalon
@@ -7,7 +7,7 @@
|
||||
# Use OVERVIEW.html when possible. If there's no OVERVIEW file exists, use README.html
|
||||
|
||||
usage='Usage: copy-docs.sh $destinationFolder'
|
||||
if [ $# -ne 1 ]; then
|
||||
if [ $# -ne 1 ]; then
|
||||
echo "Missing destination folder. $usage"
|
||||
exit
|
||||
fi
|
||||
@@ -23,7 +23,7 @@ fi
|
||||
for file in $originFolder*
|
||||
do
|
||||
name=${file#$originFolder}
|
||||
overviewFile=$originFolder$name/OVERVIEW.html
|
||||
overviewFile=$originFolder$name/$name.html
|
||||
readmeFile=$originFolder$name/README.html
|
||||
destFile=$destFolder/$name.html
|
||||
if [ -f $overviewFile ]; then
|
||||
|
||||
@@ -1,139 +1 @@
|
||||
# md-button-toggle
|
||||
|
||||
`MdButtonToggle` is a group of buttons that can be toggled.
|
||||
There are two modes, `multiple` and `exclusive`.
|
||||
When in 'exclusive' mode, only one button can be selected at a time (like radio buttons).
|
||||
When in 'multiple' mode, multiple buttons can be selected at once (like checkboxes).
|
||||
You can read more about button toggles in the
|
||||
[Material Design spec](https://material.google.com/components/buttons.html#buttons-toggle-buttons).
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
`md-button-toggle` can be used on its own and acts as a checkbox.
|
||||
|
||||
```html
|
||||
<md-button-toggle>Bold</md-button-toggle>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
|
||||
|
||||
### Exclusive Selection
|
||||
|
||||
`md-button-toggle` can be used in an exclusive selection group when surrounded by
|
||||
`md-button-toggle-group`. This styles all buttons within the group to appear as a single
|
||||
group of button toggles and allows only one button toggle to be selected at a time.
|
||||
|
||||
```html
|
||||
<md-button-toggle-group name="alignment">
|
||||
<md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle>
|
||||
<md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle>
|
||||
<md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle>
|
||||
<md-button-toggle value="justify"><md-icon>format_align_justify</md-icon></md-button-toggle>
|
||||
</md-button-toggle-group>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
|
||||
|
||||
### Multiple Selection
|
||||
|
||||
`md-button-toggle` can be used in a multiple selection group when surrounded by
|
||||
`md-button-toggle-group multiple`. This styles all buttons within the group to appear as a single
|
||||
group of button toggles. This component does not yet support `NgModel` when using `multiple` mode.
|
||||
|
||||
```html
|
||||
<md-button-toggle-group multiple>
|
||||
<md-button-toggle>Flour</md-button-toggle>
|
||||
<md-button-toggle>Eggs</md-button-toggle>
|
||||
<md-button-toggle>Sugar</md-button-toggle>
|
||||
<md-button-toggle>Milk</md-button-toggle>
|
||||
</md-button-toggle-group>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
|
||||
|
||||
## Dynamic Exclusive Selection
|
||||
|
||||
`md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for
|
||||
a group.
|
||||
|
||||
```html
|
||||
<md-button-toggle-group name="pies" [(ngModel)]="favoritePie">
|
||||
<md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
|
||||
{{pie}}
|
||||
</md-button-toggle>
|
||||
</md-button-toggle-group>
|
||||
<p>Your favorite type of pie is: {{favoritePie}}</p>
|
||||
```
|
||||
|
||||
### Disabled Button Toggle
|
||||
|
||||
`md-button-toggle-group` and `md-button-toggle` can both be disabled by adding a `disabled`
|
||||
attribute to either one. Adding `disabled` to an exclusive group or a multiple group will disable
|
||||
the entire group. Adding `disabled` to a single toggle will disable that toggle.
|
||||
|
||||
```html
|
||||
<md-button-toggle-group disabled>
|
||||
<md-button-toggle value="one">One</md-button-toggle>
|
||||
<md-button-toggle value="two">Two</md-button-toggle>
|
||||
<md-button-toggle value="three">Three</md-button-toggle>
|
||||
</md-button-toggle-group>
|
||||
|
||||
<md-button-toggle-group>
|
||||
<md-button-toggle value="red" disabled>Red</md-button-toggle>
|
||||
<md-button-toggle value="blue">Blue</md-button-toggle>
|
||||
</md-button-toggle-group>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
|
||||
|
||||
## `<md-button-toggle>`
|
||||
|
||||
### Bound Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `id` | string | The unique ID of the toggle. IDs are generated by default when not specified. |
|
||||
| `name` | string | Optional, defaults to parent group name if one exists for exclusive selection toggles, otherwise null. This is used to differentiate between different groups. |
|
||||
| `value` | any | Value of the toggle. Only used when in a group to determine which are selected. |
|
||||
| `checked` | boolean | Optional, default = `false`. Whether or not the toggle is checked. |
|
||||
| `disabled` | boolean | Optional, default = `false`. Whether or not the toggle is disabled |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `change` | Emitted when the `checked` value is changed. |
|
||||
|
||||
## `<md-button-toggle-group>`
|
||||
|
||||
### Bound Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `name` | string | Optional, the name of the group. |
|
||||
| `disabled` | boolean | Optional, default = `false`. |
|
||||
| `value` | any | The current value for the group. Will be set to the value of the selected toggle or a list of values from the selected toggles. |
|
||||
| `selected` | `mdButtonToggle` | The current selected toggle or a list of the selected toggles. |
|
||||
| `vertical` | boolean | Whether the group should show the toggles vertically. Default is `false`. |
|
||||
|
||||
### Attributes
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `multiple` | boolean | Optional, default = `false`. Whether or not the group allows multiple selection. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `change` | Emitted when the `value` of the group changes. |
|
||||
Please see the official documentation at https://material.angular.io/components/component/button-toggle
|
||||
+1
-116
@@ -1,116 +1 @@
|
||||
# md-button
|
||||
|
||||
`md-button` is an HTML `<button>` or `<a>` tag enhanced with styling and animation to match the
|
||||
[Material Design button spec](https://www.google.com/design/spec/components/buttons.html).
|
||||
|
||||
Users should employ a button element (`<button>`) when clicking triggers some action in the current
|
||||
view *without navigating*. An anchor element (`<a>`) should be used when clicking *navigates*
|
||||
the user to another URL. Depending on which element is used, the component will either be an
|
||||
instance of `MdButton` or `MdAnchor`. Visually, the two are identical.
|
||||
|
||||
|
||||
### Button types
|
||||
|
||||
There are five types of buttons:
|
||||
1. Flat buttons - `md-button`
|
||||
* Rectangular button
|
||||
* Defaults to white background
|
||||
* No box shadow
|
||||
2. Raised buttons - `md-raised-button`
|
||||
* Rectangular button
|
||||
* Defaults to white background
|
||||
* Box shadow applied
|
||||
3. Icon buttons - `md-icon-button`
|
||||
* Circular button
|
||||
* Transparent background
|
||||
* 40 by 40 px
|
||||
4. Floating Action Buttons (FABs) - `md-fab`
|
||||
* Circular button
|
||||
* Defaults background to "accent" palette defined in theme
|
||||
* Box shadow applied
|
||||
* 56 by 56 px
|
||||
5. Mini Floating Action Buttons (Mini FABs) - `md-mini-fab`
|
||||
* Circular button
|
||||
* Defaults background to "accent" palette defined in theme
|
||||
* Box shadow applied
|
||||
* 40 by 40 px
|
||||
|
||||
Each is an attribute directive that you can add to a `button` or `a` tag. You can provide custom content to the button by inserting it
|
||||
between the tags, as you would with a normal button.
|
||||
|
||||
Example:
|
||||
|
||||
<!-- example(my example) -->
|
||||
|
||||
```html
|
||||
<button md-button>FLAT</button>
|
||||
<button md-raised-button>RAISED</button>
|
||||
<button md-fab>
|
||||
<md-icon class="md-24">add</md-icon>
|
||||
</button>
|
||||
<button md-mini-fab>
|
||||
<md-icon class="md-24">add</md-icon>
|
||||
</button>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/buttons/basic-buttons.png">
|
||||
|
||||
### Theming
|
||||
|
||||
All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
|
||||
Simply pass in the palette name.
|
||||
|
||||
In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.
|
||||
|
||||
Example:
|
||||
|
||||
<!-- example(my other example) -->
|
||||
|
||||
```html
|
||||
<button md-raised-button color="primary">PRIMARY</button>
|
||||
<button md-raised-button color="accent">ACCENT</button>
|
||||
<button md-raised-button color="warn">WARN</button>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/buttons/colored-buttons.png">
|
||||
|
||||
### Disabling
|
||||
|
||||
You can disable any button type through the native `disabled` property. You can add it directly, or bind it to a property on your
|
||||
component class by adding `[disabled]="isDisabled"` given that the `isDisabled`
|
||||
property exists.
|
||||
|
||||
```html
|
||||
<button md-button disabled>OFF</button>
|
||||
<button md-raised-button [disabled]="isDisabled">OFF</button>
|
||||
<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/buttons/disabled-buttons.png">
|
||||
|
||||
### Accessibility
|
||||
|
||||
* In high contrast mode, a strong border is added to the button to make it easier to see.
|
||||
* Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not.
|
||||
* As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements.
|
||||
|
||||
|
||||
### Upcoming work
|
||||
|
||||
We will also be adding ink ripples to buttons in an upcoming milestone.
|
||||
|
||||
### API Summary
|
||||
|
||||
Properties:
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `color` | `"primary"|"accent"|"warn"` | The color palette of the button
|
||||
| `disabled` | boolean | Whether or not the button is disabled
|
||||
| `disableRipple` | boolean | Whether the ripple effect when the button is clicked should be disabled
|
||||
Please see the official documentation at https://material.angular.io/components/component/button
|
||||
+1
-116
@@ -1,116 +1 @@
|
||||
# md-card
|
||||
|
||||
`md-card` is a content container component that conforms to the spec of a Material Design card.
|
||||
|
||||
See plunker example [here](http://plnkr.co/edit/pkUNGMXPcf8RXKapXNXQ?p=preview).
|
||||
|
||||
## Usage
|
||||
|
||||
Simply add your content between `md-card` tags to consume basic card styles like box-shadow and default padding.
|
||||
|
||||
```html
|
||||
<md-card>
|
||||
Basic card.
|
||||
</md-card>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/cards/basic-card-min.png">
|
||||
|
||||
### Preset sections
|
||||
|
||||
We also provide a number of preset sections that you can mix and match within the `md-card` tags.
|
||||
|
||||
* `<md-card-title>`: adds styles for a title
|
||||
* `<md-card-subtitle>`: adds styles for a subtitle
|
||||
* `<md-card-content>`: main content section, intended for blocks of text
|
||||
* `<img md-card-image>`: stretches image to container width
|
||||
* `<md-card-actions>`: wraps and styles buttons
|
||||
* `<md-card-footer>`: anchors section to bottom of card (e.g progress bar)
|
||||
|
||||
Example markup for a card with section presets:
|
||||
|
||||
```html
|
||||
<md-card>
|
||||
<md-card-subtitle>Subtitle first</md-card-subtitle>
|
||||
<md-card-title>Card with title</md-card-title>
|
||||
<md-card-content>
|
||||
<p>This is supporting text.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
|
||||
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
|
||||
</md-card-content>
|
||||
<md-card-actions>
|
||||
<button md-button>LIKE</button>
|
||||
<button md-button>SHARE</button>
|
||||
</md-card-actions>
|
||||
</md-card>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
|
||||
|
||||
#### Preset shortcuts
|
||||
|
||||
`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
|
||||
the main axis (flex-end). The default is `align="start"` (flex-start).
|
||||
|
||||
### Preset layouts
|
||||
|
||||
You can also leverage preset layouts that format some of the sections together.
|
||||
|
||||
#### `<md-card-header>`
|
||||
|
||||
Formats the following sections into a header:
|
||||
|
||||
* `<md-card-title>`: title to format within header
|
||||
* `<md-card-subtitle>`: subtitle to format within header
|
||||
* `<img md-card-avatar>`: image to use for avatar
|
||||
|
||||
Example markup for a card with a header:
|
||||
|
||||
```html
|
||||
<md-card>
|
||||
<md-card-header>
|
||||
<img md-card-avatar src="path/to/img.png">
|
||||
<md-card-title>Header title</md-card-title>
|
||||
<md-card-subtitle>Header subtitle</md-card-subtitle>
|
||||
</md-card-header>
|
||||
<img md-card-image src="path/to/img.png">
|
||||
<md-card-content>
|
||||
<p>Here is some more content</p>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/cards/header-card-min.png">
|
||||
|
||||
#### `<md-card-title-group>`
|
||||
|
||||
Groups the following sections together:
|
||||
|
||||
* `<md-card-title>`: title to format within group
|
||||
* `<md-card-subtitle>`: subtitle to format within group
|
||||
* One of the following image sizes:
|
||||
* `<img md-card-sm-image>`
|
||||
* `<img md-card-md-image>`
|
||||
* `<img md-card-lg-image>`
|
||||
|
||||
Example markup for a card with title-group layout:
|
||||
|
||||
```html
|
||||
<md-card>
|
||||
<md-card-title-group>
|
||||
<img md-card-sm-image src="path/to/img.png">
|
||||
<md-card-title>Card with title</md-card-title>
|
||||
<md-card-subtitle>Subtitle</md-card-subtitle>
|
||||
</md-card-title-group>
|
||||
</md-card>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/cards/title-group-card-min.png">
|
||||
Please see the official documentation at https://material.angular.io/components/component/card
|
||||
@@ -1,93 +1 @@
|
||||
# md-checkbox
|
||||
|
||||
`md-checkbox` is a Material Design selection control that allows users to make a binary choice for
|
||||
a predetermined conditioned. It is modeled after the browser's native checkbox element, and behaves
|
||||
in the same way. Similar to the native checkbox element, it supports an indeterminate state for
|
||||
"mixed" checkboxes.
|
||||
|
||||
A demo of the checkbox can be found at https://plnkr.co/edit/P7qce8lN9n2flS6kBhDy?p=preview.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic Usage
|
||||
|
||||
`md-checkbox` can be used anywhere a normal checkbox would be used, and in the same way.
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li *ngFor="let todo of todos">
|
||||
<md-checkbox [checked]="todo.completed"
|
||||
(change)="todo.completed = $event">
|
||||
{{todo.name}}
|
||||
</md-checkbox>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Usage within Forms
|
||||
|
||||
In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]`
|
||||
for use within forms.
|
||||
|
||||
```html
|
||||
<form (submit)="saveUser()">
|
||||
<!-- Form fields... -->
|
||||
<div>
|
||||
<md-checkbox [(ngModel)]="user.agreesToTOS">
|
||||
I have read and agree to the terms of service.
|
||||
</md-checkbox>
|
||||
</div>
|
||||
<button type="submit" [disabled]="!user.agreesToTOS">Sign Up</button>
|
||||
</form>
|
||||
```
|
||||
|
||||
### Indeterminate Checkboxes
|
||||
|
||||
Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state
|
||||
|
||||
```html
|
||||
<md-checkbox [checked]="false"
|
||||
[indeterminate]="isIndeterminate"
|
||||
(change)="isIndeterminate = false">
|
||||
Click the Button Below to Make Me Indeterminate.
|
||||
</md-checkbox>
|
||||
<button type="button" (click)="isIndeterminate = true">
|
||||
Make Indeterminate
|
||||
</button>
|
||||
```
|
||||
|
||||
### Alignment
|
||||
|
||||
Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label.
|
||||
|
||||
```html
|
||||
<md-checkbox [checked]="true" align="end">
|
||||
I come after my label.
|
||||
</md-checkbox>
|
||||
```
|
||||
|
||||
Note that this alignment is preserved within RTL layouts.
|
||||
|
||||
### Accessibility
|
||||
|
||||
By default, `md-checkbox` provides all the accessibility attributes needed. It also supports
|
||||
keyboard navigation and toggling via the spacebar. However, you can provide an `aria-label` to the
|
||||
checkbox if you do not wish to have any label text.
|
||||
|
||||
```html
|
||||
<md-checkbox [checked]="false" aria-label="My standalone checkbox"></md-checkbox>
|
||||
```
|
||||
|
||||
### Theming
|
||||
|
||||
The color of a `md-checkbox` can be changed by using the `color` attribute.
|
||||
The value `accent` is default and will correspond to your theme accent color.
|
||||
Alternatively, you can specify `primary` or `warn`.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<md-checkbox [checked]="true" color="primary">
|
||||
I come after my label.
|
||||
</md-checkbox>
|
||||
```
|
||||
Please see the official documentation at https://material.angular.io/components/component/checkbox
|
||||
@@ -1,7 +1 @@
|
||||
# md-chips
|
||||
|
||||
`md-chips` provides a horizontal display of (optionally) selectable, addable, and removable,
|
||||
items and an input to create additional ones (again; optional). You can read more about chips
|
||||
in the [Material Design spec](https://material.google.com/components/chips.html).
|
||||
|
||||
This is a placeholder README for the eventual chips component.
|
||||
Please see the official documentation at https://material.angular.io/components/component/chips
|
||||
+1
-102
@@ -1,102 +1 @@
|
||||
# MdDialog
|
||||
|
||||
MdDialog is a service, which opens dialogs components in the view.
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| `open(component: ComponentType<T>, config: MdDialogConfig): MdDialogRef<T>` | Creates and opens a dialog matching material spec. |
|
||||
| `closeAll(): void` | Closes all of the dialogs that are currently open. |
|
||||
|
||||
### Config
|
||||
|
||||
| Key | Description |
|
||||
| --- | ------------ |
|
||||
| `role: DialogRole = 'dialog'` | The ARIA role of the dialog element. Possible values are `dialog` and `alertdialog`. Optional. |
|
||||
| `disableClose: boolean = false` | Whether to prevent the user from closing a dialog by clicking on the backdrop or pressing escape. Optional. |
|
||||
| `width: string = ''` | Width of the dialog. Takes any valid CSS value. Optional. |
|
||||
| `height: string = ''` | Height of the dialog. Takes any valid CSS value. Optional. |
|
||||
| `position: { top?: string, bottom?: string, left?: string, right?: string }` | Position of the dialog that overrides the default centering in it's axis. Optional. |
|
||||
| `viewContainerRef: ViewContainerRef` | The view container ref to attach the dialog to. Optional. |
|
||||
|
||||
## MdDialogRef
|
||||
|
||||
A reference to the dialog created by the MdDialog `open` method.
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| `close(dialogResult?: any)` | Closes the dialog, pushing a value to the afterClosed observable. |
|
||||
| `afterClosed(): Observable<any>` | Returns an observable which will emit the dialog result, passed to the `close` method above. |
|
||||
|
||||
### Directives
|
||||
| Name | Description |
|
||||
| --- | ------------ |
|
||||
| `md-dialog-title` | Marks the title of the dialog.
|
||||
| `md-dialog-content` | Scrollable content of the dialog.
|
||||
| `md-dialog-close` | When added to a `button`, makes the element act as a close button for the dialog.
|
||||
| `md-dialog-actions` | Wrapper for the set of actions at the bottom of a dialog. Typically contains buttons. The element's content can be aligned via the `align` attribute either to the `center` or the `end`. |
|
||||
|
||||
## Example
|
||||
The service can be injected in a component.
|
||||
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'pizza-component',
|
||||
template: `
|
||||
<button type="button" (click)="openDialog()">Open dialog</button>
|
||||
`
|
||||
})
|
||||
export class PizzaComponent {
|
||||
|
||||
dialogRef: MdDialogRef<PizzaDialog>;
|
||||
|
||||
constructor(public dialog: MdDialog) { }
|
||||
|
||||
openDialog() {
|
||||
this.dialogRef = this.dialog.open(PizzaDialog, {
|
||||
disableClose: false
|
||||
});
|
||||
|
||||
this.dialogRef.afterClosed().subscribe(result => {
|
||||
console.log('result: ' + result);
|
||||
this.dialogRef = null;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'pizza-dialog',
|
||||
template: `
|
||||
<h1 md-dialog-title>Would you like to order pizza?</h1>
|
||||
|
||||
<md-dialog-actions>
|
||||
<button (click)="dialogRef.close('yes')">Yes</button>
|
||||
<button md-dialog-close>No</button>
|
||||
</md-dialog-actions>
|
||||
`
|
||||
})
|
||||
export class PizzaDialog {
|
||||
constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
|
||||
}
|
||||
```
|
||||
|
||||
The dialog component should be declared in the list of entry components of the module:
|
||||
|
||||
```ts
|
||||
@NgModule({
|
||||
declarations: [
|
||||
...,
|
||||
PizzaDialog
|
||||
],
|
||||
entryComponents: [
|
||||
...,
|
||||
PizzaDialog
|
||||
],
|
||||
...
|
||||
})
|
||||
export class AppModule { }
|
||||
|
||||
```
|
||||
Please see the official documentation at https://material.angular.io/components/component/dialog
|
||||
|
||||
+1
-105
@@ -1,105 +1 @@
|
||||
# md-grid-list
|
||||
|
||||
`md-grid-list` is an alternative list view that arranges cells into grid-based layout.
|
||||
See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html).
|
||||
|
||||
## Usage
|
||||
|
||||
### Simple grid list
|
||||
|
||||
In your template, create an `md-grid-list` element and specify the number of columns you want for
|
||||
your grid using the `cols` property (this is the only mandatory attribute).
|
||||
|
||||
You can define each tile using an `md-grid-tile` element, passing any tile content between its tags.
|
||||
|
||||
Tiles are greedily placed in the first position of the grid that fits them, so row count depends on
|
||||
how many tiles can fit in each row, given the col count and the colspan/rowspan of each tile.
|
||||
|
||||
```html
|
||||
<md-grid-list cols="4" [style.background]="'lightblue'">
|
||||
<md-grid-tile>One</md-grid-tile>
|
||||
<md-grid-tile>Two</md-grid-tile>
|
||||
<md-grid-tile>Three</md-grid-tile>
|
||||
<md-grid-tile>Four</md-grid-tile>
|
||||
</md-grid-list>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/grid-list/basic-grid-list.png">
|
||||
|
||||
## Grid list config
|
||||
|
||||
####`cols`
|
||||
|
||||
The `cols` property controls the number of columns displayed in your grid. It must be set or the
|
||||
grid list will not be able to generate your layout.
|
||||
|
||||
Ex: `<md-grid-list cols="3">...`
|
||||
|
||||
Default: There is no reasonable default value for this, so if it is unspecified, the grid list will
|
||||
throw an error.
|
||||
|
||||
####`rowHeight`
|
||||
|
||||
Row height for the list can be calculated in three ways:
|
||||
|
||||
1. **Fixed height**: The height can be in `px`, `em`, or `rem`. If no units are specified, `px`
|
||||
units are assumed.
|
||||
|
||||
Ex: `<md-grid-list cols="3" rowHeight="100px">...`
|
||||
|
||||
2. **Ratio**: This ratio is width:height, and must be passed in with a colon, not a decimal.
|
||||
|
||||
Ex: `<md-grid-list cols="3" rowHeight="4:3">...`.
|
||||
|
||||
3. **Fit**: This mode automatically divides the available height by the number of rows. Please note
|
||||
the height of the grid-list or its container must be set.
|
||||
|
||||
Ex: `<md-grid-list cols="3" rowHeight="fit">...`
|
||||
|
||||
Defaults to a 1:1 ratio of width:height.
|
||||
|
||||
####`gutterSize`
|
||||
|
||||
Gutter size can be set to any `px`, `em`, or `rem` value with the `gutterSize` property. If no
|
||||
units are specified, `px` units are assumed.
|
||||
|
||||
Ex: `<md-grid-list cols="3" gutterSize="4px">...`
|
||||
|
||||
Defaults to `1px`.
|
||||
|
||||
## Grid tile config
|
||||
|
||||
You can set the rowspan and colspan of each tile individually, using the `rowspan` and `colspan`
|
||||
properties. If not set, they both default to `1`.
|
||||
|
||||
```html
|
||||
<md-grid-list cols="4" rowHeight="100px">
|
||||
<md-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows"
|
||||
[style.background]="tile.color">
|
||||
{{tile.text}}
|
||||
</md-grid-tile>
|
||||
</md-grid-list>
|
||||
```
|
||||
|
||||
```javascript
|
||||
...
|
||||
export class MyComp {
|
||||
tiles: any[] = [
|
||||
{text: 'One', cols: 3, rows: 1, color: 'lightblue'},
|
||||
{text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
|
||||
{text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
|
||||
{text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
|
||||
];
|
||||
}
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/grid-list/fancy-grid-list.png">
|
||||
|
||||
## TODO
|
||||
|
||||
- Grid tile headers and footers
|
||||
- Responsive sizing support
|
||||
Please see the official documentation at https://material.angular.io/components/component/grid-list
|
||||
+1
-121
@@ -1,121 +1 @@
|
||||
# md-icon
|
||||
|
||||
`md-icon` is a component that displays an icon, which can be a font glyph or an SVG image.
|
||||
|
||||
## MdIconRegistry
|
||||
|
||||
`MdIconRegistry` is an injectable service that allows you to associate icon names with SVG URLs and define aliases for CSS font classes. Its methods are discussed below and listed in the API summary.
|
||||
|
||||
## Font icons
|
||||
|
||||
### Ligatures
|
||||
|
||||
Some fonts are designed to show icons by using [ligatures](https://en.wikipedia.org/wiki/Typographic_ligature), for example by rendering the text "home" as a home image. To use a ligature icon, put its text in the content of the `md-icon` component, for example:
|
||||
```html
|
||||
<md-icon>home</md-icon>
|
||||
```
|
||||
|
||||
By default the [Material icons font](http://google.github.io/material-design-icons/#icon-font-for-the-web) is used. (You will still need to include the HTML to load the font and its CSS, as described in the link). You can specify a different font by setting the `fontSet` input to either the CSS class to apply to use the desired font, or to an alias previously registered with `MdIconRegistry.registerFontClassAlias`, for example:
|
||||
```javascript
|
||||
mdIconRegistry.registerFontClassAlias('myfont', 'my-icon-font-class');
|
||||
```
|
||||
|
||||
```html
|
||||
<md-icon fontSet="myfont">help</md-icon>
|
||||
```
|
||||
|
||||
### Font icons via CSS
|
||||
|
||||
Fonts can also display icons by defining a CSS class for each icon glyph, which typically uses a :before selector to cause the icon to appear. [FontAwesome](https://fortawesome.github.io/Font-Awesome/examples/) uses this approach to display its icons. To use such a font, set the `fontSet` input to the font's CSS class (either the class itself or an alias registered with `MdIconRegistry.registerFontClassAlias`), and set the `fontIcon` input to the class for the specific icon to show. Example:
|
||||
|
||||
```html
|
||||
<md-icon fontSet="fa" fontIcon="fa-square"></md-icon>
|
||||
```
|
||||
|
||||
For both types of font icons, you can specify the default font class to use when `fontSet` is not explicitly set by calling `MdIconRegistry.setDefaultFontSetClass`.
|
||||
|
||||
## SVG icons
|
||||
|
||||
When an `md-icon` component displays an SVG icon, it does so by directly inlining the SVG content into the page as a child of the component. (Rather than using an <img> tag or a div background image). This makes it easier to apply CSS styles to SVG icons. For example, the default color of the SVG content is the CSS [currentColor](http://www.quirksmode.org/css/color/currentcolor.html) value. This makes SVG icons by default have the same color as surrounding text, and allows you to change the color by setting the "color" style on the `md-icon` element.
|
||||
|
||||
### Named icons
|
||||
|
||||
To associate a name with an icon URL, use the `addSvgIcon` or `addSvgIconInNamespace` methods of `MdIconRegistry`. After registering an icon, it can be displayed by setting the `svgIcon` input. For an icon in the default namespace, use the name directly. For a non-default namespace, use the format `[namespace]:[name]`. Examples:
|
||||
```javascript
|
||||
mdIconRegistry.addSvgIcon('moon', '/assets/moon.svg');
|
||||
mdIconRegistry.addSvgIconInNamespace('animals', 'cat', '/assets/cat.svg');
|
||||
```
|
||||
|
||||
```html
|
||||
<md-icon svgIcon="moon"></md-icon>
|
||||
<md-icon svgIcon="animals:cat"></md-icon>
|
||||
```
|
||||
|
||||
### Icon sets
|
||||
|
||||
Icon sets allow grouping multiple icons into a single SVG file. The content of an icon set file looks like this, where each nested `<svg>` tag defines an individual icon, and is identified with a unique "id" attribute.
|
||||
```
|
||||
<svg>
|
||||
<defs>
|
||||
<svg id="mercury">...</svg>
|
||||
<svg id="venus">...</svg>
|
||||
<svg id="earth">...</svg>
|
||||
<svg id="mars">...</svg>
|
||||
</defs>
|
||||
</svg>
|
||||
```
|
||||
|
||||
Icon sets are registered using the `addSvgIconSet` or `addSvgIconSetInNamespace` methods of `MdIconRegistry`. After an icon set is registered, each of its embedded icons can be accessed by their "id" attributes. To display an icon from an icon set, use the `svgIcon` input in the same way as for individually registered icons. Example:
|
||||
```javascript
|
||||
mdIconRegistry.addSvgIconSetInNamespace('planets', '/assets/planets.svg');
|
||||
```
|
||||
|
||||
```html
|
||||
<md-icon svgIcon="planets:venus"></md-icon>
|
||||
```
|
||||
|
||||
Multiple icon sets can be registered in the same namespace. If you request an icon whose id appears in more than one icon set, the icon from the most recently registered set will be used.
|
||||
|
||||
Note that all SVG icons are fetched via XmlHttpRequest, and due to the same-origin policy their URLs must be on the same domain as the containing page, or their servers must be configured to allow cross-domain access.
|
||||
|
||||
### Theming
|
||||
|
||||
Icons can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
|
||||
Simply pass in the palette name.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<md-icon color="primary">home</md-icon>
|
||||
<md-icon color="accent">home</md-icon>
|
||||
<md-icon color="warn">home</md-icon>
|
||||
```
|
||||
|
||||
### Accessibility
|
||||
|
||||
If you set an "aria-label" attribute on the md-icon element, its value will be used as-is. If you do not, the md-icon component will attempt to set the aria-label value from one of these sources:
|
||||
* The `alt` attribute
|
||||
* The `fontIcon` input
|
||||
* The name of the icon from the `svgIcon` input (not including any namespace)
|
||||
* The text content of the component (for ligature icons)
|
||||
|
||||
### API Summary
|
||||
|
||||
md-icon Properties:
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `svgIcon` | string | The name (and possibly namespace) of an icon previously registered with `MdIconRegistry.addSvgIcon` or `MdIconRegistry.addSvgIconInNamespace` |
|
||||
| `fontSet` | string | The font to use to display an icon glyph. The value can be either a CSS class name, or an alias previously defined with `MdIconRegistry.registerFontClassAlias` |
|
||||
| `fontIcon` | string | The CSS class that identifies the specific icon to use from an icon font |
|
||||
|
||||
MdIconRegistry methods (all methods return `this` for chaining):
|
||||
|
||||
| Signature | Description |
|
||||
| --- | --- |
|
||||
| addSvgIcon(name: string, url: string): MdIconProvider | Associates an icon name with a URL in the default namespace. When an `md-icon` component has its `svgIcon` input set to this name, the icon will be loaded from this URL. |
|
||||
| addSvgIconInNamespace(namespace: string, iconName: string, url: string): MdIconProvider | Associates an icon name with a URL in the specified namespace. |
|
||||
| addSvgIconSet(url: string): MdIconProvider | Makes the icons contained in the icon set from a URL available in the default namespace. |
|
||||
| addSvgIconSetInNamespace(namespace: string, url: string): MdIconProvider | Makes the icons contained in the icon set from a URL available in the specified namespace. |
|
||||
| registerFontClassAlias(alias: string, className: string): MdIconProvider | Associates a font alias with a CSS class. When an `md-icon` component has its `fontSet` input set to the alias, the CSS class will be added to the component's element. It is assumed that the user has defined a corresponding CSS rule to set the desired font. |
|
||||
| setDefaultFontSetClass(className: string): MdIconProvider | Sets the default CSS class to apply to font icons when mdFontSet is not set. |
|
||||
Please see the official documentation at https://material.angular.io/components/component/icon
|
||||
|
||||
+1
-180
@@ -1,180 +1 @@
|
||||
# md-input-container
|
||||
|
||||
Inputs are the basic input component of Material. The spec can be found
|
||||
[here](https://www.google.com/design/spec/components/text-fields.html). `md-input-container` acts as
|
||||
a wrapper for native `input` and `textarea` elements. The native element wrapped by the
|
||||
`md-input-container` must be marked with the `mdInput` directive.
|
||||
|
||||
Simple `input` example:
|
||||
```html
|
||||
<md-input-container>
|
||||
<input mdInput>
|
||||
</md-input-container>
|
||||
```
|
||||
|
||||
Simple `textarea` example:
|
||||
```html
|
||||
<md-input-container>
|
||||
<textarea mdInput></textarea>
|
||||
</md-input-container>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### `input` and `textarea` attributes
|
||||
|
||||
All of the attributes that can be used with normal `input` and `textarea` elements can be used on
|
||||
elements within the `md-input-container` as well. This includes angular specific ones such as
|
||||
`ngModel` and `formControl`.
|
||||
|
||||
The only limitations are that the `type` attribute can only be one of the values supported by
|
||||
`md-input-container` and the native element cannot specify a `placeholder` attribute if the
|
||||
`md-input-container` also contains a `md-placeholder` element.
|
||||
|
||||
#### Supported `input` types
|
||||
|
||||
The following [input types](http://www.w3schools.com/TAGs/att_input_type.asp) can be used with
|
||||
`md-input-container`:
|
||||
* date
|
||||
* datetime-local
|
||||
* email
|
||||
* month
|
||||
* number
|
||||
* password
|
||||
* search
|
||||
* tel
|
||||
* text
|
||||
* time
|
||||
* url
|
||||
* week
|
||||
|
||||
### Placeholder
|
||||
|
||||
A placeholder is an indicative text displayed in the input zone when the input does not contain
|
||||
text. When text is present, the indicative text will float above this input zone.
|
||||
|
||||
You can set the `floatingPlaceholder` attribute of `md-input-container` to `false` to hide the
|
||||
indicative text instead when text is present in the input.
|
||||
|
||||
You can specify a placeholder for the input in one of two ways; either using the `placeholder`
|
||||
attribute on the `input` or `textarea`, or using an `md-placeholder` element in the
|
||||
`md-input-container`. Using both will raise an error.
|
||||
|
||||
### Prefix and Suffix
|
||||
|
||||
You can include HTML before, and after the input tag, as prefix or suffix. It will be underlined as
|
||||
per the Material specification, and clicking it will focus the input.
|
||||
|
||||
To add a prefix, use the `mdPrefix` attribute on the element. Similarly, to add a suffix, use the
|
||||
`mdSuffix` attribute. For example, in a template:
|
||||
|
||||
```html
|
||||
<md-input-container align="end">
|
||||
<input mdInput placeholder="amount">
|
||||
<span mdPrefix>$ </span>
|
||||
<span mdSuffix>.00</span>
|
||||
</md-input-container>
|
||||
```
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/input/prefix-suffix.png">
|
||||
|
||||
### Hint Labels
|
||||
|
||||
Hint labels are the labels that show below the underline. You can have up to two hint labels; one on
|
||||
the `start` of the line (left in an LTR language, right in RTL), and one on the `end`.
|
||||
|
||||
You specify a hint label in one of two ways; either using the `hintLabel` attribute of
|
||||
`md-input-container`, or using an `md-hint` element inside the `md-input-container`, which takes an
|
||||
`align` attribute containing the side. The attribute version is assumed to be at the `start`.
|
||||
Specifying a side twice will result in an exception during initialization.
|
||||
|
||||
For example, a simple character counter can be made like the following:
|
||||
```html
|
||||
<md-input-container>
|
||||
<input mdInput
|
||||
placeholder="Character count (100 max)"
|
||||
maxlength="100"
|
||||
value="Hello world. How are you?"
|
||||
#characterCountHintExample>
|
||||
<md-hint align="end">{{characterCountHintExample.value.length}} / 100</md-hint>
|
||||
</md-input-container>
|
||||
```
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/input/character-count.png">
|
||||
|
||||
### Divider Color
|
||||
|
||||
The divider (line under the `input` content) color can be changed by using the `dividerColor`
|
||||
attribute of `md-input-container`. A value of `primary` is the default and will correspond to your
|
||||
theme primary color. Alternatively, you can specify `accent` or `warn`.
|
||||
|
||||
```html
|
||||
<md-input-container>
|
||||
<input mdInput placeholder="Default color" value="example">
|
||||
</md-input-container>
|
||||
<md-input-container dividerColor="accent">
|
||||
<input mdInput placeholder="Accent color" value="example">
|
||||
</md-input-container>
|
||||
<md-input-container dividerColor="warn">
|
||||
<input mdInput placeholder="Warn color" value="example">
|
||||
</md-input-container>
|
||||
```
|
||||
|
||||
_please note that this image has been doctored to show each `input` as if it were focused:_
|
||||
<img src="https://material.angularjs.org/material2_assets/input/divider-colors.png">
|
||||
|
||||
### Full Forms
|
||||
|
||||
You can make a full form using inputs, and they will support autofill natively.
|
||||
|
||||
```html
|
||||
<form>
|
||||
<md-input-container style="width: 100%">
|
||||
<input mdInput placeholder="Company (disabled)" disabled value="Google">
|
||||
</md-input-container>
|
||||
|
||||
<table style="width: 100%" cellspacing="0"><tr>
|
||||
<td><md-input-container style="width: 100%">
|
||||
<input mdInput placeholder="First name">
|
||||
</md-input-container></td>
|
||||
<td><md-input-container style="width: 100%">
|
||||
<input mdInput placeholder="Long Last Name That Will Be Truncated">
|
||||
</md-input-container></td>
|
||||
</tr></table>
|
||||
|
||||
<p>
|
||||
<md-input-container width="100%">
|
||||
<textarea mdInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
|
||||
</md-input-container>
|
||||
<md-input-container width="100%">
|
||||
<textarea mdInput placeholder="Address 2"></textarea>
|
||||
</md-input-container>
|
||||
</p>
|
||||
|
||||
<table style="width: 100%" cellspacing="0"><tr>
|
||||
<td><md-input-container width="100%">
|
||||
<input mdInput placeholder="City">
|
||||
</md-input-container></td>
|
||||
<td><md-input-container width="100%">
|
||||
<input mdInput placeholder="State">
|
||||
</md-input-container></td>
|
||||
<td><md-input-container width="100%">
|
||||
<input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
|
||||
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
|
||||
</md-input-container></td>
|
||||
</tr></table>
|
||||
</form>
|
||||
```
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/input/full-form.png">
|
||||
|
||||
## API Summary
|
||||
|
||||
### Inputs
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `align` | `"start" | "end"` | The alignment of the `input` or `textarea`. Default = `"start"`. |
|
||||
| `dividerColor` | `"primary" | "accent" | "warn"` | The color of the placeholder and underline. Default = `"primary"`. |
|
||||
| `floatingPlaceholder` | boolean | Whether the placeholder should float above the input after text is entered. Default = `true`. |
|
||||
| `hintLabel` | string | The hint text to show on the start end of the `md-input-container`. |
|
||||
Please see the official documentation at https://material.angular.io/components/component/input
|
||||
|
||||
+1
-154
@@ -1,154 +1 @@
|
||||
# md-list
|
||||
|
||||
`md-list` is a container component that wraps and formats a series of line items. As the base list component,
|
||||
it provides Material Design styling, but no behavior of its own.
|
||||
|
||||
## Usage
|
||||
|
||||
### Simple list
|
||||
|
||||
In your template, create an `md-list` element and wrap each of your items in an `md-list-item` tag.
|
||||
|
||||
```html
|
||||
<md-list>
|
||||
<md-list-item> Pepper </md-list-item>
|
||||
<md-list-item> Salt </md-list-item>
|
||||
<md-list-item> Paprika </md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/list/basic-list.png">
|
||||
|
||||
### Multi-line lists
|
||||
|
||||
If your list requires multiple lines per list item, annotate each line with an `md-line` attribute.
|
||||
You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`),
|
||||
as long as the `md-line` attribute is included.
|
||||
|
||||
```html
|
||||
<!-- two line list -->
|
||||
<md-list>
|
||||
<md-list-item *ngFor="let message of messages">
|
||||
<h3 md-line> {{message.from}} </h3>
|
||||
<p md-line>
|
||||
<span> {{message.subject}} </span>
|
||||
<span class="demo-2"> -- {{message.message}} </span>
|
||||
</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<!-- three line list -->
|
||||
<md-list>
|
||||
<md-list-item *ngFor="let message of messages">
|
||||
<h3 md-line> {{message.from}} </h3>
|
||||
<p md-line> {{message.subject}} </p>
|
||||
<p md-line class="demo-2"> {{message.message}} </p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
Two line list output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/list/two-line-list.png">
|
||||
|
||||
Three line list output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/list/three-line-list.png">
|
||||
|
||||
### Lists with avatars
|
||||
|
||||
To include an avatar, add an image tag with an `md-list-avatar` attribute.
|
||||
|
||||
```html
|
||||
<md-list>
|
||||
<md-list-item *ngFor="let message of messages">
|
||||
<img md-list-avatar src="..." alt="...">
|
||||
<h3 md-line> {{message.from}} </h3>
|
||||
<p md-line>
|
||||
<span> {{message.subject}} </span>
|
||||
<span class="demo-2"> -- {{message.message}} </span>
|
||||
</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/list/list-with-avatar-2.png">
|
||||
|
||||
### Dense lists
|
||||
Lists are also available in "dense layout" mode, which shrinks the font size and height of the list
|
||||
to suit UIs that may need to display more information. To enable this mode, add a `dense` attribute
|
||||
to the main `md-list` tag.
|
||||
|
||||
|
||||
```html
|
||||
<md-list dense>
|
||||
<md-list-item> Pepper </md-list-item>
|
||||
<md-list-item> Salt </md-list-item>
|
||||
<md-list-item> Paprika </md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/list/dense-list.png">
|
||||
|
||||
### Lists with multiple sections
|
||||
|
||||
You can add a subheader to a list by annotating a heading tag with an `md-subheader` attribute. To add a divider,
|
||||
use `<md-divider>` tags.
|
||||
|
||||
```html
|
||||
<md-list>
|
||||
<h3 md-subheader>Folders</h3>
|
||||
<md-list-item *ngFor="let folder of folders">
|
||||
<md-icon md-list-avatar>folder</md-icon>
|
||||
<h4 md-line>{{folder.name}}</h4>
|
||||
<p md-line class="demo-2"> {{folder.updated}} </p>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<h3 md-subheader>Notes</h3>
|
||||
<md-list-item *ngFor="let note of notes">
|
||||
<md-icon md-list-avatar>note</md-icon>
|
||||
<h4 md-line>{{note.name}}</h4>
|
||||
<p md-line class="demo-2"> {{note.updated}} </p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/list/subheader-list.png">
|
||||
|
||||
### Navigation lists
|
||||
|
||||
Use `md-nav-list` tags for navigation lists (i.e. lists that have anchor tags).
|
||||
|
||||
Simple nav lists can tack an `md-list-item` attribute onto the anchor tag itself:
|
||||
|
||||
```html
|
||||
<md-nav-list>
|
||||
<a md-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
|
||||
</md-nav-list>
|
||||
```
|
||||
|
||||
If you require a more complex nav list (e.g. with more than one target per item), wrap your anchor tag in an `md-list-item` element.
|
||||
|
||||
```html
|
||||
<md-nav-list>
|
||||
<md-list-item *ngFor="let link of links">
|
||||
<a md-line href="...">{{ link }}</a>
|
||||
<button md-icon-button (click)="showInfo(link)">
|
||||
<md-icon>info</md-icon>
|
||||
</button>
|
||||
</md-list-item>
|
||||
</md-nav-list>
|
||||
```
|
||||
|
||||
### Lists with secondary text
|
||||
Secondary text styling will be part of a broader typography module to
|
||||
[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component
|
||||
specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo.
|
||||
Please see the official documentation at https://material.angular.io/components/component/list
|
||||
+1
-173
@@ -1,173 +1 @@
|
||||
# md-menu
|
||||
|
||||
`md-menu` is a list of options that displays when triggered. You can read more about menus in the
|
||||
[Material Design spec](https://material.google.com/components/menus.html).
|
||||
|
||||
### Not yet implemented
|
||||
|
||||
- `prevent-close` option, to turn off automatic menu close when clicking outside the menu
|
||||
- Custom offset support
|
||||
- Menu groupings (which menus are allowed to open together)
|
||||
|
||||
## Usage
|
||||
|
||||
### Simple menu
|
||||
|
||||
In your template, create an `md-menu` element. You can use either `<button>` or `<anchor>` tags for
|
||||
your menu items, as long as each is tagged with an `md-menu-item` attribute. Note that you can
|
||||
disable items by adding the `disabled` boolean attribute or binding to it.
|
||||
|
||||
*my-comp.html*
|
||||
```html
|
||||
<!-- this menu starts as hidden by default -->
|
||||
<md-menu>
|
||||
<button md-menu-item> Refresh </button>
|
||||
<button md-menu-item> Settings </button>
|
||||
<button md-menu-item> Help </button>
|
||||
<button md-menu-item disabled> Sign Out </button>
|
||||
</md-menu>
|
||||
```
|
||||
|
||||
Menus are hidden by default, so you'll want to connect up a menu trigger that can open your menu.
|
||||
You can do so by adding a button tag with an `mdMenuTriggerFor` attribute and passing in the menu
|
||||
instance. You can create a local reference to your menu instance by adding `#menu="mdMenu"` to
|
||||
your menu element.
|
||||
|
||||
*my-comp.html*
|
||||
```html
|
||||
<!-- menu opens when trigger button is clicked -->
|
||||
<button md-icon-button [mdMenuTriggerFor]="menu">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</button>
|
||||
|
||||
<md-menu #menu="mdMenu">
|
||||
<button md-menu-item> Refresh </button>
|
||||
<button md-menu-item> Settings </button>
|
||||
<button md-menu-item> Help </button>
|
||||
<button md-menu-item disabled> Sign Out </button>
|
||||
</md-menu>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/menu/default_closed.png">
|
||||
<img src="https://material.angularjs.org/material2_assets/menu/default_open.png">
|
||||
|
||||
### Toggling the menu programmatically
|
||||
|
||||
You can also use the menu's API to open or close the menu programmatically from your class. Please
|
||||
note that in this case, an `mdMenuTriggerFor` attribute is still necessary to connect
|
||||
the menu to its trigger element in the DOM.
|
||||
|
||||
*my-comp.component.ts*
|
||||
```ts
|
||||
class MyComp {
|
||||
@ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
|
||||
|
||||
someMethod() {
|
||||
this.trigger.openMenu();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
*my-comp.html*
|
||||
```html
|
||||
<button md-icon-button [mdMenuTriggerFor]="menu">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</button>
|
||||
|
||||
<md-menu #menu="mdMenu">
|
||||
<button md-menu-item> Refresh </button>
|
||||
<button md-menu-item> Settings </button>
|
||||
<button md-menu-item> Help </button>
|
||||
<button md-menu-item disabled> Sign Out </button>
|
||||
</md-menu>
|
||||
```
|
||||
|
||||
### Adding an icon
|
||||
|
||||
Menus also support displaying `md-icon` elements before the menu item text.
|
||||
|
||||
*my-comp.html*
|
||||
```html
|
||||
<md-menu #menu="mdMenu">
|
||||
<button md-menu-item>
|
||||
<md-icon> dialpad </md-icon>
|
||||
<span> Redial </span>
|
||||
</button>
|
||||
<button md-menu-item disabled>
|
||||
<md-icon> voicemail </md-icon>
|
||||
<span> Check voicemail </span>
|
||||
</button>
|
||||
<button md-menu-item>
|
||||
<md-icon> notifications_off </md-icon>
|
||||
<span> Disable alerts </span>
|
||||
</button>
|
||||
</md-menu>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_closed.png">
|
||||
<img src="https://material.angularjs.org/material2_assets/menu/icon_menu_open.png">
|
||||
|
||||
|
||||
### Customizing menu position
|
||||
|
||||
By default, the menu will display after and below its trigger. You can change this display position
|
||||
using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes. The menu
|
||||
can be positioned over the menu button or outside using `overlapTrigger` (`true | false`).
|
||||
|
||||
*my-comp.html*
|
||||
```html
|
||||
<md-menu x-position="before" #menu="mdMenu">
|
||||
<button md-menu-item> Refresh </button>
|
||||
<button md-menu-item> Settings </button>
|
||||
<button md-menu-item> Help </button>
|
||||
<button md-menu-item disabled> Sign Out </button>
|
||||
</md-menu>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/menu/before_closed.png">
|
||||
<img src="https://material.angularjs.org/material2_assets/menu/before_open.png">
|
||||
|
||||
### Accessibility
|
||||
|
||||
The menu adds `role="menu"` to the main menu element and `role="menuitem"` to each menu item. It
|
||||
also adds `aria-hasPopup="true"` to the trigger element.
|
||||
|
||||
#### Keyboard events:
|
||||
- <kbd>DOWN_ARROW</kbd>: Focus next menu item
|
||||
- <kbd>UP_ARROW</kbd>: Focus previous menu item
|
||||
- <kbd>ENTER</kbd>: Select focused item
|
||||
|
||||
### Menu attributes
|
||||
|
||||
| Signature | Values | Description |
|
||||
| --- | --- | --- |
|
||||
| `x-position` | `before | after` | The horizontal position of the menu in relation to the trigger. Defaults to `after`. |
|
||||
| `y-position` | `above | below` | The vertical position of the menu in relation to the trigger. Defaults to `below`. |
|
||||
| `overlapTrigger` | `true | false` | Whether to have the menu show on top of the menu trigger or outside. Defaults to `true`. |
|
||||
|
||||
### Trigger Programmatic API
|
||||
|
||||
**Properties**
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `menuOpen` | `Boolean` | Property that is true when the menu is open. It is not settable (use methods below). |
|
||||
| `onMenuOpen` | `Observable<void>` | Observable that emits when the menu opens. |
|
||||
| `onMenuClose` | `Observable<void>` | Observable that emits when the menu closes. |
|
||||
|
||||
**Methods**
|
||||
|
||||
| Method | Returns | Description |
|
||||
| --- | --- | --- |
|
||||
| `openMenu()` | `Promise<void>` | Opens the menu. Returns a promise that will resolve when the menu has opened. |
|
||||
| `closeMenu()` | `Promise<void>` | Closes the menu. Returns a promise that will resolve when the menu has closed. |
|
||||
| `toggleMenu()` | `Promise<void>` | Toggles the menu. Returns a promise that will resolve when the menu has completed opening or closing. |
|
||||
| `destroyMenu()` | `Promise<void>` | Destroys the menu overlay completely.
|
||||
|
||||
|
||||
Please see the official documentation at https://material.angular.io/components/component/menu
|
||||
|
||||
@@ -1,54 +1 @@
|
||||
# md-progress-bar
|
||||
|
||||
`md-progress-bar` is a component for indicating progress and activity, matching the spec of
|
||||
[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html).
|
||||
|
||||
### Progress Modes
|
||||
|
||||
There are four modes:
|
||||
1. Determinate - `<md-progress-bar mode="determinate">`
|
||||
* Indicates how long an operation will take when the percentage complete is detectable.
|
||||
2. Indeterminate - `<md-progress-bar mode="indeterminate">`
|
||||
* Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it will take.
|
||||
3. Buffer - `<md-progress-bar mode="buffer">`
|
||||
* Indicates how long an operation will take when the percentage complete is detectable, also provides a value of the preloading for the operation.
|
||||
4. Query - `<md-progress-bar mode="query">`
|
||||
* Indicates the user must wait while something finishes when it is not yet possible to indicate how long it will take, but will be possible. Once possible, the progress mode should be moved to buffer or determinate.
|
||||
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<md-progress-bar mode="determinate" value="myValue"></md-progress-bar>
|
||||
<md-progress-bar mode="indeterminate"></md-progress-bar>
|
||||
<md-progress-bar mode="buffer" value="myValue" bufferValue="myBufferValue"></md-progress-bar>
|
||||
<md-progress-bar mode="query"></md-progress-bar>
|
||||
```
|
||||
|
||||
### Theming
|
||||
|
||||
All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<md-progress-bar mode="indeterminate" color="primary"></md-progress-bar>
|
||||
<md-progress-bar mode="indeterminate" color="accent"></md-progress-bar>
|
||||
<md-progress-bar mode="indeterminate" color="warn"></md-progress-bar>
|
||||
```
|
||||
|
||||
### Accessibility
|
||||
|
||||
* ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes.
|
||||
|
||||
|
||||
### API Summary
|
||||
|
||||
Properties:
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `color` | `"primary" | "accent" | "warn"` | The color palette of the progress indicator |
|
||||
| `mode` | `"determinate" | "indeterminate" | "buffer" | "query"` | The mode of the progress indicator |
|
||||
| `value` | number | The current progress percentage for determinate indicators |
|
||||
| `bufferValue` | number | The current progress percentage for buffer secondary indicators |
|
||||
Please see the official documentation at https://material.angular.io/components/component/progress-bar
|
||||
@@ -1,51 +1 @@
|
||||
# md-progress-spinner
|
||||
|
||||
`md-progress-spinner` is a component for indicating progress and activity, matching the spec of
|
||||
[Material Design Progress & Activity](https://www.google.com/design/spec/components/progress-activity.html).
|
||||
|
||||
### Progress Modes
|
||||
|
||||
There are two modes:
|
||||
1. Determinate - `<md-progress-spinner mode="determinate">`
|
||||
* Indicates how long an operation will take when the percentage complete is detectable.
|
||||
2. Indeterminate - `<md-progress-spinner mode="indeterminate">` or `<md-spinner>`
|
||||
* Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it
|
||||
will take.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<md-progress-spinner mode="determinate" [value]="myValue"></md-progress-spinner>
|
||||
<md-progress-spinner mode="indeterminate"></md-progress-spinner>
|
||||
<md-spinner></md-spinner>
|
||||
```
|
||||
|
||||
### Theming
|
||||
|
||||
All progress indicators can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the appropriate class.
|
||||
|
||||
Example:
|
||||
|
||||
```html
|
||||
<md-progress-spinner mode="indeterminate" color="primary"></md-progress-spinner>
|
||||
<md-progress-spinner mode="indeterminate" color="accent"></md-progress-spinner>
|
||||
<md-progress-spinner mode="indeterminate" color="warn"></md-progress-spinner>
|
||||
```
|
||||
|
||||
### Accessibility
|
||||
|
||||
* ARIA attributes are applied to the indicator defining the valuemin, valuemax and valuenow attributes.
|
||||
|
||||
### Upcoming work
|
||||
|
||||
* Adding ARIA attribute for progressbar "for".
|
||||
|
||||
### API Summary
|
||||
|
||||
Properties:
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `color` | `"primary"|"accent"|"warn"` | The color palette of the progress indicator |
|
||||
| `mode` | `"determinate"|"indeterminate"` | The mode of the progress indicator |
|
||||
| `value` | number | The current progress percentage for determinate indicators |
|
||||
Please see the official documentation at https://material.angular.io/components/component/progress-spinner
|
||||
+1
-55
@@ -1,55 +1 @@
|
||||
# MdRadio
|
||||
Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.
|
||||
|
||||
|
||||
|
||||
### Examples
|
||||
A basic radio group would have the following markup.
|
||||
```html
|
||||
<md-radio-group>
|
||||
<md-radio-button value="option_1">1</md-radio-button>
|
||||
<md-radio-button value="option_2">2</md-radio-button>
|
||||
</md-radio-group>
|
||||
```
|
||||
|
||||
A dynamic example for use inside a form showing support for `[(ngModel)]`:
|
||||
```html
|
||||
<md-radio-group [(ngModel)]="chosenOption">
|
||||
<md-radio-button *ngFor="let o of options" [value]="o.value">
|
||||
{{o.label}}
|
||||
</md-radio-button>
|
||||
</md-radio-group>
|
||||
```
|
||||
|
||||
## `<md-radio-group>`
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `selected` | `MdRadioButton` | The currently selected button. |
|
||||
| `value` | `any` | The current value for this group. |
|
||||
| `disabled` | `boolean` | Whether the group is disabled. |
|
||||
|
||||
When selection is changed, an event is emitted from the `change` EventEmitter property.
|
||||
|
||||
### Notes
|
||||
The `md-radio-group` component has no button initially selected.
|
||||
|
||||
## `<md-radio-button>`
|
||||
### Properties
|
||||
|
||||
| Name (attribute) | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `id` | `string` | The unique ID of this radio button. |
|
||||
| `name` | `string` | Group name, defaults to parent radio group if present. |
|
||||
| `value` | `any` | The value of this radio button. |
|
||||
| `checked` | `boolean` | Whether the radio is checked. |
|
||||
| `disabled` | `boolean` | Whether the radio is disabled. |
|
||||
| `aria-label` | `string` | Used to set the `aria-label` attribute of the underlying input element. |
|
||||
| `aria-labelledby` | `string` | Used to set the `aria-labelledby` attribute of the underlying input element.
|
||||
If provided, this attribute takes precedence as the element's text alternative. |
|
||||
|
||||
When checked, an event is emitted from the `change` EventEmitter property.
|
||||
|
||||
### Notes
|
||||
* The `md-radio-button` component by default uses the accent color from the theme palette.
|
||||
Please see the official documentation at https://material.angular.io/components/component/radio
|
||||
@@ -1,68 +1 @@
|
||||
# md-select
|
||||
|
||||
`<md-select>` is a form control for selecting a value from a set of options, similar to the native
|
||||
`<select>` element. You can read more about selects in the
|
||||
[Material Design spec](https://material.google.com/components/menus.html).
|
||||
|
||||
### Not yet implemented
|
||||
|
||||
- Multi-select support
|
||||
- Option groups
|
||||
- Select headers
|
||||
|
||||
## Usage
|
||||
|
||||
### Simple select
|
||||
|
||||
In your template, create an `md-select` element. For each option you'd like in your select, add an
|
||||
`md-option` tag. The value property of each option dictates the value that will be set in the select's
|
||||
form control when that option is selected. What is between the `md-option` tags is what will be
|
||||
visibly displayed in the list. Note that you can disable items by adding the `disabled` boolean
|
||||
attribute or binding to it.
|
||||
|
||||
*my-comp.html*
|
||||
```html
|
||||
<md-select placeholder="State">
|
||||
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
|
||||
</md-select>
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/select/basic-select-closed.png">
|
||||
<img src="https://material.angularjs.org/material2_assets/select/basic-select-open.png">
|
||||
|
||||
### Getting and setting the select value
|
||||
|
||||
The select component is set up as a custom value accessor, so you can manipulate the select's value using
|
||||
any of the form directives from the core `FormsModule` or `ReactiveFormsModule`: `ngModel`, `formControl`, etc.
|
||||
|
||||
*my-comp.html*
|
||||
```html
|
||||
<md-select placeholder="State" [(ngModel)]="myState">
|
||||
<md-option *ngFor="let state of states" [value]="state.code">{{ state.name }}</md-option>
|
||||
</md-select>
|
||||
```
|
||||
|
||||
*my-comp.ts*
|
||||
```ts
|
||||
class MyComp {
|
||||
myState = 'AZ';
|
||||
states = [{code: 'AL', name: 'Alabama'}...];
|
||||
}
|
||||
```
|
||||
|
||||
Output:
|
||||
|
||||
<img src="https://material.angularjs.org/material2_assets/select/value-select-closed.png">
|
||||
<img src="https://material.angularjs.org/material2_assets/select/value-select-open.png">
|
||||
|
||||
### Accessibility
|
||||
|
||||
The select adds role="listbox" to the main select element and role="option" to each option. It also adds the "aria-owns", "aria-disabled",
|
||||
"aria-label", "aria-required", and "aria-invalid" attributes as appropriate to the select.
|
||||
|
||||
#### Keyboard events:
|
||||
- <kbd>DOWN_ARROW</kbd>: Focus next option
|
||||
- <kbd>UP_ARROW</kbd>: Focus previous option
|
||||
- <kbd>ENTER</kbd> or <kbd>SPACE</kbd>: Select focused item
|
||||
Please see the official documentation at https://material.angular.io/components/component/select
|
||||
@@ -1,66 +1 @@
|
||||
# MdSlideToggle
|
||||
`MdSlideToggle` is a two-state control, which can be also called `switch`
|
||||
|
||||
### Screenshots
|
||||
|
||||
|
||||
## `<md-slide-toggle>`
|
||||
### Bound Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `disabled` | boolean | Disables the `slide-toggle` |
|
||||
| `color` | `"primary" | "accent" | "warn"` | The color palette of the `slide-toggle` |
|
||||
| `checked` | boolean | Sets the value of the `slide-toggle` |
|
||||
|
||||
### Events
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `change` | boolean | Event will be emitted on every value change.<br/>It emits the new `checked` value. |
|
||||
|
||||
### Examples
|
||||
A basic slide-toggle would have the following markup.
|
||||
```html
|
||||
<md-slide-toggle [(ngModel)]="slideToggleModel">
|
||||
Default Slide Toggle
|
||||
</md-slide-toggle>
|
||||
```
|
||||
|
||||
Slide toggle can be also disabled.
|
||||
```html
|
||||
<md-slide-toggle disabled>
|
||||
Disabled Slide Toggle
|
||||
</md-slide-toggle>
|
||||
```
|
||||
|
||||
The `slide-toggle` can be also set to checked without a `ngModel`
|
||||
```html
|
||||
<md-slide-toggle [checked]="isChecked">
|
||||
Input Binding
|
||||
</md-slide-toggle>
|
||||
```
|
||||
|
||||
You may also want to listen on changes of the `slide-toggle`<br/>
|
||||
The `slide-toggle` always emits the new value to the event binding `(change)`
|
||||
```html
|
||||
<md-slide-toggle (change)="printValue($event)">
|
||||
Prints Value on Change
|
||||
</md-slide-toggle>
|
||||
```
|
||||
|
||||
## Theming
|
||||
A slide-toggle is default using the `accent` palette for its styling.
|
||||
|
||||
Modifying the color on a `slide-toggle` can be easily done, by using the following markup.
|
||||
```html
|
||||
<md-slide-toggle color="primary">
|
||||
Primary Slide Toggle
|
||||
</md-slide-toggle>
|
||||
```
|
||||
|
||||
The color can be also set dynamically by using a property binding.
|
||||
```html
|
||||
<md-slide-toggle [color]="myColor">
|
||||
Dynamic Color
|
||||
</md-slide-toggle>
|
||||
```
|
||||
Please see the official documentation at https://material.angular.io/components/component/slide-toggle
|
||||
+1
-150
@@ -1,150 +1 @@
|
||||
# md-slider
|
||||
|
||||
`md-slider` is a component that allows users to select from a range of values by moving the slider
|
||||
thumb. It is similar in behavior to the native `<input type="range">` element. You can read more
|
||||
about the slider in the [Material Design spec](https://material.google.com/components/sliders.html).
|
||||
|
||||
Simple example:
|
||||
```html
|
||||
<md-slider></md-slider>
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
### Changing the min, max, step, and initial value
|
||||
|
||||
By default the minimum value of the slider is `0`, the maximum value is `100`, and the thumb moves
|
||||
in increments of `1`. These values can be changed by setting the `min`, `max`, and `step` attributes
|
||||
respectively. The initial value is set to the minimum value unless otherwise specified.
|
||||
|
||||
```html
|
||||
<md-slider min="1" max="5" step="0.5" value="1.5"></md-slider>
|
||||
```
|
||||
|
||||
### Setting the orientation
|
||||
|
||||
By default sliders are horizontal with the minimum value on the left and the maximum value on the
|
||||
right. The `vertical` attribute can be added to a slider to make it vertical with the minimum value
|
||||
on bottom and the maximum value on top.
|
||||
|
||||
```html
|
||||
<md-slider vertical></md-slider>
|
||||
```
|
||||
|
||||
An `invert` attribute is also available which can be specified to flip the axis that the thumb moves
|
||||
along. An inverted horizontal slider will have the minimum value on the right and the maximum value
|
||||
on the left, while an inverted vertical slider will have the minimum value on top and the maximum
|
||||
value on bottom.
|
||||
|
||||
```html
|
||||
<md-slider invert></md-slider>
|
||||
```
|
||||
|
||||
### Adding a thumb label
|
||||
|
||||
By default the exact selected value of a slider is not visible to the user. However, this value can
|
||||
be added to the thumb by adding the `thumbLabel` attribute.
|
||||
|
||||
The [material design spec](https://material.google.com/components/sliders.html) recommends using the
|
||||
`thumbLabel` attribute (along with `tickInterval="1"`) only for sliders that are used to display a
|
||||
discrete value (such as a 1-5 rating).
|
||||
|
||||
```html
|
||||
<md-slider thumbLabel tickInterval="1"></md-slider>
|
||||
```
|
||||
|
||||
### Adding ticks
|
||||
|
||||
By default a sliders do not show tick marks along the thumb track. They can be enabled using the
|
||||
`tickInterval` attribute. The value of `tickInterval` should be a number representing the number
|
||||
of steps between between ticks. For example a `tickInterval` of `3` with a `step` of `4` will draw
|
||||
tick marks at every `3` steps, which is the same as every `12` values.
|
||||
|
||||
```html
|
||||
<md-slider step="4" tickInterval="3"></md-slider>
|
||||
```
|
||||
|
||||
The `tickInterval` can also be set to `auto` which will automatically choose the number of steps
|
||||
such that there is at least `30px` of space between ticks.
|
||||
|
||||
```html
|
||||
<md-slider tickInterval="auto"></md-slider>
|
||||
```
|
||||
|
||||
The slider will always show a tick at the beginning and end of the track. If the remaining space
|
||||
doesn't add up perfectly the last interval will be shortened or lengthened so that the tick can be
|
||||
shown at the end of the track.
|
||||
|
||||
The [material design spec](https://material.google.com/components/sliders.html) recommends using the
|
||||
`tickInterval` attribute (set to `1` along with the `thumbLabel` attribute) only for sliders that
|
||||
are used to display a discrete value (such as a 1-5 rating).
|
||||
|
||||
### Disabling the slider
|
||||
|
||||
The `disabled` attribute can be used to disable the slider, preventing the user from changing the
|
||||
value.
|
||||
|
||||
```html
|
||||
<md-slider disabled value="5"></md-slider>
|
||||
```
|
||||
|
||||
### Value binding
|
||||
|
||||
`md-slider` supports both 1-way binding and 2-way binding via `ngModel`. It also emits a `change`
|
||||
event when the value changes due to user interaction.
|
||||
|
||||
```html
|
||||
<md-slider [value]="myValue" (change)="onChange()"></md-slider>
|
||||
```
|
||||
|
||||
```html
|
||||
<md-slider [(ngModel)]="myValue"></md-slider>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
The slider has the following keyboard bindings:
|
||||
|
||||
| Key | Action |
|
||||
| --- | --- |
|
||||
| Right arrow | Increment the slider value by one step. (Decrement in right-to-left-languages). |
|
||||
| Up arrow | Increment the slider value by one step. |
|
||||
| Left arrow | Decrement the slider value by one step. (Increment in right-to-left-languages). |
|
||||
| Down arrow | Decrement the slider value by one step. |
|
||||
| Page up | Increment the slider value by 10 steps. |
|
||||
| Page down | Decrement the slider value by 10 steps. |
|
||||
| End | Set the value to the maximum possible. |
|
||||
| Home | Set the value to the minimum possible. |
|
||||
|
||||
## Internationalization
|
||||
|
||||
In right-to-left languages the horizontal slider has the minimum value on the right and the maximum
|
||||
value on the left by default. The meaning of the left and right arrow keys is also swapped in
|
||||
right-to-left languages.
|
||||
|
||||
## API Summary
|
||||
|
||||
### Inputs
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `min` | number | Optional, the minimum number for the slider. Default = `0`. |
|
||||
| `max` | number | Optional, the maximum number for the slider. Default = `100`. |
|
||||
| `step` | number | Optional, declares where the thumb will snap to. Default = `1`. |
|
||||
| `value` | number | Optional, the value to start the slider at. |
|
||||
| `tickInterval` | `"auto"` \| number | Optional, how many steps between tick marks. |
|
||||
| `invert` | boolean | Optional, whether to invert the axis the thumb moves along. |
|
||||
| `vertical` | boolean | Optional, whether the slider should be oriented vertically. |
|
||||
| `disabled` | boolean | Optional, whether or not the slider is disabled. Default = `false`. |
|
||||
|
||||
### Outputs
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `change` | Emitted when the value changes due to user interaction. |
|
||||
|
||||
|
||||
## Future work & open questions
|
||||
|
||||
* Update focused, disabled, and `value=min` states to match spec.
|
||||
* Should there be an option to not force the end tick to be shown?
|
||||
Please see the official documentation at https://material.angular.io/components/component/slider
|
||||
@@ -1,37 +1 @@
|
||||
# MdSnackBar
|
||||
`MdSnackBar` is a service, which opens snack bar notifications in the view.
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `open(message: string, actionLabel: string, config: MdSnackBarConfig): MdSnackBarRef<SimpleSnackBar>` | Creates and opens a simple snack bar notification matching material spec. |
|
||||
| `openFromComponent(component: ComponentType<T>, config: MdSnackBarConfig): MdSnackBarRef<T>` | Creates and opens a snack bar notification with a custom component as content. |
|
||||
|
||||
### Config
|
||||
|
||||
| Key | Description |
|
||||
| --- | --- |
|
||||
| `viewContainerRef: ViewContainerRef` | The view container ref to attach the snack bar to. |
|
||||
| `role: AriaLivePoliteness = 'assertive'` | The politeness level to announce the snack bar with. |
|
||||
| `announcementMessage: string` | The message to announce with the snack bar. |
|
||||
| `duration: number` | The length of time in milliseconds to wait before autodismissing the snack bar. |
|
||||
|
||||
|
||||
### Example
|
||||
The service can be injected in a component.
|
||||
```ts
|
||||
@Component({
|
||||
selector: 'my-component',
|
||||
providers: [MdSnackBar]
|
||||
})
|
||||
export class MyComponent {
|
||||
|
||||
constructor(snackBar: MdSnackBar) {}
|
||||
|
||||
failedAttempt() {
|
||||
this.snackBar.open('It didn\'t quite work!', 'Try Again');
|
||||
}
|
||||
|
||||
}
|
||||
```
|
||||
Please see the official documentation at https://material.angular.io/components/component/snack-bar
|
||||
+1
-64
@@ -1,64 +1 @@
|
||||
# MdTabGroup
|
||||
Tab groups allow the user to organize their content by labels such that only one tab is visible at any given time.
|
||||
|
||||
## `<md-tab-group>`
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `selectedIndex` | `number` | The index of the currently active tab. |
|
||||
|
||||
### Events
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `focusChange` | `Event` | Fired when focus changes from one label to another |
|
||||
| `selectChange` | `Event` | Fired when the selected tab changes |
|
||||
|
||||
### Basic use
|
||||
A basic tab group would have the following markup.
|
||||
```html
|
||||
<md-tab-group>
|
||||
<md-tab label="One">
|
||||
<h1>Some tab content</h1>
|
||||
<p>...</p>
|
||||
</md-tab>
|
||||
<md-tab label="Two">
|
||||
<h1>Some more tab content</h1>
|
||||
<p>...</p>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
```
|
||||
|
||||
You can specifiy the active tab by using the `selectedIndex` property.
|
||||
|
||||
```html
|
||||
<md-tab-group [selectedIndex]="1">
|
||||
...
|
||||
</md-tab-group>
|
||||
```
|
||||
|
||||
**Note**: The index always starts counting from `zero`.
|
||||
|
||||
|
||||
### Tabs with label templates
|
||||
If you want to use an arbitrary template for your tab, you can use the `md-tab-label` directive to
|
||||
provide the label template:
|
||||
```html
|
||||
<md-tab-group>
|
||||
<md-tab>
|
||||
<template md-tab-label>
|
||||
The <em>best</em> pasta
|
||||
</template>
|
||||
<h1>Best pasta restaurants</h1>
|
||||
<p>...</p>
|
||||
</md-tab>
|
||||
<md-tab>
|
||||
<template md-tab-label>
|
||||
<md-icon>thumb_down</md-icon> The worst sushi
|
||||
</template>
|
||||
<h1>Terrible sushi restaurants</h1>
|
||||
<p>...</p>
|
||||
</md-tab>
|
||||
</md-tab-group>
|
||||
```
|
||||
Please see the official documentation at https://material.angular.io/components/component/tabs
|
||||
@@ -1,68 +1 @@
|
||||
# MdToolbar
|
||||
`MdToolbar` is a vertical aligned bar, which can hold the application title or actions.
|
||||
|
||||
### Screenshots
|
||||
|
||||
|
||||
## `<md-toolbar>`
|
||||
### Bound Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `color` | `"primary" | "accent" | "warn"` | The color palette for the toolbar |
|
||||
|
||||
### Notes
|
||||
The `md-toolbar` component will use by default the background palette.
|
||||
|
||||
### Examples
|
||||
A basic toolbar would have the following markup.
|
||||
```html
|
||||
<md-toolbar [color]="myColor">
|
||||
<span>My Application Title</span>
|
||||
</md-toolbar>
|
||||
```
|
||||
|
||||
Toolbars can also have multiple rows.<br/>
|
||||
Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `<md-toolbar-row>` elements.
|
||||
|
||||
```html
|
||||
<md-toolbar [color]="myColor">
|
||||
<span>First Row</span>
|
||||
|
||||
<md-toolbar-row>
|
||||
<span>Second Row</span>
|
||||
</md-toolbar-row>
|
||||
|
||||
<md-toolbar-row>
|
||||
<span>Third Row</span>
|
||||
</md-toolbar-row>
|
||||
</md-toolbar>
|
||||
```
|
||||
|
||||
### Alignment
|
||||
The alignment inside of a toolbar row can be easily done by using the flexbox layout.<br/>
|
||||
For example, the following markup aligns the items on the `right`.
|
||||
|
||||
Custom HTML
|
||||
```html
|
||||
<md-toolbar color="primary">
|
||||
<span>Application Title</span>
|
||||
|
||||
<!-- This fills the remaining space of the current row -->
|
||||
<span class="example-fill-remaining-space"></span>
|
||||
|
||||
<span>Right Aligned Text</span>
|
||||
</md-toolbar>
|
||||
```
|
||||
|
||||
Custom SCSS
|
||||
```scss
|
||||
.example-fill-remaining-space {
|
||||
// This fills the remaining space, by using flexbox.
|
||||
// Every toolbar row uses a flexbox row layout.
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
```
|
||||
|
||||
Output
|
||||
|
||||
Please see the official documentation at https://material.angular.io/components/component/toolbar
|
||||
@@ -1,28 +1 @@
|
||||
# MdTooltip
|
||||
Tooltip allows the user to specify text to be displayed when the mouse hovers over an element.
|
||||
|
||||
The positions `before` and `after` should be used instead of `left` and `right` respectively when the tooltip positioning should change depending on the HTML dir global attribute for left-to-right or right-to-left layout.
|
||||
|
||||
### Examples
|
||||
A button with a tooltip
|
||||
```html
|
||||
<button mdTooltip="some message" mdTooltipPosition="below">Button</button>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## `[mdTooltip]`
|
||||
### Properties
|
||||
|
||||
| Name | Type | Description |
|
||||
| --- | --- | --- |
|
||||
| `mdTooltip` | `string` | The message to be displayed. |
|
||||
| `mdTooltipPosition` | `"before"|"after"|"above"|"below"|"left"|"right"` | The position of the tooltip. |
|
||||
|
||||
### Methods
|
||||
|
||||
| Name | Description |
|
||||
| --- | --- |
|
||||
| `show` | Displays the tooltip. |
|
||||
| `hide` | Removes the tooltip. |
|
||||
| `toggle` | Displays or hides the tooltip. |
|
||||
Please see the official documentation at https://material.angular.io/components/component/tooltip
|
||||
Reference in New Issue
Block a user