Toolbar API
API documentation for Toolbar component
Props#
Defines valid properties in Toolbar component.
name | type | default | description |
---|
ref | Ref<unknown> | null | The reference to the component instance. |
pIf | boolean | true | Whether the component should be rendered. |
style | CSSProperties | ((instance?: ToolbarInstance) => CSSProperties) | null | The style to apply to the component. |
className | string | ((instance?: ToolbarInstance) => string) | null | The class name to apply to the component. |
as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
asChild | boolean | false | Whether the component should be rendered as a child component. |
pt | SafeRecord<ToolbarPassThrough> | null | The pass-through props to pass to the component |
ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
unstyled | boolean | null | Whether the component should be rendered without classes. |
dt | unknown | null | The design token to use for the component. |
styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
children | ReactNode | ((instance: ToolbarInstance) => ReactNode) | null | The children to render. |
[key: string] | any | null | |
pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of Toolbar component.
name | type | default | description |
---|
root | ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |
start | ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the start's DOM element. |
center | ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the center's DOM element. |
end | ToolbarPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the end's DOM element. |
Types#
Instance
Instance of Toolbar component.
values |
---|
ComponentInstance<ToolbarProps, ToolbarState, ToolbarExposes> |
Props#
Defines valid properties in ToolbarStart component.
name | type | default | description |
---|
ref | Ref<unknown> | null | The reference to the component instance. |
pIf | boolean | true | Whether the component should be rendered. |
style | CSSProperties | ((instance?: ToolbarStartInstance) => CSSProperties) | null | The style to apply to the component. |
className | string | ((instance?: ToolbarStartInstance) => string) | null | The class name to apply to the component. |
as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
asChild | boolean | false | Whether the component should be rendered as a child component. |
pt | SafeRecord<ToolbarStartPassThrough> | null | The pass-through props to pass to the component |
ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
unstyled | boolean | null | Whether the component should be rendered without classes. |
dt | unknown | null | The design token to use for the component. |
styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
children | ReactNode | ((instance: ToolbarStartInstance) => ReactNode) | null | The children to render. |
[key: string] | any | null | |
pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ToolbarStart component.
name | type | default | description |
---|
toolbar | ToolbarInstance | null | The Toolbar component instance. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ToolbarStart component.
name | type | default | description |
---|
root | ToolbarStartPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ToolbarStart component.
values |
---|
ComponentInstance<ToolbarStartProps, ToolbarStartState, ToolbarStartExposes> |
Props#
Defines valid properties in ToolbarCenter component.
name | type | default | description |
---|
ref | Ref<unknown> | null | The reference to the component instance. |
pIf | boolean | true | Whether the component should be rendered. |
style | CSSProperties | ((instance?: ToolbarCenterInstance) => CSSProperties) | null | The style to apply to the component. |
className | string | ((instance?: ToolbarCenterInstance) => string) | null | The class name to apply to the component. |
as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
asChild | boolean | false | Whether the component should be rendered as a child component. |
pt | SafeRecord<ToolbarCenterPassThrough> | null | The pass-through props to pass to the component |
ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
unstyled | boolean | null | Whether the component should be rendered without classes. |
dt | unknown | null | The design token to use for the component. |
styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
children | ReactNode | ((instance: ToolbarCenterInstance) => ReactNode) | null | The children to render. |
[key: string] | any | null | |
pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ToolbarCenter component.
name | type | default | description |
---|
toolbar | ToolbarInstance | null | The Toolbar component instance. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ToolbarCenter component.
name | type | default | description |
---|
root | ToolbarCenterPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ToolbarCenter component.
values |
---|
ComponentInstance<ToolbarCenterProps, ToolbarCenterState, ToolbarCenterExposes> |
Props#
Defines valid properties in ToolbarEnd component.
name | type | default | description |
---|
ref | Ref<unknown> | null | The reference to the component instance. |
pIf | boolean | true | Whether the component should be rendered. |
style | CSSProperties | ((instance?: ToolbarEndInstance) => CSSProperties) | null | The style to apply to the component. |
className | string | ((instance?: ToolbarEndInstance) => string) | null | The class name to apply to the component. |
as | string | number | bigint | boolean | ComponentClass<any, any> | FunctionComponent<any> | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode, any, any> | ReactPortal | Promise<AwaitedReactNode> | null | The component type to render. |
asChild | boolean | false | Whether the component should be rendered as a child component. |
pt | SafeRecord<ToolbarEndPassThrough> | null | The pass-through props to pass to the component |
ptOptions | PassThroughOptions | null | The pass-through options to pass to the component |
unstyled | boolean | null | Whether the component should be rendered without classes. |
dt | unknown | null | The design token to use for the component. |
styles | StylesOptions<ComponentInstance> | null | The styles to use for the component. |
children | ReactNode | ((instance: ToolbarEndInstance) => ReactNode) | null | The children to render. |
[key: string] | any | null | |
pt-{optionName}-* | - | null | Pass through attributes for customizing component. For more info, see Pass Through tab. |
Exposes#
Defines the methods and properties exposed by ToolbarEnd component.
name | type | default | description |
---|
toolbar | ToolbarInstance | null | The Toolbar component instance. |
Interfaces#
PassThroughOptions
Defines passthrough(pt) options of ToolbarEnd component.
name | type | default | description |
---|
root | ToolbarEndPassThroughType<HTMLAttributes<HTMLDivElement>> | null | Used to pass attributes to the root's DOM element. |
Types#
Instance
Instance of ToolbarEnd component.
values |
---|
ComponentInstance<ToolbarEndProps, ToolbarEndState, ToolbarEndExposes> |
Types#
Instance
Instance of useToolbar headless.
values |
---|
HeadlessInstance<useToolbarProps, useToolbarState, useToolbarExposes> |