PageNavigation

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { PageNavigation } from "@hua-labs/hua";


`prevPage`	`{ title: string; href: string }`	-	Previous page info
`nextPage`	`{ title: string; href: string }`	-	Next page info
`showOnMobile`	`boolean`	`false`	Show on mobile devices

Code Examples

docs:common.basicUsagetsx

1import { PageNavigation } from '@hua-labs/hua';
2 
3<PageNavigation
4  prevPage={{ title: "Introduction", href: "/docs/intro" }}
5  nextPage={{ title: "Getting Started", href: "/docs/getting-started" }}
6/>

docs:components.pageNavigation.examples.previousOnlytsx

1<PageNavigation
2  prevPage={{ title: "Back to Components", href: "/docs/components" }}
3/>

docs:components.pageNavigation.examples.nextOnlytsx

1<PageNavigation
2  nextPage={{ title: "Continue to Hooks", href: "/docs/hooks" }}
3/>

docs:components.pageNavigation.examples.showOnMobiletsx

1<PageNavigation
2  prevPage={{ title: "Prev", href: "/prev" }}
3  nextPage={{ title: "Next", href: "/next" }}
4  showOnMobile
5/>

•docs:components.pageNavigation.accessibility.linkElements: docs:components.pageNavigation.accessibility.linkElementsDesc
•docs:components.pageNavigation.accessibility.hoverAnimation: docs:components.pageNavigation.accessibility.hoverAnimationDesc

Pagination Modal