kylefang/react-native-segmented-control-tab
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native-segmented-control-tab.git synced 2026-01-12 22:50:51 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated README with usage of 3.0

Browse Source
This commit is contained in:
Suhair Zain
2017-03-30 14:00:30 +05:30
committed by Kiran
parent 791ae35af6
commit 34545d7bf0
1 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
README.md
View File

@@ -15,19 +15,39 @@ A react native component with the same concept of react native's SegmantedContro
`npm install react-native-segmented-control-tab --save`
## Usage
### IMPORTANT
This has been made into a controlled component from 3.0. Those who are familiar with 2.0, read below for the updated usage.
```
import SegmentedControlTab from 'react-native-segmented-control-tab'
class ConsumerComponent extends Component {
constructor(){
super()
this.state = {
selectedIndex: 0,
};
}
handleIndexChange = (index) => {
this.setState({
...this.state,
selectedIndex: index,
});
}
render() {
return (
<View>
<SegmentedControlTab
values={['First', 'Second', 'Third']}
onTabPress= {index => console.log(index))}
selectedIndex={this.state.selectedIndex}
onTabPress={this.handleIndexChange}
/>
</View>)
</View>
);
}
}
```
@@ -35,16 +55,15 @@ class ConsumerComponent extends Component {
Name | Description | Default | Type
------|-------------|----------|-----------
values | titles of tabs | `['One', 'Two', 'Three']` | array
selectedIndex | index of tab item to be selected initially| 0 | number
selectedIndex | index of tab item to be selected initially| [0] | arrayOf(PropTypes.number)
multiple | Boolean which enables the multiple selection option | false | bool
selectedIndices |Array of indices of tab items to be selected initially - when multiple prop is true else it will take selectedIndex| [0] | arrayOf(PropTypes.number)
borderRadius | borderRadius of whole tab | 5 | number
tabsContainerStyle | external styles can be passed to override the default styles of the segmentedControl wrapper| base styles added in SegmentedControlTab.js | object(styles)
tabStyle | external styles can be passed to override the default styles of the tabs| base styles added in SegmentedControlTab.js | object(styles)
tabTextStyle | external styles can be passed to override the default styles of the tab title| base styles added in SegmentedControlTab.js | object(styles)
activeTabStyle | external styles can be passed to override the default styles of the active tab| base styles added in SegmentedControlTab.js | object(styles)
activeTabTextStyle | external styles can be passed to override the default styles of the active tab text| base styles added in SegmentedControlTab.js | object(styles)
onTabPress | call-back function for each item | () => {} | func
onTabPress | call-back function when a tab is selected | () => {} | func
## Custom styling
```