CSS Border Selector
The Css Border Selector component consists of 5 button elements. As the title of the component suggests this would be best used as a selector for borders. You have the ability to select all the borders by clicking the middle button, or alternatively you could be creative and individually select what sides you want to be bordered.
The props needed for this component are listed and explained below:
-
top- This prop must be aboolean. The true or false will tell the top selector of the component whether it is selected or not. -
bottom- This prop must be aboolean. The true or false will tell the bottom selector of the component whether it is selected or not. -
right- This prop must be aboolean. The true or false will tell the right selector of the component whether it is selected or not. -
left- This prop must be aboolean. The true or false will tell the left selector of the component whether it is selected or not. -
onChange- This prop must be afunction. The onChange function gets triggered every time a selectors state changes. Inside the component, the function passes back thebooleanvalue of each selector.
<CssBorderSelector
top={this.state.top}
right={this.state.right}
bottom={this.state.bottom}
left={this.state.left}
onChange={this.onChange}
/>
// ...React Component
getInitialState: function() {
top: true,
right: true,
bottom: false,
left: true
},
onChange: function(top, right, bottom, left) {
this.setState({
top: top,
right: right,
bottom: bottom,
left: left
});
}