A Web Component which enables you to have central content with a left and right tray which can 'push' into view.
Left tray content Right tray content Right tray content
Elements do not have to be sections, the required part is the
tray-right class names.
data-width only applies to the left and right trays and will default to
100% if you do not specify it.
Ion components are stateless and interaction is achieved through events. The component listens for the following events on the
showLeftTray Shows the left tray.
showCenterTray Shows the center tray.
showRightTray Shows the right tray.
var ionTray = document;ionTray;
Note that when you open a side tray the user can click anywhere in the center tray to bring it back into position.
Styling the trays
The styling of the content is up to you. To style the tray containers you need to use the
You can also apply styles based on a side tray being open: