@applicaster/horizontal-list-qb

Horizontal List for Quick Brick

Usage no npm install needed!

<script type="module">
  import applicasterHorizontalListQb from 'https://cdn.skypack.dev/@applicaster/horizontal-list-qb';
</script>

README

Horizontal List

It is the home for the Quick Brick horizontal list component(Rail) for mobile. The component was created to be used with layouts that are using Cell Style Framework and works with the cells that have fluid width (width of the root cell element should be set to 100%);

How to use

To use the component, simply add it to your QB project from plugin configuration. Search for Horizontal List (QB). The component will appear in the component gallery that you can access form the screen section of your app.

What is supported

Component was designed and tested to be used on mobile and tablet devices - iOS and Android

Configuration

All the number values are represented in density-independent pixels (dp).

  • Margin top - Margin on top of the component(pt)
  • Margin bottom - Margin on the bottom of the component
  • Margin horizontal - Margin added on the side edges of the horizontal list
  • Gutter - Space between cells
  • Enable cell snapping - This option will enable cell snapping to given alignment.
    • Snap to alignment - define the relationship of the snapping to the scroll view.
      • 'start' (the default) will align the snap at the left (horizontal) or top (vertical).
      • 'center' will align the snap in the center.
      • 'end' will align the snap at the right (horizontal) or bottom (vertical).
  • Enable Cell Scaling - Switches from the fixed size cell size to dynamic
    • Cell scaling disabled
      • Cell Width - Width of the single cell - cell will keep the given height regarding of the screen size
    • Cell scaling enabled
      • Cells Per View - Number of visible cells.
      • Next cell offset - How much of the next cell should be visible.

Usage examples with configuration

alt text

alt text