Snap Scroll

import { SnapScroll } from '@elemental-ui-alpha/snap-scroll';

Usage

Gap

Define the size of the gap between each item in the scroll pane.

• none (default)
• xsmall
• small
• gutter
• medium
• large
• xlarge
• xxlarge

<SnapScroll gap="small">
  <Box height={150} width={200} background="shade" />
  <Box height={150} width={200} background="dim" />
  <Box height={150} width={200} background="shade" />
  <Box height={150} width={200} background="dim" />
  <Box height={150} width={200} background="shade" />
  <Box height={150} width={200} background="dim" />
  <Box height={150} width={200} background="shade" />
</SnapScroll>

Align

How to align each item within the scroll pane.

• start (default)
• end
• center

<SnapScroll gap="large" align="center">
  <Box height={150} width={200} background="shade" />
  <Box height={150} width={500} background="dim" />
  <Box height={150} width={100} background="shade" />
  <Box height={150} width={400} background="dim" />
  <Box height={150} width={500} background="shade" />
  <Box height={150} width={200} background="dim" />
  <Box height={150} width={300} background="shade" />
</SnapScroll>

Inset

Provide a gutter on either side of the scroll pane to inset the items. This is useful for allow the contents to "over scroll" and align with some chrome one either side.

• none (default)
• xsmall
• small
• gutter
• medium
• large
• xlarge
• xxlarge

<Box padding="xlarge" style={{ marginLeft: -20, width: 'calc(100% + 40px)' }}>
  <Text marginBottom="medium">Desired Alignment</Text>
  <SnapScroll inset="xlarge" gap="small">
    <Box height={150} width={300} background="shade" />
    <Box height={150} width={300} background="dim" />
    <Box height={150} width={300} background="shade" />
    <Box height={150} width={300} background="dim" />
    <Box height={150} width={300} background="shade" />
    <Box height={150} width={300} background="dim" />
    <Box height={150} width={300} background="shade" />
  </SnapScroll>
</Box>

Item Width

You will need to provide an itemWidth for cases where the items may not fill the scroll pane, otherwise the grid will auto-fill the available space based on item count.

<SnapScroll inset="xlarge" gap="small" itemWidth={50}>
  <Box height={150} width={50} background="shade" />
  <Box height={150} width={50} background="dim" />
  <Box height={150} width={50} background="shade" />
  <Box height={150} width={50} background="dim" />
</SnapScroll>