React Bootstrap Pills
React Pills - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
They allow you to fit a lot of information in single space.
See the following pills examples:
Default pills
Default styling for Bootstrap Pills component
Consequat
occaecat ullamco amet non eiusmod nostrud dolore irure incididunt est duis anim sunt officia. Fugiat velit
proident aliquip nisi incididunt nostrud exercitation proident est nisi. Irure magna elit commodo anim ex
veniam culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod consequat eu adipisicing minim anim
aliquip cupidatat culpa excepteur quis. Occaecat sit eu exercitation irure Lorem incididunt nostrud.
Ad pariatur
nostrud pariatur exercitation ipsum ipsum culpa mollit commodo mollit ex. Aute sunt incididunt amet commodo
est sint nisi deserunt pariatur do. Aliquip ex eiusmod voluptate exercitation cillum id incididunt elit
sunt. Qui minim sit magna Lorem id et dolore velit Lorem amet exercitation duis deserunt. Anim id labore
elit adipisicing ut in id occaecat pariatur ut ullamco ea tempor duis.
Est quis
nulla laborum officia ad nisi ex nostrud culpa Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis
ipsum nisi elit fugiat commodo sunt reprehenderit laborum veniam eu veniam. Eiusmod minim exercitation
fugiat irure ex labore incididunt do fugiat commodo aliquip sit id deserunt reprehenderit aliquip nostrud.
Amet ex cupidatat excepteur aute veniam incididunt mollit cupidatat esse irure officia elit do ipsum
ullamco Lorem. Ullamco ut ad minim do mollit labore ipsum laboris ipsum commodo sunt tempor enim
incididunt. Commodo quis sunt dolore aliquip aute tempor irure magna enim minim reprehenderit. Ullamco
consectetur culpa veniam sint cillum aliqua incididunt velit ullamco sunt ullamco quis quis commodo
voluptate. Mollit nulla nostrud adipisicing aliqua cupidatat aliqua pariatur mollit voluptate voluptate
consequat non.
import React, { Component } from "react";
import {
MDBContainer,
MDBRow,
MDBCol,
MDBTabPane,
MDBTabContent,
MDBNav,
MDBNavItem,
MDBNavLink
} from "mdbreact";
class Pills extends Component {
state = {
items: {
default: "1",
}
};
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer className="mt-4">
<MDBRow>
<MDBCol md="12">
<h2>Default</h2>
<MDBNav className="mt-5 nav-pills">
<MDBNavItem>
<MDBNavLink link to="#" active={this.state.items["default"] === "1"} onClick={this.togglePills("default", "1")} >
Home
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to="#" active={this.state.items["default"] === "2"} onClick={this.togglePills("default", "2")} >
Profile
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink link to="#" active={this.state.items["default"] === "3"} onClick={this.togglePills("default", "3")} >
Contact
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent activeItem={this.state.items["default"]}>
<MDBTabPane tabId="1">
<p>
Consequat occaecat ullamco amet non eiusmod nostrud dolore
irure incididunt est duis anim sunt officia. Fugiat velit
proident aliquip nisi incididunt nostrud exercitation
proident est nisi. Irure magna elit commodo anim ex veniam
culpa eiusmod id nostrud sit cupidatat in veniam ad. Eiusmod
consequat eu adipisicing minim anim aliquip cupidatat culpa
excepteur quis. Occaecat sit eu exercitation irure Lorem
incididunt nostrud.
</p>
</MDBTabPane>
<MDBTabPane tabId="2">
<p>
Ad pariatur nostrud pariatur exercitation ipsum ipsum culpa
mollit commodo mollit ex. Aute sunt incididunt amet commodo
est sint nisi deserunt pariatur do. Aliquip ex eiusmod
voluptate exercitation cillum id incididunt elit sunt. Qui
minim sit magna Lorem id et dolore velit Lorem amet
exercitation duis deserunt. Anim id labore elit adipisicing
ut in id occaecat pariatur ut ullamco ea tempor duis.
</p>
</MDBTabPane>
<MDBTabPane tabId="3">
<p>
Est quis nulla laborum officia ad nisi ex nostrud culpa
Lorem excepteur aliquip dolor aliqua irure ex. Nulla ut duis
ipsum nisi elit fugiat commodo sunt reprehenderit laborum
veniam eu veniam. Eiusmod minim exercitation fugiat irure ex
labore incididunt do fugiat commodo aliquip sit id deserunt
reprehenderit aliquip nostrud. Amet ex cupidatat excepteur
aute veniam incididunt mollit cupidatat esse irure officia
elit do ipsum ullamco Lorem. Ullamco ut ad minim do mollit
labore ipsum laboris ipsum commodo sunt tempor enim
incididunt. Commodo quis sunt dolore aliquip aute tempor
irure magna enim minim reprehenderit. Ullamco consectetur
culpa veniam sint cillum aliqua incididunt velit ullamco
sunt ullamco quis quis commodo voluptate. Mollit nulla
nostrud adipisicing aliqua cupidatat aliqua pariatur mollit
voluptate voluptate consequat non.
</p>
</MDBTabPane>
</MDBTabContent>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
}
export default Pills;
Material pills MDB Pro component
Material Design styling for Bootstrap Pills component
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
import React, { Component } from "react";
import {
MDBContainer,
MDBTabPane,
MDBTabContent,
MDBNav,
MDBNavItem,
MDBNavLink
} from "mdbreact";
class Pills extends Component {
state = {
items: {
default: "1",
}
};
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBNav pills color="secondary">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["default"] === "1"}
onClick={this.togglePills("default", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["default"] === "2"}
onClick={this.togglePills("default", "2")}
>
Link
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["default"] === "3"}
onClick={this.togglePills("default", "3")}
>
Link
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["default"] === "4"}
onClick={this.togglePills("default", "4")}
>
Help
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent activeItem={this.state.items["default"]}>
<MDBTabPane tabId="1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil odit magnam minima, soluta doloribus reiciendis
molestiae placeat unde eos molestias. Quisquam aperiam,
pariatur. Tempora, placeat ratione porro voluptate odit
minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil odit magnam minima, soluta doloribus reiciendis
molestiae placeat unde eos molestias. Quisquam aperiam,
pariatur. Tempora, placeat ratione porro voluptate odit
minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil odit magnam minima, soluta doloribus reiciendis
molestiae placeat unde eos molestias. Quisquam aperiam,
pariatur. Tempora, placeat ratione porro voluptate odit
minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil odit magnam minima, soluta doloribus reiciendis
molestiae placeat unde eos molestias. Quisquam aperiam,
pariatur. Tempora, placeat ratione porro voluptate odit
minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Nihil odit magnam minima, soluta doloribus reiciendis
molestiae placeat unde eos molestias. Quisquam aperiam,
pariatur. Tempora, placeat ratione porro voluptate odit
minima.
</p>
</MDBTabPane>
</MDBTabContent>
</MDBContainer>
);
}
}
export default Pills;
Pills justified MDB Pro component
import React, { Component } from "react";
import { MDBContainer, MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
class PillsJustified extends Component {
state = {
items: {
justified: "1"
}
};
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBNav pills color="pink" className="nav-justified">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["justified"] === "1"}
onClick={this.togglePills("justified", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["justified"] === "2"}
onClick={this.togglePills("justified", "2")}
>
Link
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["justified"] === "3"}
onClick={this.togglePills("justified", "3")}
>
Link
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["justified"] === "4"}
onClick={this.togglePills("justified", "4")}
>
Help
</MDBNavLink>
</MDBNavItem>
</MDBNav>
</MDBContainer>
);
}
}
export default PillsJustified;
Pills with dropdown MDB Pro component
import React, { Component } from "react";
import {
MDBContainer,
MDBNav,
MDBNavItem,
MDBNavLink,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem
} from "mdbreact";
class PillsDropdown extends Component {
state = {
items: {
dropdown: "1"
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBNav pills color="success" className="nav-justified ">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["dropdown"] === "1"}
onClick={this.togglePills("dropdown", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret color="success">
Dropdown
</MDBDropdownToggle>
<MDBDropdownMenu color="success">
<MDBDropdownItem>Action</MDBDropdownItem>
<MDBDropdownItem>Another Action</MDBDropdownItem>
<MDBDropdownItem>Something else here</MDBDropdownItem>
<MDBDropdownItem divider />
<MDBDropdownItem>Separated link</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["dropdown"] === "2"}
onClick={this.togglePills("dropdown", "2")}
>
Link 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["dropdown"] === "3"}
onClick={this.togglePills("dropdown", "3")}
>
Link 2
</MDBNavLink>
</MDBNavItem>
</MDBNav>
</MDBContainer>
);
}
}
export default PillsDropdown;
Gradient pills MDB Pro component
import React, { Component } from "react";
import { MDBContainer, MDBNav, MDBNavItem, MDBNavLink } from "mdbreact";
import "./Pills.css"; //Import necessary styles for this example
class PillsGradient extends Component {
state = {
items: {
gradient: "1",
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBNav pills className="nav-justified pills-peach-gradient">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["gradient"] === "1"}
onClick={this.togglePills("gradient", "1")}
>
Blogger
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["gradient"] === "2"}
onClick={this.togglePills("gradient", "2")}
>
Designer
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["gradient"] === "3"}
onClick={this.togglePills("gradient", "3")}
>
Photographer
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["gradient"] === "4"}
onClick={this.togglePills("gradient", "4")}
>
Model
</MDBNavLink>
</MDBNavItem>
</MDBNav>
</MDBContainer>
);
}
}
export default PillsGradient;
.pills-peach-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #FFD86F, #FC6262);
}
.pills-blue-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #45cafc, #303f9f);
}
.pills-purple-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #ff6ec4, #7873f5);
}
.pills-aqua-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #2096ff, #05ffa3);
}
Vertical pills MDB Pro component
Downloads
Completely legal
Orders & Invoices
"Hello? Is it me you're looking for?"
Billing Details
Time to pay
import React, { Component } from "react";
import {
MDBContainer,
MDBRow,
MDBCol,
MDBBtn,
MDBCardBody,
MDBCardTitle,
MDBCardText,
MDBTabPane,
MDBTabContent,
MDBNav,
MDBNavItem,
MDBNavLink,
MDBIcon
} from "mdbreact";
class VerticalPills extends Component {
state = {
items: {
vertical: "1"
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBRow>
<MDBCol md="3">
<MDBNav pills color="primary" className="flex-column">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["vertical"] === "1"}
onClick={this.togglePills("vertical", "1")}
>
Downloads <MDBIcon icon="download" className="ml-2" />
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["vertical"] === "2"}
onClick={this.togglePills("vertical", "2")}
>
Orders & invoices
<MDBIcon icon="file-alt" className="ml-2" />
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["vertical"] === "3"}
onClick={this.togglePills("vertical", "3")}
>
Billing Details
<MDBIcon icon="address-card" className="ml-2" />
</MDBNavLink>
</MDBNavItem>
</MDBNav>
</MDBCol>
<MDBCol md="9">
<MDBTabContent activeItem={this.state.items["vertical"]}>
<MDBTabPane tabId="1">
<MDBCardBody>
<MDBCardTitle>Downloads</MDBCardTitle>
<MDBCardText>Completely legal</MDBCardText>
</MDBCardBody>
</MDBTabPane>
<MDBTabPane tabId="2">
<MDBCardBody>
<MDBCardTitle>Orders & Invoices</MDBCardTitle>
<MDBCardText>
"Hello? Is it me you're looking for?"
</MDBCardText>
</MDBCardBody>
</MDBTabPane>
<MDBTabPane tabId="3">
<MDBCardBody>
<MDBCardTitle>Billing Details</MDBCardTitle>
<MDBCardText>
Time to pay{" "}
<MDBBtn className="ml-3" color="primary">
pay
</MDBBtn>
</MDBCardText>
</MDBCardBody>
</MDBTabPane>
</MDBTabContent>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
}
export default VerticalPills;
Rounded pills MDB Pro component
import React, { Component } from "react";
import {
MDBContainer,
MDBRow, MDBNav,
MDBNavItem,
MDBNavLink
} from "mdbreact";
import "./Pills.css"; //Import necessary styles for this example
class PillsRounded extends Component {
state = {
items: {
rounded: "1",
rounded2: "1",
roundedGradient: "1",
roundedGradient2: "1",
roundedOutline: "1",
roundedOutline2: "1",
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBRow>
<MDBNav
pills
color="deep-purple"
className="nav-justified col-md-6 pills-rounded"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded"] === "1"}
onClick={this.togglePills("rounded", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded"] === "2"}
onClick={this.togglePills("rounded", "2")}
>
Link 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded"] === "3"}
onClick={this.togglePills("rounded", "3")}
>
Link 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded"] === "4"}
onClick={this.togglePills("rounded", "4")}
>
Link 3
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav
pills
color="light-purple"
className="nav-justified col-md-6 pills-rounded"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded2"] === "1"}
onClick={this.togglePills("rounded2", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded2"] === "2"}
onClick={this.togglePills("rounded2", "2")}
>
Link 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded2"] === "3"}
onClick={this.togglePills("rounded2", "3")}
>
Link 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["rounded2"] === "4"}
onClick={this.togglePills("rounded2", "4")}
>
Link 3
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav
pills
className="nav-justified col-md-6 pills-peach-gradient pills-rounded"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient"] === "1"}
onClick={this.togglePills("roundedGradient", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient"] === "2"}
onClick={this.togglePills("roundedGradient", "2")}
>
Link 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient"] === "3"}
onClick={this.togglePills("roundedGradient", "3")}
>
Link 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient"] === "4"}
onClick={this.togglePills("roundedGradient", "4")}
>
Link 3
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav
pills
className="nav-justified col-md-6 pills-rounded pills-green-gradient"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient2"] === "1"}
onClick={this.togglePills("roundedGradient2", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient2"] === "2"}
onClick={this.togglePills("roundedGradient2", "2")}
>
Link 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient2"] === "3"}
onClick={this.togglePills("roundedGradient2", "3")}
>
Link 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedGradient2"] === "4"}
onClick={this.togglePills("roundedGradient2", "4")}
>
Link 3
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav
pills
className="nav-justified col-md-6 pills-rounded pills-outline-red"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline"] === "1"}
onClick={this.togglePills("roundedOutline", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline"] === "2"}
onClick={this.togglePills("roundedOutline", "2")}
>
Link 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline"] === "3"}
onClick={this.togglePills("roundedOutline", "3")}
>
Link 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline"] === "4"}
onClick={this.togglePills("roundedOutline", "4")}
>
Link 3
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav
pills
className="nav-justified col-md-6 pills-rounded pills-outline-green"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline2"] === "1"}
onClick={this.togglePills("roundedOutline2", "1")}
>
Active
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline2"] === "2"}
onClick={this.togglePills("roundedOutline2", "2")}
>
Link 1
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline2"] === "3"}
onClick={this.togglePills("roundedOutline2", "3")}
>
Link 2
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["roundedOutline2"] === "4"}
onClick={this.togglePills("roundedOutline2", "4")}
>
Link 3
</MDBNavLink>
</MDBNavItem>
</MDBNav>
</MDBRow>
</MDBContainer>
);
}
}
export default PillsRounded;
.pills-rounded .nav-item .nav-link {
border-radius: 10em;
}
.pills-light-purple .nav-item .nav-link.active {
background-color: #ba68c8;
}
.pills-outline-red .nav-item .nav-link {
border: 2px solid #fff;
color: #666;
background-color: transparent;
}
.pills-outline-red .nav-item .nav-link:hover {
border: 2px solid #eee;
}
.pills-outline-red .nav-item .nav-link.active {
border: 2px solid #f44336;
color: #f44336;
}
.pills-outline-red .nav-item .nav-link.active:hover {
border: 2px solid #f44336;
color: #f44336;
}
.pills-outline-green .nav-item .nav-link {
border: 2px solid #fff;
color: #666;
background-color: transparent;
}
.pills-outline-green .nav-item .nav-link:hover {
border: 2px solid #eee;
}
.pills-outline-green .nav-item .nav-link.active {
border: 2px solid #4caf50;
color: #4caf50;
}
.pills-outline-green .nav-item .nav-link.active:hover {
border: 2px solid #4caf50;
color: #4caf50;
}
.pills-peach-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #ffd86f, #fc6262);
}
.pills-blue-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #45cafc, #303f9f);
}
.pills-purple-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #ff6ec4, #7873f5);
}
.pills-aqua-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #2096ff, #05ffa3);
}
Pills With Icon MDB Pro component
import React, { Component } from "react";
import {
MDBContainer,
MDBNav,
MDBNavItem,
MDBNavLink,
MDBIcon
} from "mdbreact";
import "./Pills.css"; //Import necessary styles for this example
class PillsWithIcon extends Component {
state = {
items: {
icons: "1",
iconsRight: "1",
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBNav pills color="info" className="nav-justified ">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["icons"] === "1"}
onClick={this.togglePills("icons", "1")}
>
<MDBIcon fab icon="android" /> USA
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["icons"] === "2"}
onClick={this.togglePills("icons", "2")}
>
<MDBIcon icon="leaf" /> Mexico
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["icons"] === "3"}
onClick={this.togglePills("icons", "3")}
>
<MDBIcon icon="heart" /> Poland
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["icons"] === "4"}
onClick={this.togglePills("icons", "4")}
>
<MDBIcon icon="futbol" /> Brazil
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav pills className="nav-justified pills-rounded pills-outline-red">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["iconsRight"] === "1"}
onClick={this.togglePills("iconsRight", "1")}
>
San Francisco <MDBIcon far icon="grin" />
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["iconsRight"] === "2"}
onClick={this.togglePills("iconsRight", "2")}
>
Tijuana <MDBIcon icon="users" />
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["iconsRight"] === "3"}
onClick={this.togglePills("iconsRight", "3")}
>
Cracow <MDBIcon icon="thumbs-up" />
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["iconsRight"] === "4"}
onClick={this.togglePills("iconsRight", "4")}
>
Rio de Janeiro <MDBIcon icon="coffee" />
</MDBNavLink>
</MDBNavItem>
</MDBNav>
</MDBContainer>
);
}
}
export default PillsWithIcon;
.pills-rounded .nav-item .nav-link {
border-radius: 10em;
}
.pills-outline-red .nav-item .nav-link {
border: 2px solid #fff;
color: #666;
background-color: transparent;
}
.pills-outline-red .nav-item .nav-link:hover {
border: 2px solid #eee;
}
.pills-outline-red .nav-item .nav-link.active {
border: 2px solid #f44336;
color: #f44336;
}
.pills-outline-red .nav-item .nav-link.active:hover {
border: 2px solid #f44336;
color: #f44336;
}
Pills With Content MDB Pro component
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
import React, { Component } from "react";
import {
MDBTabPane,
MDBTabContent,
MDBNav,
MDBNavItem,
MDBNavLink,
MDBContainer,
MDBRow,
MDBCol
} from "mdbreact";
import "./Pills.css"; //Import necessary styles for this example
class PillsWithContent extends Component {
state = {
items: {
content: "1",
contentCard: "1",
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBRow>
<MDBCol md="6">
<MDBNav
pills
className="nav-justified pills-rounded pills-purple-gradient"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["content"] === "1"}
onClick={this.togglePills("content", "1")}
>
Fashion
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["content"] === "2"}
onClick={this.togglePills("content", "2")}
>
Lifestyle
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["content"] === "3"}
onClick={this.togglePills("content", "3")}
>
Beauty
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["content"] === "4"}
onClick={this.togglePills("content", "4")}
>
Shop
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent activeItem={this.state.items["content"]}>
<MDBTabPane tabId="1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
</MDBTabContent>
</MDBCol>
<MDBCol md="6">
<MDBNav pills color="warning" className="nav-justified mb-4">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["contentCard"] === "1"}
onClick={this.togglePills("contentCard", "1")}
>
Fashion
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["contentCard"] === "2"}
onClick={this.togglePills("contentCard", "2")}
>
Lifestyle
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["contentCard"] === "3"}
onClick={this.togglePills("contentCard", "3")}
>
Beauty
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent
className={"card"}
activeItem={this.state.items["contentCard"]}
>
<MDBTabPane tabId="1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
</MDBTabContent>
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
}
export default PillsWithContent;
.pills-rounded .nav-item .nav-link {
border-radius: 10em;
}
.pills-purple-gradient .nav-item .nav-link.active {
background: linear-gradient(40deg, #ff6ec4, #7873f5);
}
Colors aniamations MDB Pro component
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
import React, { Component } from "react";
import {
MDBContainer,
MDBCol,
MDBTabPane,
MDBTabContent,
MDBNav,
MDBNavItem,
MDBNavLink
} from "mdbreact";
import "./Pills.css"; //Import necessary styles for this example
class PillsColorAnimations extends Component {
state = {
items: {
animation: "1",
animationRO: "1",
animationR: "1",
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
render() {
return (
<MDBContainer>
<MDBCol xl="8" md="10">
<MDBNav pills color="blue-teal" className="nav-justified">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animation"] === "1"}
onClick={this.togglePills("animation", "1")}
>
Fashion
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animation"] === "2"}
onClick={this.togglePills("animation", "2")}
>
Lifestyle
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animation"] === "3"}
onClick={this.togglePills("animation", "3")}
>
Beauty
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animation"] === "4"}
onClick={this.togglePills("animation", "4")}
>
Shop
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav
pills
className="nav-justified pills-rounded pills-outline-purple-anm"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationRO"] === "1"}
onClick={this.togglePills("animationRO", "1")}
>
Madrid
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationRO"] === "2"}
onClick={this.togglePills("animationRO", "2")}
>
Bari
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationRO"] === "3"}
onClick={this.togglePills("animationRO", "3")}
>
Warsaw
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationRO"] === "4"}
onClick={this.togglePills("animationRO", "4")}
>
Paris
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBNav
pills
className="nav-justified pills-rounded pills-orange-anm"
>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationR"] === "1"}
onClick={this.togglePills("animationR", "1")}
>
Features
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationR"] === "2"}
onClick={this.togglePills("animationR", "2")}
>
Pricing
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationR"] === "3"}
onClick={this.togglePills("animationR", "3")}
>
Gadgets
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["animationR"] === "4"}
onClick={this.togglePills("animationR", "4")}
>
Technology
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent activeItem={this.state.items["animationR"]}>
<MDBTabPane tabId="1">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="2">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="3">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
<MDBTabPane tabId="4">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Nihil odit magnam minima, soluta doloribus
reiciendis molestiae placeat unde eos molestias.
Quisquam aperiam, pariatur. Tempora, placeat ratione
porro voluptate odit minima.
</p>
</MDBTabPane>
</MDBTabContent>
</MDBCol>
</MDBContainer>
);
}
}
export default PillsColorAnimations;
.pills-blue-teal .nav-item .nav-link.active {
background-color: #4fc3f7;
-webkit-animation-name: example; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: example;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
from {background-color: #4fc3f7;}
to {background-color: #009688;}
}
/* Standard syntax */
@keyframes example {
from {background-color: #4fc3f7;}
to {background-color: #009688;}
}
.pills-outline-purple-anm .nav-item .nav-link.active {
border: 2px solid #9c27b0;
color: #9c27b0;
background-color: transparent;
-webkit-animation-name: outline; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: outline;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes outline {
from {border: 2px solid #9c27b0; color: #9c27b0;}
to {border: 2px solid #f48fb1; color: #f48fb1;}
}
/* Standard syntax */
@keyframes outline {
from {border: 2px solid #9c27b0; color: #9c27b0;}
to {border: 2px solid #f48fb1; color: #f48fb1;}
}
.pills-orange-anm .nav-item .nav-link.active {
background-color: #ffa000 ;
-webkit-animation-name: orange; /* Safari 4.0 - 8.0 */
-webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
animation-name: orange;
animation-duration: 4s;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes orange {
from {background-color: #ffa000 ;}
to {background-color: #f44336;}
}
/* Standard syntax */
@keyframes orange {
from {background-color: #ffa000 ;}
to {background-color: #f44336;}
}
.pills-rounded .nav-item .nav-link {
border-radius: 10em;
}
Pills within modal MDB Pro component
import React, { Component } from "react";
import {
MDBContainer,
MDBRow,
MDBCol,
MDBBtn,
MDBIcon,
MDBModal,
MDBModalBody,
MDBModalFooter,
MDBInput,
MDBTabPane,
MDBTabContent,
MDBNav,
MDBNavItem,
MDBNavLink,
} from "mdbreact";
class PillsInModal extends Component {
state = {
modal1: false,
items: {
modal: "1",
}
}
togglePills = (type, tab) => e => {
e.preventDefault();
if (this.state.items[type] !== tab) {
let items = { ...this.state.items };
items[type] = tab;
this.setState({
items
});
}
};
toggle = nr => () => {
let modalNumber = "modal" + nr;
this.setState({
[modalNumber]: !this.state[modalNumber]
});
};
render() {
return (
<MDBContainer>
<MDBBtn rounded onClick={this.toggle(1)}>
Launch Modal LogIn/Register
<MDBIcon icon="eye" className="ml-1" />
</MDBBtn>
<MDBModal
isOpen={this.state.modal1}
toggle={this.toggle(1)}
centered
>
<MDBModalBody>
<MDBNav pills color="primary" className="nav-justified pt-2">
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["modal"] === "1"}
onClick={this.togglePills("modal", "1")}
>
<MDBIcon icon="user" className="mr-1" /> Login
</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink
link
to="#"
active={this.state.items["modal"] === "2"}
onClick={this.togglePills("modal", "2")}
>
<MDBIcon icon="user-plus" className="mr-1" /> Register
</MDBNavLink>
</MDBNavItem>
</MDBNav>
<MDBTabContent activeItem={this.state.items['modal']}>
<MDBTabPane tabId="1">
<form className=" mx-3 grey-text">
<MDBInput
label="Your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your password"
icon="lock"
group
type="password"
validate
/>
<MDBCol size="12" className="text-center">
<MDBBtn color="primary">
LOG IN
<MDBIcon icon="sign-in-alt" className="ml-1" />
</MDBBtn>
</MDBCol>
</form>
</MDBTabPane>
<MDBTabPane tabId="2">
<form className="mx-3 grey-text">
<MDBInput
label="Your name"
icon="user"
group
type="text"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your email"
icon="envelope"
group
type="email"
validate
error="wrong"
success="right"
/>
<MDBInput
label="Your password"
icon="lock"
group
type="password"
validate
/>
<MDBCol size="12" className="text-center">
<MDBBtn color="primary">
SIGN IN
<MDBIcon icon="sign-in-alt" className="ml-1" />
</MDBBtn>
</MDBCol>
</form>
</MDBTabPane>
</MDBTabContent>
</MDBModalBody>
<MDBModalFooter className="justify-content-center">
<MDBRow className="w-100 justify-content-start">
<MDBCol size="8">
<div id="options" className="text-right float-left">
<MDBTabContent
className="pt-1 px-0 pb-0"
activeItem={this.state.items["modal"]}
>
<MDBTabPane tabId="1">
<p className="font-small">
Not a member?
<a
className="blue-text ml-1"
onClick={this.togglePills("modal", "2")}
>
Sign Up
</a>
</p>
<p className="font-small">
Forgot <a className="blue-text ml-1">password?</a>
</p>
</MDBTabPane>
<MDBTabPane tabId="2">
<p className="font-small">
Already have an account?
<a
className="blue-text ml-1"
onClick={this.togglePills("modal", "2")}
>
LogIn
</a>
</p>
<p className="font-small">
Forgot <a className="blue-text ml-1">password?</a>
</p>
</MDBTabPane>
</MDBTabContent>
</div>
</MDBCol>
<MDBCol size="4" className="float-right">
<MDBBtn outline color="primary" onClick={this.toggle(1)}>
CLOSE
</MDBBtn>
</MDBCol>
</MDBRow>
</MDBModalFooter>
</MDBModal>
</MDBContainer>
);
}
}
export default PillsInModal;
React Pills - API
In this section you will find advanced information about the Pills component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
Pill are variation of Tabs, so make sure you have imported proper modules first.
import { MDBTabPane, MDBTabContent } from 'mdbreact';
API Reference: TabContent Properties
The table below shows the configuration options of the MDBTabContent component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
activeItem |
String | |
Active TabPane id - use this prop to control the component | <MDBTabContent activeItem={this.state.activeTab} /> |
className |
String | |
Sets custom classes, use class card to achieve card-like effect (you can use
Card
subcomponents inside) |
<MDBTabContent className="card" /> |
API Reference: TabPane Properties
The table below shows the configuration options of the MDBTabPane component.
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
className |
String | |
Adds custom classes | <MDBTabPane className="customClass" /> |
tabId |
String | |
Indicates active pane | <MDBTabPane tabId="tab1" /> |