Layout

5min
The optional layout option defines, which layout is used for rendering the library. It accepts an object, with the following layout configuration options:
Type definition
TypeScript
type LayoutConfig = {
  assetOrientation?: Orientation;
  breakpoints?: number[];
  view?: 'grid' | 'list' | 'slider';
};
type LayoutConfig = {
  assetOrientation?: Orientation;
  breakpoints?: number[];
  view?: 'grid' | 'list' | 'slider';
};
﻿
Asset orientation
The assetOrientation option defines whether assets should be rendered in portrait or landscape format.
Layout asset orientation usage example
window.LiSA.library.configs.push({
  layout: {
    assetOrientation: 'landscape',
  },
});
window.LiSA.library.configs.push({
  layout: {
    assetOrientation: 'landscape',
  },
});
﻿
Breakpoints
The breakpoints option allows you to define individual breakpoints for your responsive design. If not provided, LiSA Library defaults to the breakpoints described in Responsive design﻿.
Breakpoints usage example
window.LiSA.library.configs.push({
  layout: {
    breakpoints: [480, 854],
  },
});
window.LiSA.library.configs.push({
  layout: {
    breakpoints: [480, 854],
  },
});
﻿
View
The view option sets the library's layout. It accepts a string value that is one of the following:
list (Default) — A vertical show listing.
grid — A grid view of all shows
slider — Similar to the grid layout, except for keeping all shows of a section in a horizontal, scrollable row.
View usage example
window.LiSA.library.configs.push({
  layout: {
    view 'grid',
  },
});
window.LiSA.library.configs.push({
  layout: {
    view 'grid',
  },
});
﻿
﻿
﻿
Updated 25 Mar 2024
Did this page help you?
Host node
Language
Layout

Type definition

Asset orientation

Breakpoints

View

﻿
