Action Sheet Overview
Usage
The Action Sheet component should be used when a list of actions or links need to be grouped and hidden behind a button.
The go-action-sheet element must be accompanied by go-panel children. See Panel for details.
Bindings
() placement: 'bottom' | 'right' = 'bottom';
() shiftLeft: boolean = false;
placement
Optional binding that defines the placement of action sheet to render. Current supported positions: bottom, right. By default, action sheet will render with bottom set.
shiftLeft
If true, shiftLeft will move the pop up portion of the action sheet to the left and adjust the arrow to the right. This is useful for items close to the right edge of the page or container.
Action Sheet Structure
The action sheet component is split up into two sections. The trigger and the content. The simplest way to get the action sheet working is with two ng-containers.
<go-action-sheet>
<ng-container go-action-sheet__button>
<!-- a <go-icon-button> or <go-button> works well here -->
</ng-container>
<ng-container go-action-sheet-content>
<!-- here is where panels or accordions go -->
</ng-container>
</go-action-sheet>
Simple
A simple example to show the basic functionality of an action sheet.
Code
<go-action-sheet>
<ng-container go-action-sheet__button>
<go-button>
Action Sheet
</go-button>
</ng-container>
<ng-container go-action-sheet-content>
<go-panel panelContent="Panel 1">
</go-panel>
<go-panel panelContent="Panel 2">
</go-panel>
<go-panel panelContent="Panel 3">
</go-panel>
</ng-container>
</go-action-sheet>
View
With an Accordion
This example shows an instance where an accordion is being used inside of an action sheet. Passing true to the accordion's forActionSheet input is necessary for the accordion's styles to match the rest of the action sheet.
Code
<go-action-sheet>
<ng-container go-action-sheet__button>
<go-button>
Action Sheet
</go-button>
</ng-container>
<ng-container go-action-sheet-content>
<go-panel panelContent="Home" icon="home">
</go-panel>
<go-accordion showIcons="true" [slim]="true" [forActionSheet]="true">
<go-accordion-panel title="Home Stuff" icon="home" [borderless]="true">
Stuff about home
</go-accordion-panel>
</go-accordion>
</ng-container>
</go-action-sheet>
View
Placement
Code
A simple example to demo different placements defined by placement.
<go-action-sheet placement="bottom">
...
</go-action-sheet>
<go-action-sheet
placement="bottom"
[shiftLeft]="true">
...
</go-action-sheet>
<go-action-sheet placement="right">
...
</go-action-sheet>