Toolbar

Use cases:

• As a container for grouping a set of controls

Example

ButtonOption 1Second optionOption 3OneTwoThree

React

Declaration

<rapid-toolbar></rapid-toolbar>

Usage

@customElement({
  name: 'my-element',
  template: html`
      <rapid-toolbar>
        <rapid-button>Button</rapid-button>
        <rapid-select>
          <rapid-option>Option 1</rapid-option>
          <rapid-option>Second option</rapid-option>
          <rapid-option>Option 3</rapid-option>
        </rapid-select>
        <rapid-radio-group>
          <rapid-radio checked="">One</rapid-radio>
          <rapid-radio>Two</rapid-radio>
          <rapid-radio>Three</rapid-radio>
        </rapid-radio-group>
      </rapid-toolbar>
      `,
})
export class MyElement extends GenesisElement {
}

Genesis

Declaration

<Toolbar></Toolbar>

Usage

import { Button, ListboxOption, Radio, RadioGroup, Select, Toolbar } from '@genesislcap/rapid-design-system/react';

export function MyComponent() {

  const handleRadioFieldChanged = (event) => {
    const target = event.target as HTMLInputElement;
    console.log(target.value);
  };

  return (
    <Toolbar>
      <Button>Button</Button>
      <Select>
        <ListboxOption>Option 1</ListboxOption>
        <ListboxOption>Second option</ListboxOption>
        <ListboxOption>Option 3</ListboxOption>
      </Select>
      <RadioGroup>
        <Radio checked="">One</Radio>
        <Radio>Two</Radio>
        <Radio>Three</Radio>
      </RadioGroup>
    </Toolbar>
  );
}

Angular

Declaration

<rapid-toolbar></rapid-toolbar>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
          <rapid-toolbar>
            <rapid-button>Button</rapid-button>
            <rapid-select>
              <rapid-option>Option 1</rapid-option>
              <rapid-option>Second option</rapid-option>
              <rapid-option>Option 3</rapid-option>
            </rapid-select>
            <rapid-radio-group>
              <rapid-radio checked="">One</rapid-radio>
              <rapid-radio>Two</rapid-radio>
              <rapid-radio>Three</rapid-radio>
            </rapid-radio-group>
          </rapid-toolbar>
          `,
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
}

API

Property and attribute binding examples for Genesis Component syntax.

Name	Type	Description	Example
orientation	ToolbarOrientation	The orientation of the toolbar, horizontal or vertical. Default: horizontal	<rapid-toolbar orientation="horizontal">

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Use
start	Content which can be provided before the slotted items
end	Content which can be provided after the slotted items
label	The toolbar label

Parts

Part	Description
positioning-region	The element containing the items, start and end slots

Events fired

No events fired.

Events listened to

This component doesn't listen to any events.