diff --git a/scripts/release/copy-docs.sh b/scripts/release/copy-docs.sh index 4c9247b7c23..a18c5acaddc 100755 --- a/scripts/release/copy-docs.sh +++ b/scripts/release/copy-docs.sh @@ -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 diff --git a/src/lib/button-toggle/README.md b/src/lib/button-toggle/README.md index befdfbebdff..fb4499d1cda 100644 --- a/src/lib/button-toggle/README.md +++ b/src/lib/button-toggle/README.md @@ -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 -Bold -``` - -Output: - -![Basic Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/basic-toggle.png) - -### 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 - - format_align_left - format_align_center - format_align_right - format_align_justify - -``` - -Output: - -![Exclusive Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/exclusive-toggle.png) - -### 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 - - Flour - Eggs - Sugar - Milk - -``` - -Output: - -![Multiple Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/multi-toggle.png) - -## Dynamic Exclusive Selection - -`md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for -a group. - -```html - - - {{pie}} - - -

Your favorite type of pie is: {{favoritePie}}

-``` - -### 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 - - One - Two - Three - - - - Red - Blue - -``` - -Output: - -![Disabled Toggle Buttons Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggles.png) - -## `` - -### 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. | - -## `` - -### 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 \ No newline at end of file diff --git a/src/lib/button-toggle/OVERVIEW.md b/src/lib/button-toggle/button-toggle.md similarity index 100% rename from src/lib/button-toggle/OVERVIEW.md rename to src/lib/button-toggle/button-toggle.md diff --git a/src/lib/button/README.md b/src/lib/button/README.md index 4c711248c32..b83ee6b67b5 100644 --- a/src/lib/button/README.md +++ b/src/lib/button/README.md @@ -1,116 +1 @@ -# md-button - -`md-button` is an HTML ` - - - - ``` - -Output: - - - -### 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: - - - - ```html - - - - ``` - -Output: - - - -### 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 - - - -``` - -Output: - - - -### 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 \ No newline at end of file diff --git a/src/lib/button/OVERVIEW.md b/src/lib/button/button.md similarity index 100% rename from src/lib/button/OVERVIEW.md rename to src/lib/button/button.md diff --git a/src/lib/card/README.md b/src/lib/card/README.md index 63867c319b0..9f9f53d1636 100644 --- a/src/lib/card/README.md +++ b/src/lib/card/README.md @@ -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 - - Basic card. - -``` - -Output: - - - -### Preset sections - -We also provide a number of preset sections that you can mix and match within the `md-card` tags. - - * ``: adds styles for a title - * ``: adds styles for a subtitle - * ``: main content section, intended for blocks of text - * ``: stretches image to container width - * ``: wraps and styles buttons - * ``: anchors section to bottom of card (e.g progress bar) - -Example markup for a card with section presets: - -```html - - Subtitle first - Card with title - -

This is supporting text.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

- - - - - - -``` - -Output: - - - -#### 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. - -#### `` - -Formats the following sections into a header: - - * ``: title to format within header - * ``: subtitle to format within header - * ``: image to use for avatar - -Example markup for a card with a header: - -```html - - - - Header title - Header subtitle - - - -

Here is some more content

- - -``` - -Output: - - - -#### `` - -Groups the following sections together: - - * ``: title to format within group - * ``: subtitle to format within group - * One of the following image sizes: - * `` - * `` - * `` - -Example markup for a card with title-group layout: - -```html - - - - Card with title - Subtitle - - -``` - -Output: - - \ No newline at end of file +Please see the official documentation at https://material.angular.io/components/component/card \ No newline at end of file diff --git a/src/lib/card/OVERVIEW.md b/src/lib/card/card.md similarity index 100% rename from src/lib/card/OVERVIEW.md rename to src/lib/card/card.md diff --git a/src/lib/checkbox/README.md b/src/lib/checkbox/README.md index a8cffb6ae66..812fc01e337 100644 --- a/src/lib/checkbox/README.md +++ b/src/lib/checkbox/README.md @@ -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 -
    -
  • - - {{todo.name}} - -
    • -
-``` - -### Usage within Forms - -In addition to supporting native checkbox functionality, `md-checkbox` also supports `[(ngModel)]` -for use within forms. - -```html -
- -
- - I have read and agree to the terms of service. - -
- -
-``` - -### Indeterminate Checkboxes - -Indeterminate checkboxes are useful when a checkbox needs to be in a "mixed" state - -```html - - Click the Button Below to Make Me Indeterminate. - - -``` - -### Alignment - -Note that checkboxes can be aligned to come at the "start" or the "end" of its corresponding label. - -```html - - I come after my label. - -``` - -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 - -``` - -### 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 - - I come after my label. - - ``` +Please see the official documentation at https://material.angular.io/components/component/checkbox \ No newline at end of file diff --git a/src/lib/checkbox/OVERVIEW.md b/src/lib/checkbox/checkbox.md similarity index 100% rename from src/lib/checkbox/OVERVIEW.md rename to src/lib/checkbox/checkbox.md diff --git a/src/lib/chips/README.md b/src/lib/chips/README.md index 8cad19fae5f..d7a05de16e1 100644 --- a/src/lib/chips/README.md +++ b/src/lib/chips/README.md @@ -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 \ No newline at end of file diff --git a/src/lib/chips/OVERVIEW.md b/src/lib/chips/chips.md similarity index 100% rename from src/lib/chips/OVERVIEW.md rename to src/lib/chips/chips.md diff --git a/src/lib/dialog/README.md b/src/lib/dialog/README.md index ee683f973fe..b4753f6be5b 100644 --- a/src/lib/dialog/README.md +++ b/src/lib/dialog/README.md @@ -1,102 +1 @@ -# MdDialog - -MdDialog is a service, which opens dialogs components in the view. - -### Methods - -| Name | Description | -| ---- | ----------- | -| `open(component: ComponentType, config: MdDialogConfig): MdDialogRef` | 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` | 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: ` - - ` -}) -export class PizzaComponent { - - dialogRef: MdDialogRef; - - 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: ` -

