diff --git a/components/tabs/readme.md b/components/tabs/readme.md index 84b1ad16..8130f965 100644 --- a/components/tabs/readme.md +++ b/components/tabs/readme.md @@ -1,50 +1,44 @@ # Tabs -```javascript -Tabs = require('../../components/tabs').Tabs -Tab = require('../../components/tabs').Tab +Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorized data sets. For now we are using tabs along with content so it's not possible to render just the tab headers with event listeners. In the future we will add this feature but for now you can compose your tabs with content: - - - primary - - - secondary - - - third - - - + +```jsx +import {Tab, Tabs} from 'react-toolbox'; + +const TabsExample = () => ( + + Primary content + Secondary content + Disabled content + + Fifth content + +); ``` +## Tabs -## Properties -| Name | Type | Default | Description| -|:- |:-: | :- |:-| -| **className** | String | `''` | Additional class name to provide custom styling.| -| **index** | Number | `0` | Current | -| **onChange** | Function | | Callback function that is fired when the tab changes. - -## Properties +This component acts as the wrapper and the main controller of the content that is being displayed. It gets some properties that can be spread to the children. | Name | Type | Default | Description| -|:- |:-: | :- |:-| -| **active** | Boolean | `false` | If true, the current component is visible.| -| **className** | String | `''` | Additional class name to provide custom styling.| -| **disabled** | Boolean | `false` | If true, the current component is not clickable.| -| **hidden** | Boolean | `false` | If true, the current component is not visible.| -| **label** | String | | Label for navigation| -| **onActive** | Function | | Callback function that is fired when the tab is activated. | -| **tabIndex** | Number | | Sets the tabindex html attribute.| +|:-----|:-----|:-----|:-----| +| `className` | `String` | `''` | Additional class name to provide custom styling.| +| `index` | `Number` | `0` | Current | +| `onChange` | `Function` | | Callback function that is fired when the tab changes. -## Methods +The tabs component has state to hold the currently activated tab and exposes a method to change it manually called `active`. You can call this method with the index value of the child you want to activate. -#### active -Active/Deactive a determinate instance of the component. +## Tab -``` -tab_instance.active(true); -``` +Represent a single tab element and it should include some properties to describe the tab itself and get children elements as content. + +| Name | Type | Default | Description| +|:-----|:-----|:-----|:-----| +| `active` | `Boolean` | `false` | If true, the current component is visible.| +| `className` | `String` | `''` | Additional class name to provide custom styling.| +| `disabled` | `Boolean` | `false` | If true, the current component is not clickable.| +| `hidden` | `Boolean` | `false` | If true, the current component is not visible.| +| `label` | `String` | | Label text for navigation header | +| `onActive` | `Function` | | Callback function that is fired when the tab is activated. | +| `tabIndex` | `Number` | | Sets the tabindex html attribute.| diff --git a/components/tabs/tab.jsx b/components/tabs/tab.jsx index bfc9e9fa..7cfe3541 100644 --- a/components/tabs/tab.jsx +++ b/components/tabs/tab.jsx @@ -40,13 +40,6 @@ class Tab extends React.Component { ); } - - active (value) { - this.setState({active: value}); - if (this.props.onActive && value) { - this.props.onActive(this); - } - } } export default Tab; diff --git a/components/time_picker/readme.md b/components/time_picker/readme.md index 1f0b8e25..354f5ad4 100644 --- a/components/time_picker/readme.md +++ b/components/time_picker/readme.md @@ -1,4 +1,4 @@ -# TimePicker +# Time Picker A [dialog picker](https://www.google.com/design/spec/components/pickers.html#pickers-time-pickers) is used to select a single time (hours:minutes). The selected time is indicated by the filled circle at the end of the clock hand. @@ -18,10 +18,10 @@ const TimePickerTest = () => ( ## Properties | Name | Type | Default | Description| -| ------------- |:-------:|:--------------- |:---------- | -| className | String | `''` | Sets a class to give customized styles to the time picker.| -| format | String | `24hr` | Format to display the clock. It can be `24hr` or `ampm`.| -| value | Date | | Datetime object with currrently selected time | +|:-----|:-----|:-----|:-----| +| `className` | `String` | `''` | Sets a class to give customized styles.| +| `format` | `String` | `24hr` | Format to display the clock. It can be `24hr` or `ampm`.| +| `value` | `Date` | | Datetime object with currrently selected time | ## Methods diff --git a/docs/app/components/layout/main/modules/components.js b/docs/app/components/layout/main/modules/components.js index 0f617160..76eb9c19 100644 --- a/docs/app/components/layout/main/modules/components.js +++ b/docs/app/components/layout/main/modules/components.js @@ -42,7 +42,8 @@ import RadioExample1 from './examples/radio_example_1.txt'; import SliderExample1 from './examples/slider_example_1.txt'; import SnackbarExample1 from './examples/snackbar_example_1.txt'; import SwitchExample1 from './examples/switch_example_1.txt'; -import TimePickerTest from './examples/timepicker_example_1.txt'; +import TabsExample1 from './examples/tabs_example_1.txt'; +import TimePickerExample1 from './examples/timepicker_example_1.txt'; export default { app_bar: { @@ -167,12 +168,13 @@ export default { tabs: { name: 'Tabs', docs: Tabs, - path: '/components/tabs' + path: '/components/tabs', + examples: [TabsExample1] }, time_picker: { name: 'Time Picker', docs: TimePicker, path: '/components/time_picker', - examples: [TimePickerTest] + examples: [TimePickerExample1] } }; diff --git a/docs/app/components/layout/main/modules/examples/tabs_example_1.txt b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt new file mode 100644 index 00000000..84373983 --- /dev/null +++ b/docs/app/components/layout/main/modules/examples/tabs_example_1.txt @@ -0,0 +1,11 @@ +const TabsExample = () => ( + + Primary content + Secondary content + Disabled content + + Fifth content + +); + +return ;