Many projects we build are built off a single page – typically a full bleed map with with content panes that enter on & off the canvas. Base provides builtin ideas for creating such an interface which we'll take a look at in this example.
1. Canvas with left content pane
The main components to this interface is a parent container will be full bleed and a child container that has a
col4 width and
pin-left class to absolutely position this overtop of the canvas and to the left. This interface could easily be adaptable for a full width app with with slideout sidebar.
As with any absolute positioned element, the top and left position is governed by a parent element that has a
position:relative. the base class
contain provides this and is added to container surrounding the left pane
2. offcanvas rule
For example sake We don't want to show the left panel right away but have it triggered on by user interaction. Let's hide it
from the page by using a
offcanvas-left rule which sets a negative left position to the element. To achieve the desired result the parent container will need a
clip class so as to prevent the visibility of the element off the canvas.
3. Activate the panel with
offcanvas-leftis set from -100% to 0 (on canvas) when either an
activeclass is applied to it or a
:targetevent is triggered.
:targetrefers to the current hash name present in the url. I've added a 'trigger' link that has an
#step-3. This matches the id of the sliding panel. When the hash of
#step-3is present in the url we know that left panel should be active. The trigger link should therefore activate the presence of out sliding pane.
4. Animate the panel
The current experience of a panel entering in and off the canvas is a little jarring. Let's make the experience a little smoother by applying an
animate class to the sliding container. To close the panel, I've added a close link that has a href value of
#. Rememeber that this resets the hash in the url and consequently returns the sliding panel back to the intial offcanvas position.