Skip to content

Configuring a StorytellerStoriesRowView#

Initialization#

The Row View can be initialized in the same way as shown in Configuring a StorytellerListView:

Stories initialization#

const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id'); // All categories
const storyRowWithCategories = new Storyteller.StorytellerStoriesRowView(
  'stories-row-id',
  ['category-1', 'category-2']
);

Clips initialization#

const clipsRow = new Storyteller.StorytellerClipsRowView(
  'clips-row-id',
  'clip-collection-id'
);

Note

The Storyteller Row Cells will expand to fill the height of the parent container. Make sure that the parent container has a height set or else the row will not be visible

Configuration#

The ListConfiguration class is used to configure the Storyteller.StorytellerStoriesRowView and Storyteller.StorytellerClipsRowView classes.

Stories configuration#

const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id');
storyRow.configuration = {
  categories: ['category1', 'category2', 'category3'], // Stories only
  cellType: Storyteller.CellType.round, // Stories only
  displayLimit: 10,
  preload: true, // Stories only
  theme: customTheme,
  uiStyle: 'dark',
};

const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id');
const storyRowConfiguration: IListConfiguration<'StorytellerStoriesRowView'> = {
  categories: ['category1', 'category2', 'category3'], // Stories only
  cellType: Storyteller.CellType.round, // Only for `StorytellerStoriesRowView`
  displayLimit: 10,
  preload: true, // Stories only
  theme: customTheme,
  uiStyle: 'dark',
};
storyRow.configuration = storyRowConfiguration;

Clips configuration#

const clipsRow = new Storyteller.StorytellerClipsRowView(
  'clips-row-id',
  'collection-id'
);
clipsRow.configuration = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: 'dark',
};

const clipsRow = new Storyteller.StorytellerClipsRowView(
  'clips-row-id',
  'collection-id'
);
const clipsRowConfiguration: IListConfiguration<'StorytellerClipsRowView'> = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: 'dark',
};
clipsRow.configuration = clipsRowConfiguration;

The Storyteller.StorytellerStoriesRowView.ListConfiguration and Storyteller.StorytellerClipsRowView.ListConfiguration classes inherit all of the attributes shown in StorytellerListView, as well as the following:

cellType#

The cellType is the style of the cell. This can either be round or square. The default value is square.