A container for grouping a set of controls, such as buttons, toggle groups or dropdown menus.
import React from 'react';
import { Toolbar, ToolbarIconButton } from '@minddrop/ui';
export const ToolbarDemo = () => (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Toolbar
style={{
display: 'flex',
padding: 10,
width: '100%',
minWidth: 'max-content',
borderRadius: 6,
backgroundColor: 'white',
boxShadow: '0px 2px 10px rgba(0 0 0 0.14)',
}}
>
<ToolbarIconButton icon="cloud-upload" label="Sync" />
<ToolbarIconButton icon="settings" label="Settings" />
<ToolbarIconButton icon="duplicate" label="Open new window" />
</Toolbar>
</div>
);
export default ToolbarDemo;
Import the component from the @minddrop/ui
package.
import { Toolbar, ToolbarIconButton } from '@minddrop/ui';
import {
FormatBold,
FormatItalic,
FormatStrikethrough,
} from '@minddrop/icons';
export default () => {
return (
<Toolbar aria-label="Formatting options">
<ToolbarIconButton label="Bold">
<FormatBold />
</ToolbarIconButton>
<ToolbarIconButton label="Italic">
<FormatItalic />
</ToolbarIconButton>
<ToolbarIconButton label="Strikethrough">
<FormatStrikethrough />
</ToolbarIconButton>
</Toolbar>
);
};
ToolbarProps
extends React.HTMLAttributes<HTMLDivElement>
.
Prop | Type | Default |
---|---|---|
children | ToolbarIconButton | |
direction | 'ltr' | 'rtl' | 'ltr' |
loop | boolean | true |
orientation | 'horizontal' | 'vertical' | 'horizontal' |
Uses roving tabindex to manage focus movement among items.
Key | Description |
---|---|
Tab | Moves focus to the first item in the group. |
Space | Activates/deactivates the item. |
Enter | Activates/deactivates the item. |
ArrowDown | Moves focus to the next item depending on orientation . |
ArrowRight | Moves focus to the next item depending on orientation . |
ArrowUp | Moves focus to the previous item depending on orientation . |
ArrowLeft | Moves focus to the previous item depending on orientation . |
Home | Moves focus to the first item. |
End | Moves focus to the last item. |