A toolbar is a container for grouping a set of controls, such as buttons, menubuttons, or checkboxes.
usage import { Toolbar, ToolbarContext, useToolbarContext, useToolbarProps, ClearToolbar } from "@sharegate/orbit-ui";A default toolbar.
Editable example
< Toolbar >
< TextInput placeholder = " Destination " />
< RadioGroup >
< Radio value = " roscosmos " > Roscosmos </ Radio >
< Radio value = " nasa " > NASA </ Radio >
</ RadioGroup >
< CheckboxGroup >
< ToggleButton variant = " secondary " value = " round-trip " >
Round trip
</ ToggleButton >
< ToggleButton variant = " secondary " value = " one-way " >
One way
</ ToggleButton >
</ CheckboxGroup >
</ Toolbar >
A toolbar can have a few disabled controls.
Editable example
< Toolbar >
< TextInput placeholder = " Destination " />
< RadioGroup disabled >
< Radio value = " roscosmos " > Roscosmos </ Radio >
< Radio value = " nasa " > NASA </ Radio >
</ RadioGroup >
< CheckboxGroup >
< ToggleButton variant = " secondary " value = " round-trip " >
Round trip
</ ToggleButton >
< ToggleButton variant = " secondary " value = " one-way " >
One way
</ ToggleButton >
</ CheckboxGroup >
</ Toolbar >
Or disabled all the controls.
Editable example
< Toolbar disabled >
< TextInput placeholder = " Destination " />
< RadioGroup >
< Radio value = " roscosmos " > Roscosmos </ Radio >
< Radio value = " nasa " > NASA </ Radio >
</ RadioGroup >
< CheckboxGroup >
< ToggleButton variant = " secondary " value = " round-trip " >
Round trip
</ ToggleButton >
< ToggleButton variant = " secondary " value = " one-way " >
One way
</ ToggleButton >
</ CheckboxGroup >
</ Toolbar >
The gap between a toolbar controls is configurable.
Editable example
< Toolbar gap = { 9 } >
< TextInput placeholder = " Destination " />
< RadioGroup >
< Radio value = " roscosmos " > Roscosmos </ Radio >
< Radio value = " nasa " > NASA </ Radio >
</ RadioGroup >
< CheckboxGroup >
< ToggleButton variant = " secondary " value = " round-trip " >
Round trip
</ ToggleButton >
< ToggleButton variant = " secondary " value = " one-way " >
One way
</ ToggleButton >
</ CheckboxGroup >
</ Toolbar >
A toolbar can change his orientation to vertical to render his controls horizontally.
Editable example
< Toolbar orientation = " vertical " >
< TextInput placeholder = " Destination " />
< RadioGroup >
< Radio value = " roscosmos " > Roscosmos </ Radio >
< Radio value = " nasa " > NASA </ Radio >
</ RadioGroup >
< CheckboxGroup >
< ToggleButton variant = " secondary " value = " round-trip " >
Round trip
</ ToggleButton >
< ToggleButton variant = " secondary " value = " one-way " >
One way
</ ToggleButton >
</ CheckboxGroup >
</ Toolbar >
Toolbar controls can wrap on multiple lines.
Editable example
< Div
width = { {
base : "200px" ,
sm : "700px"
} }
>
< Toolbar wrap >
< TextInput placeholder = " Destination " />
< RadioGroup >
< Radio value = " roscosmos " > Roscosmos </ Radio >
< Radio value = " nasa " > NASA </ Radio >
</ RadioGroup >
< CheckboxGroup >
< ToggleButton variant = " secondary " value = " round-trip " >
Round trip
</ ToggleButton >
< ToggleButton variant = " secondary " value = " one-way " >
One way
</ ToggleButton >
</ CheckboxGroup >
</ Toolbar >
</ Div >
Any component can be added to a toolbar. However to benefit from the toolbar behaviors, a component must implement the ToolbarContext. This is done by using the useToolbarProps hook.
Editable example
function CustomComponent ( props ) {
const [ toolbarProps ] = useToolbarProps ( ) ;
return (
< HtmlInput
{ ... props }
{ ... omitProps ( toolbarProps , [ "orientation" ] ) }
border = " alias-low-break "
type = " text "
/>
) ;
}
render ( ( ) => {
return (
< Toolbar >
< CustomComponent />
< RadioGroup >
< Radio value = " mars " > Mars </ Radio >
< Radio value = " jupiter " > Jupiter </ Radio >
< Radio value = " pluton " > Pluton </ Radio >
</ RadioGroup >
</ Toolbar >
) ;
} ) ;
usage import { Toolbar } from "@sharegate/orbit-ui";Name Description Default alignX The horizontal alignment of the elements.
"center" | "end" | "start" | ResponsiveValue<FlexAlignment>
- alignY The vertical alignment of the elements.
"center" | "end" | "start" | ResponsiveValue<FlexAlignment>
- autoFocus Whether or not the toolbar should autoFocus the first tabbable element on render.
- children * React children.
string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal
- disabled Whether or not the toolbar elements are disabled.
- fluid Whether the toolbar take up the width of its container.
false | true | ResponsiveValue<boolean>
- orientation The orientation of the elements.
"horizontal" | "vertical" | ResponsiveValue<FlexOrientation>
horizontal
wrap Whether or not the elements are forced onto one line or can wrap onto multiple lines
false | true | ResponsiveValue<boolean>
true