woocommerce/plugins/woocommerce-blocks/assets/js/components/toggle-button-control/README.md

73 lines
2.0 KiB
Markdown
Raw Normal View History

# ToggleButtonControl
ToggleButtonControl is used to generate a series of toggle buttons where only one selection is possible. It uses a ButtonGroup component to output each toggle button.
![A toggle button control](screenshot.png)
## Usage
Render a user interface to select multiple users from a list.
```jsx
<ToggleButtonControl
label={ __( 'Display style', 'woo-gutenberg-products-block' ) }
value={ isDropdown ? 'dropdown' : 'list' }
help="This is some helper text that shows below the controls."
options={ [
{ label: __( 'List', 'woo-gutenberg-products-block' ), value: 'list' },
{ label: __( 'Dropdown', 'woo-gutenberg-products-block' ), value: 'dropdown' },
] }
onChange={ ( value ) => setAttributes( { isDropdown: 'dropdown' === value } ) }
/>
) );
```
## Props
The component accepts the following props:
### label
If this property is added, a label will be generated using label property as the content.
- Type: `String`
- Required: No
### help
If this property is added, a help text will be generated using help property as the content.
- Type: `String|WPElement`
- Required: No
### value
If value is passed, one of the options will have pressed state.
If no value is passed no button will have pressed state.
- Type: `String`
- Required: No
### onChange
A function that receives the selected value (string) as input.
- Type: `function`
- Required: Yes
### className
The class that will be added with `components-base-control` and `components-toggle-button-control` to the classes of the wrapper div. If no className is passed only `components-base-control` and `components-toggle-button-control` are used.
Type: String
Required: No
#### options
An array of objects containing the following properties:
- `label`: (string) The label to be shown to the user.
- `value`: (Object) The internal value used to choose the selected value. This is also the value passed to onChange when the option is selected.
Type: `Array`
Required: No