Skip to content

Commit

Permalink
docs(menu-toggle): Adds docs for split button examples. (patternfly#1…
Browse files Browse the repository at this point in the history
…0268)

* docs(menu-toggle): Adds docs for split button examples.

* Update names of split toggle examples.
  • Loading branch information
edonehoo authored and tlabaj committed Jun 14, 2024
1 parent 9c8d53c commit adf25df
Showing 1 changed file with 12 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -191,9 +191,11 @@ import { MenuToggle } from '@patternfly/react-core';
</React.Fragment>
```

### Split button toggle with checkbox
### Split toggle with checkbox

To add an action button or other control to a menu toggle, use a split button. A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.
To add a checkbox (or other action/control) to a menu toggle, use a split button.

A `<MenuToggle>` can be rendered as a split button by adding a `splitButtonOptions` object. Elements to be displayed before the toggle button must be included in the `items` property of `splitButtonOptions`.

The following example shows a split button with a `<MenuToggleCheckbox>`.

Expand All @@ -203,25 +205,25 @@ Variant styling can be applied to split button toggles to adjust their appearanc

```

### Split button toggle with checkbox label
### Split toggle with labeled checkbox

To display text in a split button menu toggle, add a label to the `items` property of `splitButtonOptions`.
To add a text label to a split button toggle, pass `children` to the `<MenuToggle>` component.

```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'

```

### Split button toggle with checkbox and toggle button text
### Split toggle with checkbox and toggle text label

For split button toggles that should still contain text which will trigger the toggle's `onClick`, pass `children` to the `MenuToggle`.
You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.

The following example shows a split button with a `<MenuToggleCheckbox>` and toggle button text.
To do so, pass `children` to the `<MenuToggleCheckbox>` component. When the menu toggle text is clicked, the checkbox's `onChange` callback will be triggered.

```ts file='MenuToggleSplitButtonCheckboxWithToggleText.tsx'
```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'

```

### Split button toggle with action
### Split toggle with action

To add an action to a split button, pass `variant='action'` into `splitButtonOptions` and add a `<MenuToggleAction>` to the `items` property of `splitButtonOptions`.

Expand Down

0 comments on commit adf25df

Please sign in to comment.