vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Updated Button and Checkbox doc

old
Keren Chandran 2016-03-25 09:20:24 -04:00
parent d3fcaef4c9
commit b5f21234c7
2 changed files with 28 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/button/readme.md
View File

@ -1,6 +1,6 @@
# Button
A [button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
A [Button](https://www.google.com/design/spec/components/buttons.html) clearly communicates what action will occur when the user touches it. It consists of text, an image, or both, designed in accordance with your app’s color theme.
<!-- example -->
```jsx
@ -32,23 +32,26 @@ const TestButtons = () => (
## Properties
| Name | Type | Default | Description|
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `accent` | `Boolean` | `false` | Indicates if the button should have accent color.|
| `className` | `String` | `''` | Set a class to style the Component.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
| `icon` | `String` | | Value of the icon (See icon component). |
| `inverse` | `Boolean` | | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
| `label` | `String` | | The text string to use for the name of the button.|
| `mini` | `Boolean` | `false` | To be used with floating button. If true the button will be smaller.|
| `neutral` | `Boolean` | `true` | Set it to `false` if you don't want the neutral styles to be included.|
| `primary` | `false` | `false` | Indicates if the button should have primary color.|
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
| `accent` | `Boolean` | `false` | Indicates if the button should have accent color.|
| `className` | `String` | `''` | Set a class to style the Component.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `flat` | `Boolean` | `false` | If true, the button will have a flat look. |
| `floating` | `Boolean` | `false` | If true, the button will have a floating look. |
| `href` | `String` | | Creates a link for the button. |
| `icon` | `Any` | | Value of the icon (See Font Icon Component). |
| `inverse` | `Boolean` | | If true, the neutral colors are inverted. Useful to put a button over a dark background. |
| `label` | `String` | | The text string to use for the name of the button.|
| `mini` | `Boolean` | `false` | To be used with floating button. If true, the button will be smaller.|
| `neutral` | `Boolean` | `true` | Set it to `false` if you don't want the neutral styles to be included.|
| `onMouseLeave` | `Function` | | Fires after the mouse leaves the Component.|
| `onMouseUp` | `Function` | | Fires after the mouse is released from the Component.|
| `primary` | `Boolean` | `false` | Indicates if the button should have primary color.|
| `raised` | `Boolean` | `false` | If true, the button will have a raised look. |
| `ripple` | `Boolean` | `true` | If true, component will have a ripple effect on click.|
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time.
The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
@ -56,4 +59,4 @@ The `Button` component also accept children so if you want to provide a custom c
Icons are appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. They are best located in app bars, toolbars, action buttons or toggles.
We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding aspect properties.
We provide an `IconButton` component bundled with `Button` component. They share a similar API excluding onMouseLeave, onMouseUp and aspect properties.

16
components/checkbox/readme.md
View File

@ -41,14 +41,14 @@ class TestCheckbox extends React.Component {
| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `checked` | `Bool` | `false` | Value for the checkbox, can be `true` or `false`. |
| `className` | `String` | `''` | Sets a class to give customized styles to the checkbox field.|
| `disabled` | `Bool` | `false` | If true, the checkbox shown as disabled and is not possible to modify it.|
| `label` | `String` | | Text label to attach next to the checkbox element.|
| `name` | `String` | `false` | The name of the field to set in the input checkbox.|
| `onBlur` | `Function` | | Callback called when the checkbox is blurred.|
| `onChange` | `Function` | | Callback called when the checkbox value is changed.|
| `onFocus` | `Function` | | Callback called when the checkbox is focused |
| `checked` | `Boolean` | `false` | Value for the checkbox, can be `true` or `false`. |
| `className` | `String` | `''` | Sets a class to give customized styles to the checkbox field.|
| `disabled` | `Boolean` | `false` | If true, the checkbox shown as disabled and cannot be modified.|
| `label` | `String` | | Text label to attach next to the checkbox element.|
| `name` | `String` | `false` | The name of the field to set in the input checkbox.|
| `onBlur` | `Function` | | Callback called when the checkbox is blurred.|
| `onChange` | `Function` | | Callback called when the checkbox value is changed.|
| `onFocus` | `Function` | | Callback called when the checkbox is focused |
## Methods