Pane

Some features in this component requires CDB React Pro package.Clickhereto try it out.

React Bootstrap 5 Pane Component is part of a window that gives the user more information or quick access to common software functionality. A common example is a preview pane, a pane with a location etc.

Importing the React Bootstrap 5 Pane Component

You begin by importing CDBPane into your project to use the Contrast React Bootstrap 5 5 Pane component.

import { CDBPane } from "cdbreact";

Pane with Location Marker

Pro Component

You import the CDBPanelTitle component to write headings in your pane, the CDBPanelText component to write texts or messages in your pane, and the CDBPaneImage component for your pane images, in addition to the CDBPane component.

We also import the CDBIcon. We can have icons in our pane by nesting the CDBIcon in our CDBPane.

Warren Briggs

Australia

300m

import React from "react";
import { CDBPanel, CDBPane, CDBPanelTitle, CDBPanelText, CDBPaneImage, CDBIcon, CDBContainer } from "cdbreact";

export const Pane = () => {
  return (
    <CDBContainer>
            <CDBPanel style={{width:"400px", borderRadius: "12px"}}>
              <CDBPane>
                <CDBPaneImage size="lg"   src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
                <div className="ms-4" style={{marginLeft: "22px", marginTop:"9px"}}>
                  <CDBPanelTitle style={{fontSize:"17px"}}>Warren Briggs</CDBPanelTitle>
                  <CDBPanelText style={{fontSize:"15px"}}>Australia</CDBPanelText>
                  <p style={{fontSize:"12px", color:"#bb2124"}}>{"300m"} <CDBIcon fas icon="map-marker-alt" /></p>  
                </div>
                  
              </CDBPane>
            </CDBPanel>
    </CDBContainer>
  );
};

Pane with Dropdown

Pro Component

The React Bootstrap 5 5 Dropdown component is nestled in this tutorial area, CDBDropDown, in the CDBPane component. , We now have dropdowns in our pane as a result of this.

Warren Briggs

Breafast

import React from "react";
import { CDBPane, CDBDropDownItem, CDBDropDown, CDBDropDownMenu, CDBDropDownToggle, CDBPanel, CDBPanelTitle, CDBPanelText, CDBPaneImage, CDBIcon, CDBContainer } from "cdbreact";

export const Pane = () => {
  return (
    <CDBContainer>
            <CDBPanel style={{width:"400px",  borderRadius: "12px"}}>
              <CDBPane style={{display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: "row"}}>
                <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", flexDirection: "row"}}>
                <CDBPaneImage size="lg" src="/img/pane/pane1.png" />
                <div style={{marginLeft: "22px"}}>
                  <CDBPanelTitle>Warren Briggs</CDBPanelTitle>
                  <CDBPanelText small>Breakfast</CDBPanelText>
                </div>
                </div>
                
                <CDBDropDown style={{marginLeft: "22px"}}>
                  <CDBDropDownToggle color="white"><CDBIcon className="text-muted" fas icon="ellipsis-h"/></CDBDropDownToggle>
                  <CDBDropDownMenu>
                    <CDBDropDownItem disabled>Edit Profile</CDBDropDownItem>
                    <CDBDropDownItem divider />
                    <CDBDropDownItem>Action 1</CDBDropDownItem>
                    <CDBDropDownItem>Action 2</CDBDropDownItem>
                  </CDBDropDownMenu>
                </CDBDropDown>          
              </CDBPane>
            </CDBPanel>
    </CDBContainer>
  );
};

Contrast React Bootstrap 5 5 Pane Props

This section will elaborate on the props available with the React Bootstrap 5 5 Pane component. You'll learn what these props do, how to utilize them, and what their default values are.

Other prop options for the 'CDBPane' component are listed in the table below.

Name	Type	Default	Description	Example
className	String		Adds custom classes	<CDBPane className="myClass" ... />
tag	String	div	Changes default input tag	<CDBPane tag="div" ... />

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Mask

Modal