Skip to main content

ButtonList

Description​

A stacked button group for option-based items. It is typically used as a menu-mode fallback for Segmented - style controls

You can import the component from "@svar-ui/react-toolbar".

Usage​

ButtonList: React.ComponentType<{
  options?: { id: string | number; label: string }[];
  value?: string | number;
  css?: string;
  disabled?: boolean;
  onchange?: (ev: { value: string | number }) => void;
}>;

Parameters​

Each ButtonList object may have the following parameters:

  • options – (optional) specifies an array of options to be grouped and rendered by the component. Each object has two parameters:
    • id - (required) an id of an option
    • label - (required) the name of the option
  • value - (optional) the id of the currently selected option which is rendered with type="primary"
  • css - (optional) an extra CSS class appended to the .wx-button-list wrapper
  • disabled - (optional) defines whether all buttons in the list are disabled
  • onchange - (optional) fires when a new option is selected. The callback of the event takes an object with the following parameter:
    • value - (required) the id of the newly selected option

Example​

<script>
  import { Toolbar, ButtonList, registerToolbarItem } from "@svar-ui/react-toolbar";
  import { Segmented } from "@svar-ui/react-core";

  // register component for the `toolbar` mode
  registerToolbarItem("segmented", Segmented);
  // register a separate component for the `menu` mode
  registerToolbarItem("segmented", ButtonList, { menu: true });

  function onClick(item) {
    setMessage("Button '" + item.id + "' clicked");
  }

  const items = [
    // ... more toolbar items
    {
      id: "mode",
      comp: "segmented",
      value: "1",
      options: [
        { id: "1", label: "All" },
        { id: "2", label: "Active" },
      ],
      handler: onClick,
    },
  ];
</script>

<Toolbar items={items} />