Add documentation for date picker and remove structure section from other docs
Javi Velasco
parent
303ca9cbad
commit
4eb0c1b749
|
|
@ -22,7 +22,3 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo
|
|||
| **className** | String | `''` | Set a class for the root component.|
|
||||
| **flat** | Bool | `false` | If true, the AppBar shows a shadow.|
|
||||
| **fixed** | Bool | `false` | Determine if the bar should have position `fixed` or `relative`.|
|
||||
|
||||
## Structure
|
||||
|
||||
It renders an HTML `header` tag with the given `className` so to style it you just need to use a class and apply CSS over the node.
|
||||
|
|
|
|||
|
|
@ -45,20 +45,3 @@ This component has state to control how is it rendered and the values currently
|
|||
|
||||
- `getValue` is used to retrieve the current value.
|
||||
- `setValue` to force a new value.
|
||||
|
||||
## Structure
|
||||
|
||||
The component has a complex structure that can be customized by giving a custom `className` and targeting `data-role` attributes. The structure is similar to:
|
||||
|
||||
```html
|
||||
<div data-react-toolbox="autocomplete">
|
||||
<label data-role="label"></label>
|
||||
<ul data-role="selections">
|
||||
<li data=role="selection"></li>
|
||||
</ul>
|
||||
<input data-role="input" />
|
||||
<ul data-role="suggestions">
|
||||
<li data=role="suggestion"></li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -34,15 +34,3 @@ const TestButtons = () => (
|
|||
| ripple | `Boolean` | `true` | If true, component will have a ripple effect on click.|
|
||||
|
||||
Also, any additional properties will be directly transferred to the `button` tag.
|
||||
|
||||
## Structure
|
||||
|
||||
The inner markup depends on the given properties. It can result in:
|
||||
|
||||
```html
|
||||
<button data-react-toolbox="button">
|
||||
<span data-react-toolbox="ripple"></span>
|
||||
<span data-react-toolbox="icon"></span>
|
||||
<abbr>Raised accent</abbr>
|
||||
</button>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -36,21 +36,3 @@ const TestCards = () => (
|
|||
| text | String | | Sets a complementary text display as a card description.|
|
||||
| title | String | | Sets the title of the card.|
|
||||
| type | String | `default` | Type of the component to display general modifications. It can be `wide` for a larger card, `image` if it's an image card or `event` which shows just a title on top. |
|
||||
|
||||
## Structure
|
||||
|
||||
This can generate different structures depending on the props. A complicated one can be as follows:
|
||||
|
||||
```html
|
||||
<div data-react-toolbox="card">
|
||||
<figure>
|
||||
<h5 data-role='title'>Title</h5>
|
||||
<small data-role='subtitle'>Subtitle</small>
|
||||
</figure>
|
||||
<p data-role='text'>Description</p>
|
||||
<nav data-role='actions'>
|
||||
<button data-react-toolbox="button">...</button>
|
||||
<button data-react-toolbox="button">...</button>
|
||||
</nav>
|
||||
</div>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -15,16 +15,6 @@ const TestCheckbox = () => (
|
|||
);
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
This component has state to control its value and how is it rendered. It exposes the following instance methods:
|
||||
|
||||
- `getValue` is used to retrieve the current value.
|
||||
- `setValue` to force a new value.
|
||||
- `blur` to blur the input.
|
||||
- `focus` to focus the input.
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
|
|
@ -38,6 +28,15 @@ This component has state to control its value and how is it rendered. It exposes
|
|||
| onChange | Function | | Callback called when the checkbox value is changed.|
|
||||
| onFocus | Function | | Callback called when the checkbox is focused |
|
||||
|
||||
## Methods
|
||||
|
||||
This component has state to control its value and how is it rendered. It exposes the following instance methods:
|
||||
|
||||
- `getValue` is used to retrieve the current value.
|
||||
- `setValue` to force a new value.
|
||||
- `blur` to blur the input.
|
||||
- `focus` to focus the input.
|
||||
|
||||
## Structure
|
||||
|
||||
In a checkbox the structure depends on the label option. Apart from it, it's always the same:
|
||||
|
|
|
|||
|
|
@ -1,25 +1,27 @@
|
|||
# DatePicker
|
||||
# Date Picker
|
||||
|
||||
```javascript
|
||||
var DatePicker = require('react-toolbox/components/date_picker');
|
||||
A [dialog](https://www.google.com/design/spec/components/pickers.html#pickers-date-pickers) date picker is used to select a single date. The selected day is indicated by a filled circle. The current day is indicated by a different color and type weight.
|
||||
|
||||
var date = new Date(1995,11,17);
|
||||
<!-- example -->
|
||||
```jsx
|
||||
import DatePicker from 'react-toolbox/date_picker';
|
||||
|
||||
// Initialized date picker
|
||||
<DatePicker value={date} />
|
||||
const selectedDate = new Date(1995, 11, 17);
|
||||
const DatePickerTest = () => (
|
||||
<DatePicker value={selectedDate} />
|
||||
);
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description|
|
||||
| ------------- |:-------:|:--------------- |:---------- |
|
||||
| **value** | Date | `new Date()` | Date object with currrent date by default |
|
||||
| className | String | `''` | Sets a class to give customized styles to the checkbox field.|
|
||||
| value | Date | | Date object with the currently selected date. |
|
||||
|
||||
## Methods
|
||||
|
||||
#### getValue
|
||||
Returns the value of the picker.
|
||||
The DatePicker is a very easy component from the top level API but quite complex inside. It has state to keep the currently viewed date and the currently selected value.
|
||||
|
||||
```
|
||||
input_instance.getValue();
|
||||
```
|
||||
- `getValue` is used to retrieve the current value.
|
||||
- `setValue` to force a new value.
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ import ButtonExample1 from './examples/button_example_1.txt';
|
|||
import AutocompleteExample1 from './examples/autocomplete_example_1.txt';
|
||||
import CardExample1 from './examples/card_example_1.txt';
|
||||
import CheckboxExample1 from './examples/checkbox_example_1.txt';
|
||||
import DatePickerExample1 from './examples/datepicker_example_1.txt';
|
||||
|
||||
export default {
|
||||
app_bar: {
|
||||
|
|
@ -62,7 +63,8 @@ export default {
|
|||
date_picker: {
|
||||
name: 'Date Picker',
|
||||
docs: DatePicker,
|
||||
path: '/components/date_picker'
|
||||
path: '/components/date_picker',
|
||||
examples: [DatePickerExample1]
|
||||
},
|
||||
dialog: {
|
||||
name: 'Dialog',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
const selectedDate = new Date(1995, 11, 17);
|
||||
|
||||
const DatePickerTest = () => (
|
||||
<DatePicker value={selectedDate} />
|
||||
);
|
||||
|
||||
return <DatePickerTest />;
|
||||
Loading…
Reference in New Issue