mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
docs: add remaining component overviews (#2338)
* snackbar overview * menu overview * list overview * slide-toggle * sidenav overview * progress overview * radio overview * toolbar overview * slider overview * select overview * nav-tabs * chips * consistency * input edits * fix typo in radio * correct radio overview example name * mention hammer, fix typos
This commit is contained in:
Jeremy Elbourn
@@ -62,4 +62,4 @@
|
||||
</md-chip-list>
|
||||
</md-card-content>
|
||||
</md-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
Button-toggles are on/off toggles with the appearance of a button. These toggles can be configured
|
||||
to behave as either radio-buttons or checkboxes. While they can be standalone, they are typically
|
||||
part of a `md-button-toggle-group`.
|
||||
`<md-button-toggle>` are on/off toggles with the appearance of a button. These toggles can be
|
||||
configured to behave as either radio-buttons or checkboxes. While they can be standalone, they are
|
||||
typically part of a `md-button-toggle-group`.
|
||||
|
||||
|
||||
<!-- example(button-toggle-overview) -->
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
Cards are content containers for text, photos, and actions. Cards are intended to provide
|
||||
`<md-card>` is a content container for text, photos, and actions. Cards are intended to provide
|
||||
information on a single subject.
|
||||
|
||||
<!-- example(card-overview) -->
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
`<md-checkbox>` provides the same functionality as a native `<input type="checkbox">`
|
||||
enhanced Material Design styling and animations.
|
||||
enhanced with Material Design styling and animations.
|
||||
|
||||
<!-- example(checkbox-overview) -->
|
||||
|
||||
|
||||
@@ -0,0 +1,30 @@
|
||||
`<md-chip-list>` displays a list of values as individual chips.
|
||||
|
||||
<!-- example(chips-overview) -->
|
||||
|
||||
_Note: chips are still early in their development and more features are being actively worked on._
|
||||
|
||||
```html
|
||||
<md-chip-list>
|
||||
<md-chip>Papadum</md-chip>
|
||||
<md-chip>Naan</md-chip>
|
||||
<md-chip>Dal</md-chip>
|
||||
</md-chip-list>
|
||||
```
|
||||
|
||||
### Unstyled chips
|
||||
By default, `<md-chip>` has Material Design styles applied. For a chip with no styles applied,
|
||||
use `<md-basic-chip>`. You can then customize the chip appearance by adding your own CSS.
|
||||
|
||||
### Selection
|
||||
Chips can be selected via the `selected` property. Selection can be disabled by setting
|
||||
`selectable` to `false` on the `<md-chip-list>`.
|
||||
|
||||
### Keyboard interation
|
||||
Users can move through the chips using the arrow keys and select them with the space.
|
||||
|
||||
|
||||
### Theming
|
||||
The color of an `<md-chip>` can be changed by using the `color` property. By default, chips
|
||||
use a neutral background color based on the current theme (light or dark). This can be changed to
|
||||
`'primary'`, `'accent'`, or `'warn'`.
|
||||
@@ -1,12 +1,8 @@
|
||||
# md-grid-list
|
||||
|
||||
`md-grid-list` is an alternative list view that arranges cells into grid-based layout.
|
||||
`md-grid-list` is a two-dimensional list view that arranges cells into grid-based layout.
|
||||
See Material Design spec [here](https://www.google.com/design/spec/components/grid-lists.html).
|
||||
|
||||
<!-- example(grid-list-overview) -->
|
||||
|
||||
## Usage
|
||||
|
||||
### Setting the number of columns
|
||||
|
||||
An `md-grid-list` must specify a `cols` attribute which sets the number of columns in the gird. The
|
||||
|
||||
+15
-24
@@ -1,23 +1,14 @@
|
||||
# md-icon
|
||||
|
||||
`md-icon` makes it easier to use _vector-based_ icons in your app. This directive supports both
|
||||
icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.).
|
||||
|
||||
<!-- example(icon-example) -->
|
||||
|
||||
## Usage
|
||||
|
||||
### Registering new icons
|
||||
### Registering icons
|
||||
|
||||
`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.
|
||||
|
||||
In order to prevent XSS vulnerabilities, any URLs passed to the `MdIconRegistry` must be marked as
|
||||
trusted resource URLs by using Angular's `DomSanitizer` service.
|
||||
|
||||
### Font icons
|
||||
|
||||
#### Ligatures
|
||||
### Font icons with ligatures
|
||||
|
||||
Some fonts are designed to show icons by using
|
||||
[ligatures](https://en.wikipedia.org/wiki/Typographic_ligature), for example by rendering the text
|
||||
@@ -31,7 +22,7 @@ You can specify a different font by setting the `fontSet` input to either the CS
|
||||
use the desired font, or to an alias previously registered with
|
||||
`MdIconRegistry.registerFontClassAlias`.
|
||||
|
||||
#### Font icons via CSS
|
||||
### Font icons with 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.
|
||||
@@ -48,14 +39,17 @@ explicitly set by calling `MdIconRegistry.setDefaultFontSetClass`.
|
||||
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.
|
||||
SVG content is the CSS
|
||||
[currentColor](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentColor_keyword)
|
||||
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.
|
||||
|
||||
#### Icons from URLs
|
||||
In order to prevent XSS vulnerabilities, any SVG URLs passed to the `MdIconRegistry` must be
|
||||
marked as trusted resource URLs by using Angular's `DomSanitizer` service.
|
||||
|
||||
SVG icons can be used either by directly specifying the icon's URL, or by associating an icon name
|
||||
with a URL and then referring to the name. To use a URL directly, set the `svgSrc` input.
|
||||
Also 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.
|
||||
|
||||
#### Named icons
|
||||
|
||||
@@ -78,14 +72,11 @@ as for individually registered icons.
|
||||
Multiple icon sets can be registered in the same namespace. Requesting 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 desired palette name.
|
||||
By default, icons will use the current font color (`currentColor`). this color can be changed to
|
||||
match the current theme's colors using the `color` attribute. This can be changed to
|
||||
`'primary'`, `'accent'`, or `'warn'`.
|
||||
|
||||
### Accessibility
|
||||
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
# md-input-container
|
||||
`<md-input-container>` is a wrapper for native `input` and `textarea` elements. This container
|
||||
applies Material Design styles and behavior while still allowing direct access to the underlying
|
||||
native element.
|
||||
|
||||
Inputs are the basic input component of Material 2. 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 that is used to add material design styles and
|
||||
behavior. The native element wrapped by the `md-input-container` must be marked with the `md-input`
|
||||
directive.
|
||||
The native element wrapped by the `md-input-container` must be marked with the `mdInput` directive.
|
||||
|
||||
<!-- example(input-overview) -->
|
||||
|
||||
## 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
|
||||
elements inside `md-input-container` as well. This includes Angular directives 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
|
||||
### Supported `input` types
|
||||
|
||||
The following [input types](http://www.w3schools.com/TAGs/att_input_type.asp) can be used with
|
||||
`md-input-container`:
|
||||
The following [input types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) can
|
||||
be used with `md-input-container`:
|
||||
* date
|
||||
* datetime-local
|
||||
* email
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
`<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.
|
||||
|
||||
<!-- example(list-overview) -->
|
||||
|
||||
|
||||
### Simple lists
|
||||
|
||||
An `<md-list>` element contains a number of `<md-list-item>` elements.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Navigation lists
|
||||
|
||||
Use `md-nav-list` tags for navigation lists (i.e. lists that have anchor tags).
|
||||
|
||||
Simple navigation lists can use the `md-list-item` attribute on anchor tag elements directly:
|
||||
|
||||
```html
|
||||
<md-nav-list>
|
||||
<a md-list-item href="..." *ngFor="let link of links"> {{ link }} </a>
|
||||
</md-nav-list>
|
||||
```
|
||||
|
||||
For more complex navigation lists (e.g. with more than one target per item), wrap the anchor
|
||||
element in an `<md-list-item>`.
|
||||
|
||||
```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>
|
||||
```
|
||||
|
||||
### Multi-line lists
|
||||
For lists that require multiple lines per item, annotate each line with an `md-line` attribute.
|
||||
Whichever heading tag is appropriate for your DOM hierarchy should be used (not necesarily `<h3>`
|
||||
as shown in the example).
|
||||
|
||||
```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.content}} </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.content}} </p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
### 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.content}} </span>
|
||||
</p>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
|
||||
### Lists with multiple sections
|
||||
|
||||
Subheader can be added to a list by annotating a heading tag with an `md-subheader` attribute.
|
||||
To add a divider, use `<md-divider>`.
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,62 @@
|
||||
`<md-menu>` is a floating panel containing list of options.
|
||||
|
||||
<!-- example(menu-overview) -->
|
||||
|
||||
By itself, the `<md-menu>` element does not render anything. The menu is attached to and opened
|
||||
via application of the `mdMenuTriggerFor` directive:
|
||||
```ts
|
||||
<md-menu #appMenu="mdMenu">
|
||||
<button md-menu-item> Settings </button>
|
||||
<button md-menu-item> Help </button>
|
||||
</md-menu>
|
||||
|
||||
<button md-icon-button [mdMenuTriggerFor]="appMenu">
|
||||
<md-icon>more_vert</md-icon>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Toggling the menu programmatically
|
||||
The menu exposes an API to open/close programmatically. Please note that in this case, an
|
||||
`mdMenuTriggerFor` directive is still necessary to attach the menu to a trigger element in the DOM.
|
||||
|
||||
```ts
|
||||
class MyComponent {
|
||||
@ViewChild(MdMenuTrigger) trigger: MdMenuTrigger;
|
||||
|
||||
someMethod() {
|
||||
this.trigger.openMenu();
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Icons
|
||||
Menus 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>
|
||||
```
|
||||
|
||||
### Customizing menu position
|
||||
|
||||
By default, the menu will display after and below its trigger. The position can be changed
|
||||
using the `x-position` (`before | after`) and `y-position` (`above | below`) attributes.
|
||||
|
||||
|
||||
### Keyboard interaction
|
||||
- <kbd>DOWN_ARROW</kbd>: Focuses the next menu item
|
||||
- <kbd>UP_ARROW</kbd>: Focuses previous menu item
|
||||
- <kbd>ENTER</kbd>: Activates the focused menu item
|
||||
@@ -0,0 +1,30 @@
|
||||
`<md-progress-bar>` is a horizontal progress-bar for indicating progress and activity.
|
||||
|
||||
<!-- example(progress-bar-overview) -->
|
||||
|
||||
|
||||
### Progress mode
|
||||
The progress-bar supports four modes.
|
||||
|
||||
| Mode | Description |
|
||||
|---------------|----------------------------------------------------------------------------------|
|
||||
| determinate | Standard progress bar, fills from 0% to 100% |
|
||||
| indeterminate | Indicates that something is happening without conveying a discrete progress |
|
||||
| buffer | Dual-progress mode, typically showing both video download and playback progress |
|
||||
| query | Dual-stage mode, typically showing sending a request and downloading a response |
|
||||
|
||||
The default mode is "determinate". In this mode, the progress is set via the `value` property,
|
||||
which can be a whole number between 0 and 100.
|
||||
|
||||
In "buffer" mode, `value` determines the progress of the primary bar while the `bufferValue` is
|
||||
used to show the additional buffering progress.
|
||||
|
||||
In "query" mode, the progress-bar renders as an inverted "indeterminate" bar. Once the response
|
||||
progress is available, the `mode` should be changed to determinate to convey the progress.
|
||||
|
||||
In both "indeterminate" and "query" modes, the `value` property is ignored.
|
||||
|
||||
|
||||
### Theming
|
||||
The color of a progress-bar can be changed by using the `color` property. By default, progress-bars
|
||||
use the theme's primary color. This can be changed to `'accent'` or `'warn'`.
|
||||
@@ -0,0 +1,23 @@
|
||||
`<md-progress-spinner>` and `<md-spinner>` are a circular indicators of progress and activity.
|
||||
|
||||
<!-- example(progress-spinner-overview) -->
|
||||
|
||||
### Progress mode
|
||||
The progress-spinner supports two modes, "determinate" and "indeterminate".
|
||||
The `<md-spinner>` component is an alias for `<md-progress-spinner mode="indeterminate">`.
|
||||
|
||||
| Mode | Description |
|
||||
|---------------|----------------------------------------------------------------------------------|
|
||||
| determinate | Standard progress indicator, fills from 0% to 100% |
|
||||
| indeterminate | Indicates that something is happening without conveying a discrete progress |
|
||||
|
||||
|
||||
The default mode is "determinate". In this mode, the progress is set via the `value` property,
|
||||
which can be a whole number between 0 and 100.
|
||||
|
||||
In "indeterminate" mode, the `value` property is ignored.
|
||||
|
||||
|
||||
### Theming
|
||||
The color of a progress-spinner can be changed by using the `color` property. By default,
|
||||
progress-spinners use the theme's primary color. This can be changed to `'accent'` or `'warn'`.
|
||||
@@ -0,0 +1,29 @@
|
||||
`<md-radio>` provides the same functionality as a native `<input type="radio">` enhanced with
|
||||
Material Design styling and animations.
|
||||
|
||||
<!-- example(radio-overview) -->
|
||||
|
||||
All radio buttons with the same `name` comprise a set from which only one may be selected at a time.
|
||||
|
||||
### Radio-button label
|
||||
The radio-button label is provided as the content to the `<md-checkbox>` element. The label can be
|
||||
positioned before or after the radio-button by setting the `labelPosition` property to `'before'`
|
||||
or `'after'`.
|
||||
|
||||
If you don't want the label to appear next to the radio-button, you can use
|
||||
[`aria-label`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) or
|
||||
[`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to
|
||||
specify an appropriate label.
|
||||
|
||||
|
||||
### Radio groups
|
||||
Radio-buttons should typically be placed inside of an `<md-radio-group>` unless the DOM structure
|
||||
would make that impossible (e.g., radio buttons inside of table cells). The radio-group has a
|
||||
`value` property that reflects the currently selected radio-button inside of the group.
|
||||
|
||||
Individual radio-buttons inside of a radio-group will inherit the `name` of the group.
|
||||
|
||||
|
||||
### Use with `@angular/forms`
|
||||
`<md-radio-group>` is compatible with `@angular/forms` and supports both `FormsModule`
|
||||
and `ReactiveFormsModule`.
|
||||
@@ -0,0 +1,8 @@
|
||||
`<md-select>` is a form control for selecting a value from a set of options, similar to the native
|
||||
`<select>` element.
|
||||
|
||||
<!-- example(select-overview) -->
|
||||
|
||||
### Use with `@angular/forms`
|
||||
`<md-select>` is compatible with `@angular/forms` and supports both `FormsModule`
|
||||
and `ReactiveFormsModule`.
|
||||
@@ -0,0 +1,70 @@
|
||||
`<md-sidenav>` is a panel that can be placed next to or above some primary content. A sidenav is
|
||||
typically used for navigation, but can contain any content.
|
||||
|
||||
<!-- example(sidenav-overview) -->
|
||||
|
||||
The sidenav and its associated content live inside of an `<md-sidenav-container>`:
|
||||
```html
|
||||
<md-sidenav-container>
|
||||
<md-sidenav>
|
||||
<!-- sidenav content -->
|
||||
</md-sidenav>
|
||||
|
||||
<!-- primary content -->
|
||||
</md-sidenav-container>
|
||||
```
|
||||
|
||||
A sidenav container may contain one or two `<md-sidenav>` elements. When there are two
|
||||
`<md-sidenav>` elements, each must be placed on a different side of the container.
|
||||
See the section on positioning below.
|
||||
|
||||
### Sidenav mode
|
||||
The sidenav can render in one of three different ways based on the `mode` property.
|
||||
|
||||
| Mode | Description |
|
||||
|------|-------------------------------------------------------------------------------------------|
|
||||
| over | Sidenav floats _over_ the primary content, which is covered by a backdrop |
|
||||
| push | Sidenav _pushes_ the primary content out of its way, also covering it with a backdrop |
|
||||
| side | Sidenav appears _side-by-side_ with the primary content |
|
||||
|
||||
|
||||
### Positioning the sidenav
|
||||
The `align` property determines whether the sidenav appears at the `"start"` or `"end"` of the
|
||||
container. This is affected by the current text direction ("ltr" or "rtl"). By default, the sidenav
|
||||
appears at the start of the container.
|
||||
|
||||
|
||||
### Sizing the sidenav
|
||||
The `<md-sidenav>` will, by default, fit the size of its content. The width can be explicitly set
|
||||
via CSS:
|
||||
|
||||
```css
|
||||
md-sidenav {
|
||||
width: 200px;
|
||||
}
|
||||
```
|
||||
|
||||
Try to avoid percent based width as `resize` events are not (yet) supported.
|
||||
|
||||
For a fullscreen sidenav, the recommended approach is set up the DOM such that the
|
||||
`<md-sidenav-container>` can naturally take up the full space:
|
||||
|
||||
```html
|
||||
<app>
|
||||
<md-sidenav-container>
|
||||
<md-sidenav mode="side" opened="true">Drawer content</md-sidenav>
|
||||
<div class="my-content">Main content</div>
|
||||
</md-sidenav-container>
|
||||
</app>
|
||||
```
|
||||
```css
|
||||
html, body, material-app, md-sidenav-container, .my-content {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
### FABs inside sidenav
|
||||
For a sidenav with a FAB (or other floating element), the recommended approach is to place the FAB
|
||||
outside of the scrollable region and absolutely position it.
|
||||
@@ -0,0 +1,24 @@
|
||||
`<md-slide-toggle>` is an on/off control that can be toggled via clicking or dragging.
|
||||
|
||||
<!-- example(slide-toggle-overview) -->
|
||||
|
||||
The slide-toggle behaves similarly to a checkbox, though it does not support an `indeterminate`
|
||||
state like `<md-checkbox>`.
|
||||
|
||||
_Note: the sliding behavior for this component requires that HammerJS is loaded on the page._
|
||||
|
||||
### Slide-toggle label
|
||||
The slide-toggle label is provided as the content to the `<md-slide-toggle>` element.
|
||||
|
||||
If you don't want the label to appear next to the slide-toggle, you can use
|
||||
[`aria-label`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-label) or
|
||||
[`aria-labelledby`](https://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby) to
|
||||
specify an appropriate label.
|
||||
|
||||
### Use with `@angular/forms`
|
||||
`<md-slide-toggle>` is compatible with `@angular/forms` and supports both `FormsModule`
|
||||
and `ReactiveFormsModule`.
|
||||
|
||||
### Theming
|
||||
The color of a `<md-slide-toggle>` can be changed by using the `color` property. By default,
|
||||
slide-toggles use the theme's accent color. This can be changed to `'primary'` or `'warn'`.
|
||||
@@ -0,0 +1,87 @@
|
||||
`<md-slider>` allows for the selection of a value from a range via mouse, touch, or keyboard,
|
||||
similar to `<input type="range">`.
|
||||
|
||||
<!-- example(slider-overview) -->
|
||||
|
||||
_Note: the sliding behavior for this component requires that HammerJS is loaded on the page._
|
||||
|
||||
### Selecting a 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>
|
||||
```
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
### 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>
|
||||
```
|
||||
|
||||
### Tick marks
|
||||
By default, sliders do not show tick marks along the thumb track. This 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).
|
||||
|
||||
|
||||
### Keyboard interaction
|
||||
The slider has the following keyboard bindings:
|
||||
|
||||
| Key | Action |
|
||||
|-------------|------------------------------------------------------------------------------------|
|
||||
| Right arrow | Increment the slider value by one step (decrements in RTL). |
|
||||
| Up arrow | Increment the slider value by one step. |
|
||||
| Left arrow | Decrement the slider value by one step (decrements in RTL). |
|
||||
| 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. |
|
||||
@@ -0,0 +1,47 @@
|
||||
`MdSnackBar` is a service for displaying snack-bar notifications.
|
||||
|
||||
<!-- example(snackbar-overview) -->
|
||||
|
||||
### Opening a snack-bar
|
||||
A snack-bar can contain either a string message or a given component.
|
||||
```ts
|
||||
// Simple message.
|
||||
let snackBarRef = snackBar.open('Message archived');
|
||||
|
||||
// Simple message with an action.
|
||||
let snackBarRef = snackBar.open('Message archived', 'Undo');
|
||||
|
||||
// Load the given component into the snack-bar.
|
||||
let snackBarRef = snackbar.openFromComponent(MessageArchivedComponent);
|
||||
```
|
||||
|
||||
In either case, an `MdSnackBarRef` is returned. This can be used to dismiss the snack-bar or to
|
||||
recieve notification of when the snack-bar is dismissed. For simple messages with an action, the
|
||||
`MdSnackBarRef` exposes an observable for when the action is triggered.
|
||||
|
||||
```ts
|
||||
snackBarRef.afterDismissed().subscribe(() => {
|
||||
console.log('The snack-bar was dismissed');
|
||||
});
|
||||
|
||||
|
||||
snackBarRef.onAction().subscribe(() => {
|
||||
console.log('The snack-bar action was triggered!');
|
||||
});
|
||||
|
||||
snackBarRef.dismiss();
|
||||
```
|
||||
|
||||
### Dismissal
|
||||
A snack-bar can be dismissed manually by calling the `dismiss` method on the `MdSnackBarRef`
|
||||
returned from the call to `open`.
|
||||
|
||||
Only one snack-bar can ever be opened at one time. If a new snackbar is opened while a previous
|
||||
message is still showing, the older message will be automatically dismissed.
|
||||
|
||||
A snack-bar can also be given a duration via the optional configuration object:
|
||||
```ts
|
||||
snackbar.open('Message archived', 'Undo', {
|
||||
duration: 3000
|
||||
});
|
||||
```
|
||||
@@ -1,4 +1,4 @@
|
||||
The Angular Material tab group helps organize content into separate views where only one view can be
|
||||
Angular Material tabs organize content into separate views where only one view can be
|
||||
visible at a time. Each tab's label is shown in the tab header and the active
|
||||
tab's label is designated with the animated ink bar. When the list of tab labels exceeds the width
|
||||
of the header, pagination controls appear to let the user scroll left and right across the labels.
|
||||
@@ -57,4 +57,25 @@ For more complex labels, add a template with the `md-tab-label` directive inside
|
||||
|
||||
By default, the tab group will not change its height to the height of the currently active tab. To
|
||||
change this, set the `dynamicHeight` input to true. The tab body will animate its height according
|
||||
to the height of the active tab.
|
||||
to the height of the active tab.
|
||||
|
||||
### Tabs and navigation
|
||||
While `<md-tab-group>` is used to switch between views within a single route, `<nav md-tab-nav-bar>`
|
||||
provides a tab-like UI for navigating between routes.
|
||||
```html
|
||||
<nav md-tab-nav-bar>
|
||||
<a md-tab-link
|
||||
*ngFor="let link of navLinks"
|
||||
[routerLink]="link"
|
||||
routerLinkActive #rla="routerLinkActive"
|
||||
[active]="rla.isActive">
|
||||
{{tabLink.label}}
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
```
|
||||
|
||||
The tab-nav-bar is not tied to any particular router; it works with normal `<a>` elements and uses
|
||||
the `active` property to determine which tab is currently active. The corresponding
|
||||
`<router-outlet>` can be placed anywhere in the view.
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
`<md-toolbar>` is a container for headers, titles, or actions.
|
||||
|
||||
<!-- example(toolbar-overview) -->
|
||||
|
||||
### Multiple rows
|
||||
Toolbars can have multiple rows using `<md-toolbar-row>` elements. Any content outside of an
|
||||
`<md-toolbar-row>` element are automatically placed inside of one at the begining of the toolbar.
|
||||
Each toolbar row is a `display: flex` container.
|
||||
|
||||
```html
|
||||
<md-toolbar>
|
||||
<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>
|
||||
```
|
||||
|
||||
### Positioning toolbar content
|
||||
The toolbar does not perform any positioning of its content. This gives the user full power to
|
||||
position the content as it suits their application.
|
||||
|
||||
A common pattern is to position a title on the left with some actions on the right. This can be
|
||||
easily accomplished with `display: flex`:
|
||||
```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>
|
||||
```
|
||||
```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;
|
||||
}
|
||||
```
|
||||
|
||||
### Theming
|
||||
The color of a `<md-toolbar>` can be changed by using the `color` property. By default, toolbars
|
||||
use a neutral background color based on the current theme (light or dark). This can be changed to
|
||||
`'primary'`, `'accent'`, or `'warn'`.
|
||||
@@ -3,7 +3,7 @@ over or longpresses an element.
|
||||
|
||||
<!-- example(tooltip-overview) -->
|
||||
|
||||
##Positioning
|
||||
### Positioning
|
||||
|
||||
The tooltip will be displayed below the element but this can be configured using the `mdTooltipPosition`
|
||||
input.
|
||||
@@ -21,14 +21,14 @@ the positions `before` and `after` should be used instead of `left` and `right`,
|
||||
| `after` | Display to the right in left-to-right layout and to the right in right-to-left layout |
|
||||
|
||||
|
||||
##Show and Hide
|
||||
### Showing and hiding
|
||||
|
||||
The tooltip is immediately shown when the user's mouse hovers over the element and immediately
|
||||
hides when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through
|
||||
the inputs `mdTooltipShowDelay` and `mdTooltipHideDelay`.
|
||||
|
||||
On mobile, the tooltip is displayed when the user longpresses the element and hides after a
|
||||
delay of 1500ms.
|
||||
delay of 1500ms. The longpress behavior requires HammerJS to be loaded on the page.
|
||||
|
||||
The tooltip can also be shown and hidden through the `show` and `hide` directive methods,
|
||||
which both accept a number in milliseconds to delay before applying the display change.
|
||||
|
||||
Reference in New Issue
Block a user