Snaplist

Pagination helps users navigate between chunks of content.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum officia est voluptates repellendus error! Ratione, veritatis id eos quaerat architecto aliquid impedit voluptate quae? Rem veniam sunt facere ab amet?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum officia est voluptates repellendus error! Ratione, veritatis id eos quaerat architecto

Lorem ipsum dolor sit amet consectetur Ratione, veritatis id eos quaerat architecto

Laborum officia est voluptates repellendus error! Ratione, veritatis id eos quaerat architecto

Ratione, veritatis id eos quaerat architecto aliquid impedit voluptate quae? Rem veniam sunt facere ab amet?

View source

Anatomy

import { Snaplist } from "@lualtek/react-components";
 
export default () => {
  return (
    <Snaplist>
      <div>...</div>
      <div>...</div>
      <div>...</div>
    </Snaplist>
  );
};

API Reference

This component extends the Stack component, which expose different props that enables multiple functionalities, and adds the following:

export type SnaplistProps = {
  /**
   * The alignment of the snap element.
   * This define which side the snap element is anchored when srcolling.
   */
  snapAlign?: "start" | "center" | "end";
 
  /**
   * The type of snap.
   * @default 'mandatory'
   */
  snapType?: "mandatory" | "proximity";
 
  /**
   * Horizontal negative margin used to offset the list.
   * Used to align list edges to the viewport or containers.
   */
  bleed?: TokensTypes["space"];
 
  /**
   * The distance between the snap element and the scroller edges..
   */
  scrollPadding?: TokensTypes["space"];
};

Pagination Stepper