React Mobile Panels
React Mobile Panels - Bootstrap 4 & Material Design
React Mobile Panels provide a flexible and extensible content container with multiple variants. Panels are similar to cards, but they don't include media.
Basic examples
Panels are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Below is an example of a basic panel with mixed content.
Android

iOS

<script>
import React, { Component } from "react";
import {View, ScrollView } from "react-native";
import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardFooter, MDBCardLink } from 'mdbreact-mobile';
export default class PanelPage extends Component {
render() {
return (
<ScrollView>
<View>
<MDBCard>
<MDBCardBody>
<MDBCardTitle>Panel Example</MDBCardTitle>
<MDBCardText>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet animi beatae consectetur enim eos est
hic inventore ipsa, minima nam placeat praesentium quaerat quam quibusdam quisquam ratione, tenetur
ullam vitae?
</MDBCardText>
<MDBCardFooter>
<MDBCardLink>Card link</MDBCardLink>
<MDBCardLink>Another link</MDBCardLink>
</MDBCardFooter>
</MDBCardBody>
</MDBCard>
</View>
</ScrollView>
);
}
}
</script>
Simple example
Android

iOS

<script>
import React, { Component } from "react";
import {View, ScrollView } from "react-native";
import {MDBBtn} from 'mdbreact-mobile';
export default class ButtonsPage extends Component {
render() {
return (
<ScrollView>
<View>
<MDBBtn title="Peach" gradient="peach"></MDBBtn>
<MDBBtn title="Blue" gradient="blue"></MDBBtn>
<MDBBtn title="Aqua" gradient="aqua"></MDBBtn>
<MDBBtn title="Purple" gradient="purple"></MDBBtn>
</View>
</ScrollView>
);
}
}
</script>
Panels - API
In this section you will find advanced information about the Panels 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 { MDBCard } from 'mdbreact-mobile'
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
children |
any | '' |
You can put everything and il will be rendering. | <MDBCard/> |