🤩
Windframe Import Update is finally here.

Pane

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.

js
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

js
import React from "react";
import { CDBPanel, CDBPane, CDBPanelTitle, CDBPanelText, CDBPaneImage, CDBIcon, CDBContainer } from "cdbreact";
export const Pane = () => {
return (
<CDBContainer>
<CDBPanel style={{width:"400px"}}>
<CDBPane>
<CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
<div className="ml-3">
<CDBPanelTitle>Warren Briggs</CDBPanelTitle>
<CDBPanelText small>Australia</CDBPanelText>
</div>
<p className="ml-auto mb-0 text-danger">300m <CDBIcon fas icon="map-marker-alt" /></p>
</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

js
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", padding:"10px"}}>
<CDBPane>
<CDBPaneImage size="md" src="https://media.istockphoto.com/photos/beautiful-woman-wearing-brown-curly-hairstyle-picture-id495006065?s=170x170" />
<div className="ml-3">
<CDBPanelTitle>Warren Briggs</CDBPanelTitle>
<CDBPanelText small>Breakfast</CDBPanelText>
</div>
<CDBDropDown className="ml-auto">
<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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBPane className="myClass" ... />
tagStringdivChanges default input tag<CDBPane tag="div" ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast