#Pagination

#Import

import { Pagination } from "bumbag";

#Usage

of 10
Editable example

#Custom labels

out of 10
Editable example

#Props

#Pagination Props

numberOfPages number Required

Sets the number of pages.

currentPage number

Sets the current page.

onChangePage (page: number) => void

Function to invoke when the page is changed.

nextText string

Sets the text of the next button.

previousText string

Sets the text of the previous button.

prepositionText string

Sets the preposition text.

nextButtonProps

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 8 more ... & LocalButtonProps

Props to spread onto the next button.

previousButtonProps

BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 8 more ... & LocalButtonProps

Props to spread onto the previous button.

selectProps

{
  unstable_system?: any;
  top?: string | number | {
    [key: string]: string
  }; right?: string | number | {
    [key: string]: string
  }; bottom?: string | number | {
    [key: string]: string
  }; left?: string | number | {
    [key: string]: string
  }; ... 796 more ...;
  selectRef?: Ref<...>;
}

Props to spread onto the select component.

Inherits Box props

use

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

className string

children

string
  | number
  | boolean
  | {}
  | ReactElement<any, string
  | ((props: any) => ReactElement<any, string
  | ...
  | (new (props: any) => Component<any, any, any>)>)
  | (new (props: any) => Component<...>)>
  | ReactNodeArray
  | ReactPortal
  | ((props: BoxProps) => ReactNode)

alignX "right" | "left" | "center"

alignY "top" | "bottom" | "center"

variant string

colorMode string

disabled boolean

overrides

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

elementRef ((instance: any) => void) | RefObject<any>

themeKey string

#Theming

Pagination.styles.base
of 10
Pagination.Button.styles.base
of 10
Pagination.Select.styles.base
of 10
Pagination.PrepositionText.styles.base
of 10
On this page
Copyright © 2021 Jake Moxey