Expander [Collapse]

Introduction

Expand/Collapse lets website visitors scan the headings and dive deeper into the topics they are interested in.

Variants

With Title

option 1

option 2

option 3

option 4

<Expander title="menu" border>
  <div className="p-1">option 1</div>
  <div className="p-1">option 2</div>
  <div className="p-1">option 3</div>
  <div className="p-1">option 4</div>
</Expander>

With Icon

option 1

option 2

option 3

option 4

<Expander icon={() => <IconMenue />}>
  <div className="p-1">option 1</div>
  <div className="p-1">option 2</div>
  <div className="p-1">option 3</div>
  <div className="p-1">option 4</div>
</Expander>

With Title and Icon

option 1

option 2

option 3

option 4

<Expander title="menu" icon={() => <IconMenue />}>
  <div className="p-1">option 1</div>
  <div className="p-1">option 2</div>
  <div className="p-1">option 3</div>
  <div className="p-1">option 4</div>
</Expander>

With Title and Icon and border

option 1

option 2

option 3

option 4

<Expander  title="menu" icon={()=><IconMenue/> border} >
<div className="p-1">option 1</div>
<div className="p-1">option 2</div>
<div className="p-1">option 3</div>
<div className="p-1">option 4</div>
</Expander>

Chevron Icon Orientation

Upward [Defautl]

option 1

option 2

option 3

option 4

<Expander chevronOrientation="up" title="menu" icon={() => <IconMenue />}>
  <div className="p-1">option 1</div>
  <div className="p-1">option 2</div>
  <div className="p-1">option 3</div>
  <div className="p-1">option 4</div>
</Expander>

right

option 1

option 2

option 3

option 4

<Expander ChevronOrientation="right" title="menu" icon={() => <IconMenue />}>
  <div className="p-1">option 1</div>
  <div className="p-1">option 2</div>
  <div className="p-1">option 3</div>
  <div className="p-1">option 4</div>
</Expander>

States

Default (closed)

option 1

option 2

option 3

option 4

<Expander
  ChevronOrientation="right"
  border
  title="menu"
  icon={() => <IconMenue />}
>
  <div className="p-1">option 1</div>
  <div className="p-1">option 2</div>
  <div className="p-1">option 3</div>
  <div className="p-1">option 4</div>
</Expander>

Expanded (Opened)

option 1

option 2

option 3

option 4

<Expander
  isExpanded={true}
  title="menu"
  icon={() => <IconMenue />}
  ChevronOrientation="right"
  border
>
  <div className="p-1">option 1</div>
  <div className="p-1">option 2</div>
  <div className="p-1">option 3</div>
  <div className="p-1">option 4</div>
</Expander>

Automated tests

Unit

Command : npm run test:unit
Test file location : /tests/expander.unit.test.tsx

npm run test:unit:file expander

Integration

Command : ???
Test file location : ???

???

Copy to Paste Modal