Skip to content

Css Border Radius Selector

brandonk1234 edited this page Dec 5, 2016 · 7 revisions

CssBorderRadiusSelector

Similar to the Css Border Selector, the Css Border Radius Selector consists of 5 button elements.You have the ability to select all the borders by clicking the middle button, or alternatively you could individually select what sides you want to apply a border radius to.

Props

The props needed for this component are listed and explained below:

  • topLeft - This prop must be a boolean.

  • topRight - This prop must be a boolean.

  • bottomLeft - This prop must be a boolean.

  • bottomRight - This prop must be a boolean.

  • onChange - This prop must be a function.

Example

<CssBorderRadiusSelector 
    topLeft={this.state.topLeft}
    topRight={this.state.topRight}
    bottomRight={this.state.bottomRight}
    bottomLeft={this.state.bottomLeft}
    onChange={this.onRadiusSelectorChanged}
/>
//...React component
getInitialState: function() {
    return {
        topLeft: true,
        topRight: false,
        bottomRight: false,
        bottomLeft: true        
    }
},

onChange: function(topLeft, topRight, bottomRight, bottomLeft) {
    this.setState({
        topLeft: topLeft,
        topRight: topRight,
        bottomRight: bottomRight,
        bottomLeft: bottomLeft              
    })
}

Related