ShowMore

ShowMore is used to display the progress status for a task that takes a long time or consists of several steps.

import {
  ShowMore,
  ShowMoreButton,
  ShowMoreContent,
  useShowMoreProps,
  useShowMoreState,
} from "@adaptui/react-tailwind";

💡

A complex component that supports customization as per the composition guide.

Usage


<div className="w-96 overflow-x-scroll">
  <div className="flex h-10 w-fit flex-row items-center space-x-2">
    <div>Apple</div>
    <div>Orange</div>
    <div>Watermelon</div>
    <ShowMore direction="horizontal" className="flex flex-row space-x-2" >
      <div>Sapota</div>
      <div>Papaya</div>
      <div>Avocado</div>
      <div>Strawberry</div>
      <div>Cherry</div>
      <div>Fig</div>
      <div>Guava</div>
      <div>Mango</div>
    </ShowMore>
  </div>
</div>


<div className="w-96 overflow-x-scroll">
  <div className="flex h-10 w-fit flex-row items-center space-x-2">
    <div>Apple</div>
    <div>Orange</div>
    <div>Watermelon</div>
    <ShowMore direction="horizontal" className="flex flex-row space-x-2" >
      <div>Sapota</div>
      <div>Papaya</div>
      <div>Avocado</div>
      <div>Strawberry</div>
      <div>Cherry</div>
      <div>Fig</div>
      <div>Guava</div>
      <div>Mango</div>
    </ShowMore>
  </div>
</div>

ShowMore Directions

ShowMore component comes with two directions vertical & horizontal

<div className="h-80 overflow-y-scroll">
  <div className="flex flex-col items-start space-y-2">
    <div>Apple</div>
    <div>Orange</div>
    <div>Watermelon</div>
    <div>Grapes</div>
    <div>Banana</div>
    <div>Blueberry</div>
    <ShowMore direction="vertical" className="flex flex-col space-y-2">
      <div>Sapota</div>
      <div>Papaya</div>
      <div>Avocado</div>
      <div>Strawberry</div>
      <div>Cherry</div>
      <div>Fig</div>
      <div>Guava</div>
      <div>Mango</div>
    </ShowMore>
  </div>
</div>

<div className="h-80 overflow-y-scroll">
  <div className="flex flex-col items-start space-y-2">
    <div>Apple</div>
    <div>Orange</div>
    <div>Watermelon</div>
    <div>Grapes</div>
    <div>Banana</div>
    <div>Blueberry</div>
    <ShowMore direction="vertical" className="flex flex-col space-y-2">
      <div>Sapota</div>
      <div>Papaya</div>
      <div>Avocado</div>
      <div>Strawberry</div>
      <div>Cherry</div>
      <div>Fig</div>
      <div>Guava</div>
      <div>Mango</div>
    </ShowMore>
  </div>
</div>

API Reference

Prop	Type	Default
`Button`	`React.ReactNode`	`Show more`

Last updated on June 8, 2023

ShowMore

Imports#

Usage#

ShowMore Directions#

API Reference#

Imports

Usage

ShowMore Directions

API Reference