Edit these docs

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


        <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


        <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>

NEW We've added MORE STUFF to PRO & BUNDLE.

NEW PRICING

Edit these docs

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/>children</MDBCard>`

Import statement
Properties