When you have a list of items, you can use the umb-layout-selector directive to let users toggle between different layouts. For instance, in Umbraco's media archive, users can select between a grid-based layout (thumbnails) and a list-based layout (table).
The directive has three attributes:
layouts is used to indicate the available layouts that the user should be able to select.
active-layout is a reference to the layout currently being used.
on-layout-select is a callback function triggered when the user chooses another layout.
For a view utilizing this directive:
The HTML could look something like this:
You'd also need a controller for initializing the different values to be used for the directive:
For each layout:
name property indicates the visual name of the layout (eg. used when hovering over the layout in the selector)
icon is the CSS selector for the icon of the layout.
path attribute indicates a sort of alias, and is used internally for comparing the layouts.
Each layout should also have a selected property indicating whether a particular layout is enabled, and thereby visible in the selector.