string
Represents the aria-label
HTML attribute of the Toolbar component.
<Toolbar ariaLabel="Main toolbar" />
buttonScrollSpeed?
number
100
Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button. Applicable when the overflow property is set to scroll
.
React.ReactNode
Determines the children nodes.
className?
string
Sets additional classes to the Toolbar.
<Toolbar className="custom-toolbar" />
dir?
string
Represents the dir
HTML attribute.
"null" | "flat" | "solid" | "outline"
solid
Configures the fillMode
of the Toolbar. The available options are:
solid
—Applies a background
color and solid borders
.flat
—Sets a transparent background
and solid bottom border
.outline
—Sets a transparent background
and solid borders
.null
—This option removes the built-in fill mode styles of the Toolbar. Allows for custom background
and border
styles.<Toolbar fillMode="flat" />
id?
string
Sets the id
property of the top div element of the component.
boolean
If set to false
, it will turn off the built-in keyboard navigation.
<Toolbar keyboardNavigation={false} />
nextButton?
React.ComponentType<undefined>
Defines the custom component that will be rendered as a next button. To remove the button, set a function which returns null () => null
.
(event: ToolbarResizeEvent) => void
The resize
event of the Toolbar.
<Toolbar onResize={(event) => console.log(event)} />
overflow?
"section" | "none" | "scroll"
none
Represents the possible overflow mode options of the Toolbar. Applicable when there is not enough space to render all tools.
prevButton?
React.ComponentType<undefined>
Defines the custom component that will be rendered as a previous button. To remove the button, set a function which returns null () => null
.
"auto" | "visible" | "hidden"
auto
Determines the Toolbar scroll buttons visibility. Applicable when the overflow property is set to scroll
.
"split" | "end" | "start"
split
Determines the Toolbar scroll buttons position. Applicable when the overflow property is set to scroll
.
"null" | "small" | "large" | "medium"
medium
Configures the size
of the Toolbar. The available options are:
small
—Sets the padding of the component to 4px 4px.medium
—Sets the padding of the component to 8px 8px.large
—Sets the padding of the component to 10px 10px.null
—This option removes the the built-in size styles of the Toolbar. Allows for custom padding
.
React.CSSProperties
The styles that are applied to the Toolbar.
<Toolbar style={{ backgroundColor: 'lightblue' }} />
tabIndex?
number
Specifies the tabIndex
of the Toolbar.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4