Would you like to order pizza?

- - - - - - ` -}) -export class PizzaDialog { - constructor(public dialogRef: MdDialogRef) { } -} -``` - -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 diff --git a/src/lib/dialog/OVERVIEW.md b/src/lib/dialog/dialog.md similarity index 100% rename from src/lib/dialog/OVERVIEW.md rename to src/lib/dialog/dialog.md diff --git a/src/lib/grid-list/README.md b/src/lib/grid-list/README.md index c0ca3c8e49e..0a04c0bd965 100644 --- a/src/lib/grid-list/README.md +++ b/src/lib/grid-list/README.md @@ -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 - - One - Two - Three - Four - -``` - -Output: - - - -## 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: `...` - -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: `...` - -2. **Ratio**: This ratio is width:height, and must be passed in with a colon, not a decimal. - - Ex: `...`. - -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: `...` - -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: `...` - -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 - - - {{tile.text}} - - -``` - -```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: - - - -## TODO - -- Grid tile headers and footers -- Responsive sizing support +Please see the official documentation at https://material.angular.io/components/component/grid-list \ No newline at end of file diff --git a/src/lib/grid-list/OVERVIEW.md b/src/lib/grid-list/grid-list.md similarity index 100% rename from src/lib/grid-list/OVERVIEW.md rename to src/lib/grid-list/grid-list.md diff --git a/src/lib/icon/README.md b/src/lib/icon/README.md index 56c8b0911d5..a260ed85a31 100644 --- a/src/lib/icon/README.md +++ b/src/lib/icon/README.md @@ -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 -home -``` - -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 -help -``` - -### 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 - -``` - -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 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 - - -``` - -### 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 `` tag defines an individual icon, and is identified with a unique "id" attribute. -``` - - - ... - ... - ... - ... - - -``` - -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 - -``` - -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 -home -home -home -``` - -### 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 diff --git a/src/lib/icon/OVERVIEW.md b/src/lib/icon/icon.md similarity index 100% rename from src/lib/icon/OVERVIEW.md rename to src/lib/icon/icon.md diff --git a/src/lib/input/README.md b/src/lib/input/README.md index 45227008886..451d9b3e05b 100644 --- a/src/lib/input/README.md +++ b/src/lib/input/README.md @@ -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 - - -``` - -Simple `textarea` example: -```html - - - -``` - -## 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 - - $  - .00 - -``` - - - -### 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 - - - {{characterCountHintExample.value.length}} / 100 - -``` - - - -### 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 - - - - - - - - - -``` - -_please note that this image has been doctored to show each `input` as if it were focused:_ - - -### Full Forms - -You can make a full form using inputs, and they will support autofill natively. - -```html -
- - - - - - - -
- - - -
- -

- - - - - - -

- - - - - -
- - - - - - {{postalCode.value.length}} / 5 -
-
-``` - - - -## 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 diff --git a/src/lib/input/OVERVIEW.md b/src/lib/input/input.md similarity index 100% rename from src/lib/input/OVERVIEW.md rename to src/lib/input/input.md diff --git a/src/lib/list/README.md b/src/lib/list/README.md index ffd346087d1..5ebc8cf1600 100644 --- a/src/lib/list/README.md +++ b/src/lib/list/README.md @@ -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 - - Pepper - Salt - Paprika - -``` - -Output: - - - -### 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 - - - -

{{message.from}}

