Aside
Side-panel used for small user interactions, such as selecting a date.
The Aside
component must be created with a child component
Panel
.
You can create the Aside
wherever you like, just make sure that it's
positioned outside of the Main
element when it opens. Perhaps you can
simply place it in the body
.
Adding a header
The data-ts.title
attribute configures the Aside with a
nice header.
Adding a footer
You can insert a footer in the Aside. Note that the footer will be fixed at the bottom of the aside.
Opening the aside
The data-ts.open
attribute can be flipped to toggle the Aside.
Let's try that with jQuery.
If you are doing that, you might as well open the Aside via the certified API.
Adding some tabs
If an Aside
contains more than one Panel
, we will
automatically create a TabBar to switch between the panels like in
this example.
The tabs can also be created programatically. In that case, the panel switching mechanism must be implemented manually somehow.
You can also mix the two approaches to dynamically update tabs that were created
with Panel
elements. This will for example assign an
onselect
callback to the third tab.
To remove all dynamically created tabs, you can simply clear the tab collection.
Adding some buttons
It's common for Asides to show a group of buttons, usually following a set of form fields. To make sure that they always look the same, the certified way to add this group of buttons is via a Buttons menu.
Showing the spinner
The data-ts.busy
attribute can be set to show the spinner
Let's try that with jQuery.
Tracking the state
You can setup inline callbacks to be invoked when the aside changes state using
one of
onopen
, onopened
,
onclose
and
onclosed
. You can also do this with
event listeners
if you like.
Stacking Asides
Asides will automatically stack themselves whenever new asides open.
- The old Asides will slide elegantly to the right
- The new Aside will float the top of the z-index
Tooltip on aside header
A tooltip can be added to the aside header with the
data-ts.tooltip
attribute. Set the value equal to the text to be
displayed in the tooltip.
The tooltip can also be toggled via the API. Provide a string as the first parameter to the function tooltip in order to change the contents of the tooltip.
Run the script below to open the Aside with tooltip.