Skip to content

Aligning TabList to Center does not move border #6

Description

@Paresh-Arvind-Patil

Upon setting the alignCenter prop to true, the TabList moves to the center, but the border seems to remain at the start of the component still. Does the borderTranslateX prop of the ListBorder component not get reset in the case where the alignCenter is set to true?

I copied most of my code from the example, and by referring to #3 .Here it is:

class TestTabs extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      activeItemIndex: 0,
      items: []
    }
  }
  componentWillMount() {
    this.setState({
      activeItemIndex: 0,
      items: [
        <div>Item 1</div>,
        <div>Item 2</div>,
        <div>Item 3</div>,
        <div>Item 4</div>,
      ]
    });
  }
 
  render() {
    return (
      <SwipeableTabs
        noFirstLeftPadding={false}
        noLastRightPadding={false}
        fitItems={false}
        alignCenter={true}
        borderWidthRatio={1}
        activeItemIndex={this.state.activeItemIndex}
        onItemClick={(item, index) => this.setState({ activeItemIndex: index })}
        items={this.state.items}
        borderPosition="bottom"
        borderThickness={4}
        borderColor="#4dc4c0"
        activeStyle={{
          color: '#4dc4c0'
        }}
      />


    );  
  }
} 
export default TestTabs;

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions