Toolbar

a primitive for creating a Toolbar component.

• View ARIA pattern W3C
• View source code GitHub
• View code coverage v8-coverage
• View type documentation typedoc

Anatomy

Figure: Anatomy of Toolbar component

API Reference

const {
  toolbarProps
} = createToolbar<T extends HTMLElement>(args: ToolbarArguments, ref: Accessor<T | null>): AriaToolbar;

const {
  toolbarProps, toolbarRef
} = createToolbar<T extends HTMLElement>(args: ToolbarArguments): AriaToolbarWithRef<T>;

Parameters [ToolbarArguments]

Name	Type	Default	Description
'aria-labelledby'	string	-	The `id` of the element that hold the label text.
'aria-label'	string	-	Alternative to `aria-labelledby` when the element with the label text is not available.
orientation	'horizontal' | 'vertical'	'horizontal'	Changes keyboard controls to match the orientation of the toolbar.

Return value [AriaToolbar]

Name	Type	Description
toolbarProps *	JSX.HTMLAttributes<T>	Props to spread on the toolbar element.
toolbarRef	(node: T) => void	Solid.js directive for refrerencing the toolbar DOM element.

Example

Playground

BoldItalicsUnderlineExit

Code

import { createToolbar, type ToolbarArguments } from "solid-apg/toolbar";

import type { VoidComponent } from "solid-js";

type ToolbarProps = ToolbarArguments;

export const Toolbar: VoidComponent<ToolbarProps> = (props) => {
  const { toolbarProps, toolbarRef } = createToolbar<HTMLDivElement>(props);

  return (
    <div class="dark:bg-slate-100 bg-slate-900 p-4 flex gap-4 flex-wrap" use:toolbarRef {...toolbarProps}>
      <button class="btn" onClick={() => alert("Bold")}>
        Bold
      </button>
      <button class="btn" onClick={() => alert("Italics")}>
        Italics
      </button>
      <button class="btn" disabled>
        Underline
      </button>
      <button class="btn">Exit</button>
    </div>
  );
};

Screen reader