Main ToolBar
Besides buttons for contextual actions, the ToolBar also features a Search.
Beware that this API will be replaced be the
ts.ui.Header
in a future release.
Before we begin, we may consider adding a descriptive title to the ToolBar.
ToolBar.buttons
Add buttons to the ToolBar with the buttons
method. This both sets and gets.
If you omit the argument, you"ll get the current buttons (jQuery style).
You can use array methods like push
, pop
, shift
,
unshift
, splice
, reverse
and so on to manage
buttons. Just note that the buttons length
is readonly.
-
The buttons
type
property works like the CSSclass
for a regular Button - The ToolBar will automatically sort all buttons from primary to tertiary.
- If there"s more than one tertiary button, these will be pushed to an Aside.
- In the mobile breakpoint, all the buttons will be pushed to an Aside.
Buttons won"t actually do anything unless you define the
onclick
method.
Fortunately, you can always change what happens when a button gets clicked.
Query buttons
You can locate buttons by index in the
buttons
collection. But since this isn"t likely to match the order in which
they appear on screen, it"s easier to give the buttons an id
and find them
using buttons.get()
.
Hide buttons
You can hide()
and show()
buttons. You can also toggle
visible
.
Disable buttons
You can disable()
and enable()
buttons. You can also toggle
disabled
.
Busy buttons
We can display a temporary progress indicator with the
busy
and done
methods.
The busy
method supports an optional status message.
Button groups
You can also group buttons in arrays to create button groups that look like this:
You can of course also create grouped buttons with icons instead of text.
Here"s a summary of the buttons
collection and button
model.
ToolBar.search
You'll get a dedicated search field by passing an object to the
search
method.
The search field expands when the field is focused by the user or whenever there's a non-empty value in the field. You can change the value like this:
Search callbacks
The onsearch
callback gets invoked when when the user presses
ENTER.
If defined, the onidle
method gets called whenever the user
pauses typing.
The onidle
method may also be called when the field loses
focus. The idletime
property controls the timeout value,
default is 500
(milliseconds).
Search info
The info
property doubles as both the
placeholder
when the field is expanded and the
title
(or tooltip) when the field is collapsed.
Search flex
You can flex
the search field to make it stretch the available
width of the ToolBar. In that case, it will remain expanded even when
there's no default value
.
You can also assign flex
to buttons, although that has little
practical value. In the future, we may provide a more advanced distribution
scheme. That's why we use a number instead of a boolean, but you should
always use 1 for now.
Here' an overview of the properties and methods of the Search model.
— and here's a final overview of the Main ToolBar methods.