-

- {{message.subject}} - -- {{message.message}} -

- - - - - - -

{{message.from}}

-

{{message.subject}}

-

{{message.message}}

- - -``` - -Two line list output: - - - -Three line list output: - - - -### Lists with avatars - -To include an avatar, add an image tag with an `md-list-avatar` attribute. - -```html - - - ... -

{{message.from}}

-

- {{message.subject}} - -- {{message.message}} -

- - -``` - -Output: - - - -### 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 - - Pepper - Salt - Paprika - -``` - -Output: - - - -### 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 `` tags. - -```html - -

Folders

- - folder -

{{folder.name}}

-

{{folder.updated}}

- - -

Notes

- - note -

{{note.name}}

-

{{note.updated}}

- - -``` - -Output: - - - -### 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 - - {{ link }} - -``` - -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 - - - {{ link }} - - - -``` - -### 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 \ No newline at end of file diff --git a/src/lib/list/OVERVIEW.md b/src/lib/list/list.md similarity index 100% rename from src/lib/list/OVERVIEW.md rename to src/lib/list/list.md diff --git a/src/lib/menu/README.md b/src/lib/menu/README.md index 64080625654..b521869c023 100644 --- a/src/lib/menu/README.md +++ b/src/lib/menu/README.md @@ -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 ` - - - - -``` - -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 - - - - - - - - - -``` - -Output: - - - - -### 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 - - - - - - - - -``` - -### Adding an icon - -Menus also support displaying `md-icon` elements before the menu item text. - -*my-comp.html* -```html - - - - - -``` - -Output: - - - - - -### 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 - - - - - - -``` - -Output: - - - - -### 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: -- DOWN_ARROW: Focus next menu item -- UP_ARROW: Focus previous menu item -- ENTER: 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` | Observable that emits when the menu opens. | -| `onMenuClose` | `Observable` | Observable that emits when the menu closes. | - -**Methods** - -| Method | Returns | Description | -| --- | --- | --- | -| `openMenu()` | `Promise` | Opens the menu. Returns a promise that will resolve when the menu has opened. | -| `closeMenu()` | `Promise` | Closes the menu. Returns a promise that will resolve when the menu has closed. | -| `toggleMenu()` | `Promise` | Toggles the menu. Returns a promise that will resolve when the menu has completed opening or closing. | -| `destroyMenu()` | `Promise` | Destroys the menu overlay completely. - - +Please see the official documentation at https://material.angular.io/components/component/menu diff --git a/src/lib/menu/OVERVIEW.md b/src/lib/menu/menu.md similarity index 100% rename from src/lib/menu/OVERVIEW.md rename to src/lib/menu/menu.md diff --git a/src/lib/progress-bar/README.md b/src/lib/progress-bar/README.md index 9c1cb370609..c9ea7098031 100644 --- a/src/lib/progress-bar/README.md +++ b/src/lib/progress-bar/README.md @@ -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 - `` - * Indicates how long an operation will take when the percentage complete is detectable. - 2. 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 - `` - * 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 - `` - * 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 - - - - - ``` - -### 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 - - - - ``` - -### 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 \ No newline at end of file diff --git a/src/lib/progress-bar/OVERVIEW.md b/src/lib/progress-bar/progress-bar.md similarity index 100% rename from src/lib/progress-bar/OVERVIEW.md rename to src/lib/progress-bar/progress-bar.md diff --git a/src/lib/progress-spinner/README.md b/src/lib/progress-spinner/README.md index 09ef5b9c217..92a144595c1 100644 --- a/src/lib/progress-spinner/README.md +++ b/src/lib/progress-spinner/README.md @@ -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 - `` - * Indicates how long an operation will take when the percentage complete is detectable. - 2. Indeterminate - `` or `` - * Indicates the user must wait while something finishes when it’s not necessary or possible to indicate how long it - will take. - -Example: - - ```html - - - - ``` - -### 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 - - - - ``` - -### 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 \ No newline at end of file diff --git a/src/lib/progress-spinner/OVERVIEW.md b/src/lib/progress-spinner/progress-spinner.md similarity index 100% rename from src/lib/progress-spinner/OVERVIEW.md rename to src/lib/progress-spinner/progress-spinner.md diff --git a/src/lib/radio/README.md b/src/lib/radio/README.md index ed83fe00000..9ad01c8968d 100644 --- a/src/lib/radio/README.md +++ b/src/lib/radio/README.md @@ -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. - -![Preview](https://material.angularjs.org/material2_assets/radio/radios.png) - -### Examples -A basic radio group would have the following markup. -```html - - 1 - 2 - -``` - -A dynamic example for use inside a form showing support for `[(ngModel)]`: -```html - - - {{o.label}} - - -``` - -## `` -### 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. - -## `` -### 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 \ No newline at end of file diff --git a/src/lib/radio/OVERVIEW.md b/src/lib/radio/radio.md similarity index 100% rename from src/lib/radio/OVERVIEW.md rename to src/lib/radio/radio.md diff --git a/src/lib/select/README.md b/src/lib/select/README.md index f00c2932cbb..9dd8953b567 100644 --- a/src/lib/select/README.md +++ b/src/lib/select/README.md @@ -1,68 +1 @@ -# md-select - -`` is a form control for selecting a value from a set of options, similar to the native -`` element. You can read more -about the slider in the [Material Design spec](https://material.google.com/components/sliders.html). - -Simple example: -```html - -``` - -## 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 - -``` - -### 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 - -``` - -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 - -``` - -### 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 - -``` - -### 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 - -``` - -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 - -``` - -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 - -``` - -### 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 - -``` - -```html - -``` - -## 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 \ No newline at end of file diff --git a/src/lib/slider/OVERVIEW.md b/src/lib/slider/slider.md similarity index 100% rename from src/lib/slider/OVERVIEW.md rename to src/lib/slider/slider.md diff --git a/src/lib/snack-bar/README.md b/src/lib/snack-bar/README.md index afc5d9cb06e..0d696e9be5d 100644 --- a/src/lib/snack-bar/README.md +++ b/src/lib/snack-bar/README.md @@ -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` | Creates and opens a simple snack bar notification matching material spec. | -| `openFromComponent(component: ComponentType, config: MdSnackBarConfig): MdSnackBarRef` | 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 \ No newline at end of file diff --git a/src/lib/snack-bar/OVERVIEW.md b/src/lib/snack-bar/snack-bar.md similarity index 100% rename from src/lib/snack-bar/OVERVIEW.md rename to src/lib/snack-bar/snack-bar.md diff --git a/src/lib/tabs/README.md b/src/lib/tabs/README.md index f7eec538dfd..ba92543d857 100644 --- a/src/lib/tabs/README.md +++ b/src/lib/tabs/README.md @@ -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. - -## `` -### 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 - - -

