Skip to content

Flow

Flow

Flow uses either a static list or a dynamic script call to populate the flow. If the Flow is a date type, selected and today boolean are included as data for the layout to use.

https://webgradients.com/

Component

Name Description
component flow
script script handle or id; it should return an array of objects which will populate the view
list static list of data
axis horizontal or vertical
count fixed (based on content), infinite
options required or default to screen height
header optional, if provided, will used to render "tiled" (see additional styles for header)
title optional, if provided, will be used to render "week title"
placeholder (previously zoomIn) when in tiled mode, layout used when user use zoom in gesture, if not provided use "child"
child child to be displayed in each view

Options

Name Description
scale How to scale the views as they are swapped in
viewPort Viewport ratio where 1 fills the screen
align none, week
step day, month, week
calendarPageId an id of page to pop up when user tap on calendar icon
weekHeader show or hide, hide, will not show week header
selectedColor optional color to use to fill the background of selected date
todayColor optional color to use to fill the background of selected date that is today
tiled see tiled options below
navigation none, tiled - show alternate navigation from the flow

Tiled options

Name Description
maxHeight max height per each tiled
styles a map styles for the tiled container
weekNumber styles for week number
emptyListText optional, string to display when there are no data, use default message if not provided
weekDivider TBD, widget use to divide week (to be implemented)

Supported events

The events below can be used to interact with tiled. The event can be trigger by using MessgeEvent

Name Description
dateChanged notify that user has changed the tiled date (for date tiled), this will scroll the tiles so that the active tile is visible
flowTiledDetailClosed notify that user has closed the flow tiled detail page

Additional styles for header

For header (used for tiled), we can apply additional styles for selected and today tiled. Styles will apply appropriately. The values in classes.selected styles will overrided the default styles when the tiled is selected.

"header": {
  "styles": {

  },
  "classes": {
    "selected": {
      ...
    }
  }
}

Example

{
  "component": "flow",
  "options": {
    "scale": 0.96,
    "viewPort": 0.85
  },
  "script": "player-cards",
  "styles": {
    "borderRadius": 20,
    "margin": "35px 8px",
    "border": "1px solid #58B150"
  }
}

Turned off tile

{
  "component": "flow",
  "options": {
    "scale": 0.96,
    "viewPort": 0.85
  },
  "script": "player-cards",
  "styles": {
    "borderRadius": 20,
    "margin": "35px 8px",
    "border": "1px solid #58B150"
  },
  "tiled": "off"
}