umbLayoutSelector
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).
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F65787334-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F8h0xdoteqcFVV1pGZgk0%252Fuploads%252Fgit-blob-b3cc9b5f64b9aa5d62d9ddafb50f626f59cc50d5%252FumbLayoutSelector.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d1abff20&sv=1)
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.
Last updated