ShowMore

ShowMore is used to display the progress status for a task that takes a long time or consists of several steps. It uses Ariakit's Disclosure component internally.

import {
  ShowMore,
  ShowMoreButton,
  ShowMoreContent,
} 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

import { ShowMore } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <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>
  );
};

import { ShowMore } from "@adaptui/react-tailwind";

export const App = props => {
  return (
    <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 July 27, 2022

ShowMore

Imports#

Usage#

ShowMore Directions#

API Reference#

Imports

Usage

ShowMore Directions

API Reference