Skip to content

Commit 09591cf

Browse files
riavalonkara
riavalon
authored and
kara
committed
docs: Rename and update overview and readme files (#2614)
1 parent 987897c commit 09591cf

File tree

44 files changed

+23
-1949
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

44 files changed

+23
-1949
lines changed

‎scripts/release/copy-docs.sh‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
# Use OVERVIEW.html when possible. If there's no OVERVIEW file exists, use README.html
88

99
usage='Usage: copy-docs.sh $destinationFolder'
10-
if [ $# -ne 1 ]; then
10+
if [ $# -ne 1 ]; then
1111
echo "Missing destination folder. $usage"
1212
exit
1313
fi
@@ -23,7 +23,7 @@ fi
2323
for file in $originFolder*
2424
do
2525
name=${file#$originFolder}
26-
overviewFile=$originFolder$name/OVERVIEW.html
26+
overviewFile=$originFolder$name/$name.html
2727
readmeFile=$originFolder$name/README.html
2828
destFile=$destFolder/$name.html
2929
if [ -f $overviewFile ]; then

‎src/lib/button-toggle/README.md‎

Lines changed: 1 addition & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1 @@
1-
# md-button-toggle
2-
3-
`MdButtonToggle` is a group of buttons that can be toggled.
4-
There are two modes, `multiple` and `exclusive`.
5-
When in 'exclusive' mode, only one button can be selected at a time (like radio buttons).
6-
When in 'multiple' mode, multiple buttons can be selected at once (like checkboxes).
7-
You can read more about button toggles in the
8-
[Material Design spec](https://material.google.com/components/buttons.html#buttons-toggle-buttons).
9-
10-
## Usage
11-
12-
### Basic Usage
13-
14-
`md-button-toggle` can be used on its own and acts as a checkbox.
15-
16-
```html
17-
<md-button-toggle>Bold</md-button-toggle>
18-
```
19-
20-
Output:
21-
22-
![Basic Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/basic-toggle.png)
23-
24-
### Exclusive Selection
25-
26-
`md-button-toggle` can be used in an exclusive selection group when surrounded by
27-
`md-button-toggle-group`. This styles all buttons within the group to appear as a single
28-
group of button toggles and allows only one button toggle to be selected at a time.
29-
30-
```html
31-
<md-button-toggle-group name="alignment">
32-
<md-button-toggle value="left"><md-icon>format_align_left</md-icon></md-button-toggle>
33-
<md-button-toggle value="center"><md-icon>format_align_center</md-icon></md-button-toggle>
34-
<md-button-toggle value="right"><md-icon>format_align_right</md-icon></md-button-toggle>
35-
<md-button-toggle value="justify"><md-icon>format_align_justify</md-icon></md-button-toggle>
36-
</md-button-toggle-group>
37-
```
38-
39-
Output:
40-
41-
![Exclusive Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/exclusive-toggle.png)
42-
43-
### Multiple Selection
44-
45-
`md-button-toggle` can be used in a multiple selection group when surrounded by
46-
`md-button-toggle-group multiple`. This styles all buttons within the group to appear as a single
47-
group of button toggles. This component does not yet support `NgModel` when using `multiple` mode.
48-
49-
```html
50-
<md-button-toggle-group multiple>
51-
<md-button-toggle>Flour</md-button-toggle>
52-
<md-button-toggle>Eggs</md-button-toggle>
53-
<md-button-toggle>Sugar</md-button-toggle>
54-
<md-button-toggle>Milk</md-button-toggle>
55-
</md-button-toggle-group>
56-
```
57-
58-
Output:
59-
60-
![Multiple Toggle Button Example](https://material.angularjs.org/material2_assets/button-toggle/multi-toggle.png)
61-
62-
## Dynamic Exclusive Selection
63-
64-
`md-button-toggle`s can be used with `ngModel` to dynamically create groups and update the value for
65-
a group.
66-
67-
```html
68-
<md-button-toggle-group name="pies" [(ngModel)]="favoritePie">
69-
<md-button-toggle *ngFor="let pie of pieOptions" [value]="pie">
70-
{{pie}}
71-
</md-button-toggle>
72-
</md-button-toggle-group>
73-
<p>Your favorite type of pie is: {{favoritePie}}</p>
74-
```
75-
76-
### Disabled Button Toggle
77-
78-
`md-button-toggle-group` and `md-button-toggle` can both be disabled by adding a `disabled`
79-
attribute to either one. Adding `disabled` to an exclusive group or a multiple group will disable
80-
the entire group. Adding `disabled` to a single toggle will disable that toggle.
81-
82-
```html
83-
<md-button-toggle-group disabled>
84-
<md-button-toggle value="one">One</md-button-toggle>
85-
<md-button-toggle value="two">Two</md-button-toggle>
86-
<md-button-toggle value="three">Three</md-button-toggle>
87-
</md-button-toggle-group>
88-
89-
<md-button-toggle-group>
90-
<md-button-toggle value="red" disabled>Red</md-button-toggle>
91-
<md-button-toggle value="blue">Blue</md-button-toggle>
92-
</md-button-toggle-group>
93-
```
94-
95-
Output:
96-
97-
![Disabled Toggle Buttons Example](https://material.angularjs.org/material2_assets/button-toggle/disabled-toggles.png)
98-
99-
## `<md-button-toggle>`
100-
101-
### Bound Properties
102-
103-
| Name | Type | Description |
104-
| --- | --- | --- |
105-
| `id` | string | The unique ID of the toggle. IDs are generated by default when not specified. |
106-
| `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. |
107-
| `value` | any | Value of the toggle. Only used when in a group to determine which are selected. |
108-
| `checked` | boolean | Optional, default = `false`. Whether or not the toggle is checked. |
109-
| `disabled` | boolean | Optional, default = `false`. Whether or not the toggle is disabled |
110-
111-
### Events
112-
113-
| Name | Description |
114-
| --- | --- |
115-
| `change` | Emitted when the `checked` value is changed. |
116-
117-
## `<md-button-toggle-group>`
118-
119-
### Bound Properties
120-
121-
| Name | Type | Description |
122-
| --- | --- | --- |
123-
| `name` | string | Optional, the name of the group. |
124-
| `disabled` | boolean | Optional, default = `false`. |
125-
| `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. |
126-
| `selected` | `mdButtonToggle` | The current selected toggle or a list of the selected toggles. |
127-
| `vertical` | boolean | Whether the group should show the toggles vertically. Default is `false`. |
128-
129-
### Attributes
130-
131-
| Name | Type | Description |
132-
| --- | --- | --- |
133-
| `multiple` | boolean | Optional, default = `false`. Whether or not the group allows multiple selection. |
134-
135-
### Events
136-
137-
| Name | Description |
138-
| --- | --- |
139-
| `change` | Emitted when the `value` of the group changes. |
1+
Please see the official documentation at https://material.angular.io/components/component/button-toggle

‎src/lib/button-toggle/OVERVIEW.md‎ renamed to ‎src/lib/button-toggle/button-toggle.md‎

File renamed without changes.

‎src/lib/button/README.md‎

Lines changed: 1 addition & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1 @@
1-
# md-button
2-
3-
`md-button` is an HTML `<button>` or `<a>` tag enhanced with styling and animation to match the
4-
[Material Design button spec](https://www.google.com/design/spec/components/buttons.html).
5-
6-
Users should employ a button element (`<button>`) when clicking triggers some action in the current
7-
view *without navigating*. An anchor element (`<a>`) should be used when clicking *navigates*
8-
the user to another URL. Depending on which element is used, the component will either be an
9-
instance of `MdButton` or `MdAnchor`. Visually, the two are identical.
10-
11-
12-
### Button types
13-
14-
There are five types of buttons:
15-
1. Flat buttons - `md-button`
16-
* Rectangular button
17-
* Defaults to white background
18-
* No box shadow
19-
2. Raised buttons - `md-raised-button`
20-
* Rectangular button
21-
* Defaults to white background
22-
* Box shadow applied
23-
3. Icon buttons - `md-icon-button`
24-
* Circular button
25-
* Transparent background
26-
* 40 by 40 px
27-
4. Floating Action Buttons (FABs) - `md-fab`
28-
* Circular button
29-
* Defaults background to "accent" palette defined in theme
30-
* Box shadow applied
31-
* 56 by 56 px
32-
5. Mini Floating Action Buttons (Mini FABs) - `md-mini-fab`
33-
* Circular button
34-
* Defaults background to "accent" palette defined in theme
35-
* Box shadow applied
36-
* 40 by 40 px
37-
38-
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
39-
between the tags, as you would with a normal button.
40-
41-
Example:
42-
43-
<!-- example(my example) -->
44-
45-
```html
46-
<button md-button>FLAT</button>
47-
<button md-raised-button>RAISED</button>
48-
<button md-fab>
49-
<md-icon class="md-24">add</md-icon>
50-
</button>
51-
<button md-mini-fab>
52-
<md-icon class="md-24">add</md-icon>
53-
</button>
54-
```
55-
56-
Output:
57-
58-
<img src="https://material.angularjs.org/material2_assets/buttons/basic-buttons.png">
59-
60-
### Theming
61-
62-
All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
63-
Simply pass in the palette name.
64-
65-
In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.
66-
67-
Example:
68-
69-
<!-- example(my other example) -->
70-
71-
```html
72-
<button md-raised-button color="primary">PRIMARY</button>
73-
<button md-raised-button color="accent">ACCENT</button>
74-
<button md-raised-button color="warn">WARN</button>
75-
```
76-
77-
Output:
78-
79-
<img src="https://material.angularjs.org/material2_assets/buttons/colored-buttons.png">
80-
81-
### Disabling
82-
83-
You can disable any button type through the native `disabled` property. You can add it directly, or bind it to a property on your
84-
component class by adding `[disabled]="isDisabled"` given that the `isDisabled`
85-
property exists.
86-
87-
```html
88-
<button md-button disabled>OFF</button>
89-
<button md-raised-button [disabled]="isDisabled">OFF</button>
90-
<button md-mini-fab [disabled]="isDisabled"><md-icon>check</md-icon></button>
91-
```
92-
93-
Output:
94-
95-
<img src="https://material.angularjs.org/material2_assets/buttons/disabled-buttons.png">
96-
97-
### Accessibility
98-
99-
* In high contrast mode, a strong border is added to the button to make it easier to see.
100-
* Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not.
101-
* As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements.
102-
103-
104-
### Upcoming work
105-
106-
We will also be adding ink ripples to buttons in an upcoming milestone.
107-
108-
### API Summary
109-
110-
Properties:
111-
112-
| Name | Type | Description |
113-
| --- | --- | --- |
114-
| `color` | `"primary"|"accent"|"warn"` | The color palette of the button
115-
| `disabled` | boolean | Whether or not the button is disabled
116-
| `disableRipple` | boolean | Whether the ripple effect when the button is clicked should be disabled
1+
Please see the official documentation at https://material.angular.io/components/component/button

‎src/lib/button/OVERVIEW.md‎ renamed to ‎src/lib/button/button.md‎

File renamed without changes.

‎src/lib/card/README.md‎

Lines changed: 1 addition & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,116 +1 @@
1-
# md-card
2-
3-
`md-card` is a content container component that conforms to the spec of a Material Design card.
4-
5-
See plunker example [here](http://plnkr.co/edit/pkUNGMXPcf8RXKapXNXQ?p=preview).
6-
7-
## Usage
8-
9-
Simply add your content between `md-card` tags to consume basic card styles like box-shadow and default padding.
10-
11-
```html
12-
<md-card>
13-
Basic card.
14-
</md-card>
15-
```
16-
17-
Output:
18-
19-
<img src="https://material.angularjs.org/material2_assets/cards/basic-card-min.png">
20-
21-
### Preset sections
22-
23-
We also provide a number of preset sections that you can mix and match within the `md-card` tags.
24-
25-
* `<md-card-title>`: adds styles for a title
26-
* `<md-card-subtitle>`: adds styles for a subtitle
27-
* `<md-card-content>`: main content section, intended for blocks of text
28-
* `<img md-card-image>`: stretches image to container width
29-
* `<md-card-actions>`: wraps and styles buttons
30-
* `<md-card-footer>`: anchors section to bottom of card (e.g progress bar)
31-
32-
Example markup for a card with section presets:
33-
34-
```html
35-
<md-card>
36-
<md-card-subtitle>Subtitle first</md-card-subtitle>
37-
<md-card-title>Card with title</md-card-title>
38-
<md-card-content>
39-
<p>This is supporting text.</p>
40-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
41-
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad</p>
42-
</md-card-content>
43-
<md-card-actions>
44-
<button md-button>LIKE</button>
45-
<button md-button>SHARE</button>
46-
</md-card-actions>
47-
</md-card>
48-
```
49-
50-
Output:
51-
52-
<img src="https://material.angularjs.org/material2_assets/cards/sections-card-min.png">
53-
54-
#### Preset shortcuts
55-
56-
`md-card-actions` has a few layout shortcuts. You can add `align="end"` to align the buttons at the end of
57-
the main axis (flex-end). The default is `align="start"` (flex-start).
58-
59-
### Preset layouts
60-
61-
You can also leverage preset layouts that format some of the sections together.
62-
63-
#### `<md-card-header>`
64-
65-
Formats the following sections into a header:
66-
67-
* `<md-card-title>`: title to format within header
68-
* `<md-card-subtitle>`: subtitle to format within header
69-
* `<img md-card-avatar>`: image to use for avatar
70-
71-
Example markup for a card with a header:
72-
73-
```html
74-
<md-card>
75-
<md-card-header>
76-
<img md-card-avatar src="path/to/img.png">
77-
<md-card-title>Header title</md-card-title>
78-
<md-card-subtitle>Header subtitle</md-card-subtitle>
79-
</md-card-header>
80-
<img md-card-image src="path/to/img.png">
81-
<md-card-content>
82-
<p>Here is some more content</p>
83-
</md-card-content>
84-
</md-card>
85-
```
86-
87-
Output:
88-
89-
<img src="https://material.angularjs.org/material2_assets/cards/header-card-min.png">
90-
91-
#### `<md-card-title-group>`
92-
93-
Groups the following sections together:
94-
95-
* `<md-card-title>`: title to format within group
96-
* `<md-card-subtitle>`: subtitle to format within group
97-
* One of the following image sizes:
98-
* `<img md-card-sm-image>`
99-
* `<img md-card-md-image>`
100-
* `<img md-card-lg-image>`
101-
102-
Example markup for a card with title-group layout:
103-
104-
```html
105-
<md-card>
106-
<md-card-title-group>
107-
<img md-card-sm-image src="path/to/img.png">
108-
<md-card-title>Card with title</md-card-title>
109-
<md-card-subtitle>Subtitle</md-card-subtitle>
110-
</md-card-title-group>
111-
</md-card>
112-
```
113-
114-
Output:
115-
116-
<img src="https://material.angularjs.org/material2_assets/cards/title-group-card-min.png">
1+
Please see the official documentation at https://material.angular.io/components/component/card

‎src/lib/card/OVERVIEW.md‎ renamed to ‎src/lib/card/card.md‎

File renamed without changes.

0 commit comments

Comments
 (0)