Some tab content

-

...

- - -

Some more tab content

-

...

- - -``` - -You can specifiy the active tab by using the `selectedIndex` property. - -```html - - ... - -``` - -**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 - - - -

Best pasta restaurants

-

...

- - - -

Terrible sushi restaurants

-

...

- - -``` +Please see the official documentation at https://material.angular.io/components/component/tabs \ No newline at end of file diff --git a/src/lib/tabs/OVERVIEW.md b/src/lib/tabs/tabs.md similarity index 100% rename from src/lib/tabs/OVERVIEW.md rename to src/lib/tabs/tabs.md diff --git a/src/lib/toolbar/README.md b/src/lib/toolbar/README.md index 90b15097566..840ec88d90b 100644 --- a/src/lib/toolbar/README.md +++ b/src/lib/toolbar/README.md @@ -1,68 +1 @@ -# MdToolbar -`MdToolbar` is a vertical aligned bar, which can hold the application title or actions. - -### Screenshots -![Preview](https://cloud.githubusercontent.com/assets/4987015/13727769/6d952c78-e900-11e5-890a-ccfd46996812.png) - -## `` -### 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 - - My Application Title - -``` - -Toolbars can also have multiple rows.
-Multiple rows inside of a `md-toolbar` can be added by appending as many as needed `` elements. - -```html - - First Row - - - Second Row - - - - Third Row - - -``` - -### Alignment -The alignment inside of a toolbar row can be easily done by using the flexbox layout.
-For example, the following markup aligns the items on the `right`. - -Custom HTML -```html - - Application Title - - - - - Right Aligned Text - -``` - -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 -![image](https://cloud.githubusercontent.com/assets/4987015/13730760/0864894e-e959-11e5-9312-7f3cb990d80a.png) +Please see the official documentation at https://material.angular.io/components/component/toolbar \ No newline at end of file diff --git a/src/lib/toolbar/OVERVIEW.md b/src/lib/toolbar/toolbar.md similarity index 100% rename from src/lib/toolbar/OVERVIEW.md rename to src/lib/toolbar/toolbar.md diff --git a/src/lib/tooltip/README.md b/src/lib/tooltip/README.md index 7d79fa18d2f..b2f40379355 100644 --- a/src/lib/tooltip/README.md +++ b/src/lib/tooltip/README.md @@ -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 - -``` - - - -## `[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 \ No newline at end of file diff --git a/src/lib/tooltip/OVERVIEW.md b/src/lib/tooltip/tooltip.md similarity index 100% rename from src/lib/tooltip/OVERVIEW.md rename to src/lib/tooltip/tooltip.md