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> |