Collapse
A content area which can be collapsed and expanded.
import { Collapse } from '@redshank/native';
Examples
Default
Default collapse view.
Without Accordion
Without accordion in collapse.
Without Accordion
Without accordion in collapse.
With SubTitle
With subtitle in panel header.
Nested Collapse
Nested collapse.
Custom Icon
Custom icon in panel.
Borderless
Borderless variant.
Show arrow
Show icon arrow.
Open Keys
Set open keys for total control.
Disable Panels
Disable panels for not extend content.
APIs
Collapse
Api props extends from View
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| accordion | boolean | true false | Show accordion effect | true |
| borderColor | ThemeColor | ThemeColor | Border color of the elements | accents7 |
| borderless | boolean | true false | Show or hidden borders | true |
| children | ReactNode | ReactNode | Accessory as a child for the component | - |
| contentColor | ThemeColor | ThemeColor | Panel color of the elements | card |
| defaultOpenKeys | KeyType[] | KeyType | Default keys for open panels | - |
| headerColor | ThemeColor | ThemeColor | Header color of the elements | card |
| icon | ReactNode | ReactNode | Custom icon arrow | <Icon type="antdesign" name="right" color="text" /> |
| iconPosition | IconPosition | right left | Position of the arrow icon | right |
| onChange | function | (key: KeyType) => void | Function trigger when open or close panel | - |
| openKeys | KeyType[] | KeyType | Open keys for open panels | - |
| showArrow | boolean | true false | Show or hidden arrow icon | true |
| style | StyleProp<ViewStyle> | object | Style object for base element | true |
Panel
Api props extends from Ripple
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| children | ReactNode | ReactNode | Accessory as a child for the component | - |
| disabled | boolean | true false | Disabled panel | false |
| id | KeyType[] | KeyType | Key panel identify, util with openKeys or defaultOpenKeys | - |
| styleContent | StyleProp<ViewStyle> | object | Style object for content body element | - |
| styleHeader | StyleProp<ViewStyle> | object | Style object for header element | - |
| subTitle | ReactNode string | ReactNode text | Accessory as a subtitle | - |
| title | ReactNode string | ReactNode text | Accessory as a title | - |
Key Type
type KeyType = string | number;
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.