React Mobile Collapse
React Mobile Collapse - Bootstrap 4 & Material Design
React Mobile Collapse is a component which toggles content. Useful for grouping great amount of texts and/or graphics into expanding and collapsing items.
How it works
Collapse is used to show and hide content. Buttons are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it’s current value to 0.
Basic example
Basic example
Android
iOS
<script>
import React, { Component } from "react";
import { Text } from "react-native";
import Collapse from "mdbreact-mobile";
export default class CollapsePage extends Component {
render() {
return (
<Collapse btnTitle="Collapse">
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Sed perspiciatis aspernatur, exercitationem recusandae autem harum quae asperiores dolore, corrupti
ullam nisi suscipit rem ipsum eaque! Esse error rerum ea obcaecati consectetur ex maiores corrupti amet
laudantium ad fuga quas at, fugit vel minus voluptates praesentium cupiditate dolorem necessitatibus
molestiae asperiores.
</Text>
</Collapse>
);
}
}
</script>
Collapse - API
In this section you will find advanced information about the Collapse component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
import { MDBCollapse } from 'mdbreact-mobile'
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
title |
btnTitle | '' |
Button default text | <MDBCollapse btnTitle="Text" /> |