Deprecated

The ExpandableList component is deprecated and will be removed in future releases.
Please use Menu instead.

Usage

Import


import { ExpandableList, ExpandableListItem } from '@passfort/castle'
content_copyCopy

Example


<ExpandableList>
  <ExpandableListItem renderTitle={() => <Text bold>title</Text>}>
    <Text>Content</Text>
  </ExpandableListItem>
  <ExpandableListItem renderTitle={() => <Text bold>title</Text>}>
    <Text>Content</Text>
  </ExpandableListItem>
  <ExpandableListItem renderTitle={() => <Text bold>title</Text>}>
    <Text>Content</Text>
  </ExpandableListItem>
</ExpandableList><ExpandableList>
  <ExpandableListItem renderTitle={() => <Text bold>title</Text>}>
    <Text>Content</Text>
  </ExpandableListItem>
  <ExpandableListItem renderTitle={() => <Text bold>title</Text>}>
    <Text>Content</Text>
  </ExpandableListItem>
  <ExpandableListItem renderTitle={() => <Text bold>title</Text>}>
    <Text>Content</Text>
  </ExpandableListItem>
</ExpandableList>
content_copyCopy
live example

Multiple Groups


<Stack spacing={4}>
  <ExpandableList>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
  </ExpandableList>

  <ExpandableList>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
  </ExpandableList>
</Stack><Stack spacing={4}>
  <ExpandableList>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
  </ExpandableList>

  <ExpandableList>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
    <ExpandableListItem renderTitle={() => <Text>title</Text>}>
      <Text>Content</Text>
    </ExpandableListItem>
  </ExpandableList>
</Stack>
content_copyCopy
live example

CASTLE UI

Core

Information

Fundamentals

Core

API

Hooks

Components

Input

Layout

Page Layout

Data Display

Table

Navigation

Feedback

Overlay

Utils

Legacy

KYC

Guides

Templates

Usage

Import

Example

Multiple Groups

Contents