458 lines
20 KiB
JavaScript
Executable File
458 lines
20 KiB
JavaScript
Executable File
import React from 'react';
|
|
import faker from 'faker/locale/en_US';
|
|
|
|
import {
|
|
Accordion,
|
|
Container,
|
|
Row,
|
|
Col,
|
|
CardText,
|
|
} from './../../../components';
|
|
import { HeaderMain } from "../../components/HeaderMain";
|
|
import { HeaderDemo } from "../../components/HeaderDemo";
|
|
|
|
const Accordions = () => (
|
|
<React.Fragment>
|
|
<Container>
|
|
<HeaderMain
|
|
title="Accordions"
|
|
className="mb-5 mt-4"
|
|
/>
|
|
{ /* START Header 1 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={1}
|
|
title="Accordions Default"
|
|
subTitle="Basic button layout options"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 1 */}
|
|
{ /* START Section 1 */}
|
|
<Row>
|
|
{ /* START Col6 1 */}
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Card with Links
|
|
<span className="small ml-1 text-muted">
|
|
#1.01
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>,
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
<Accordion className="mb-2" initialOpen>
|
|
<Accordion.Header className="h6">
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="h6">
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="h6">
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Normal Text
|
|
<span className="small ml-1 text-muted">
|
|
#1.04
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>,
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
<Accordion className="mb-2" initialOpen>
|
|
<Accordion.Header>
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header>
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header>
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
</Col>
|
|
{ /* END Col6 1 */}
|
|
{ /* START Col6 2 */}
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Card Left Icon
|
|
<span className="small ml-1 text-muted">
|
|
#1.02
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>, <code><i className="fa fa-fw fa-plus" /></code>
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
<Accordion className="mb-2" initialOpen>
|
|
<Accordion.Header className='h6'>
|
|
<Accordion.Indicator className="mr-2"/>
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className='h6'>
|
|
<Accordion.Indicator className="mr-2"/>
|
|
Accordion Card #2
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className='h6'>
|
|
<Accordion.Indicator className="mr-2"/>
|
|
Accordion Card #3
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Card Right Icon
|
|
<span className="small ml-1 text-muted">
|
|
#1.03
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>,
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
|
|
<Accordion className="mb-2" initialOpen>
|
|
<Accordion.Header className="d-flex h6">
|
|
<span>Accordion Card #1</span>
|
|
<Accordion.Indicator className="ml-auto"/>
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="d-flex h6">
|
|
<span>Accordion Card #1</span>
|
|
<Accordion.Indicator className="ml-auto"/>
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="d-flex h6">
|
|
<span>Accordion Card #1</span>
|
|
<Accordion.Indicator className="ml-auto"/>
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Card Right & Left Icon
|
|
<span className="small ml-1 text-muted">
|
|
#1.05
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>,
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
<Accordion className="mb-2" initialOpen>
|
|
<Accordion.Header className="d-flex align-items-center h6">
|
|
<span>
|
|
<i className="fa fa-fw fa-bookmark-o mr-2"></i>
|
|
Accordion Card #1
|
|
</span>
|
|
<Accordion.Indicator className="ml-auto"/>
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="d-flex align-items-center h6">
|
|
<span>
|
|
<i className="fa fa-fw fa-clone mr-2"></i>
|
|
Accordion Card #2
|
|
</span>
|
|
<Accordion.Indicator className="ml-auto"/>
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="d-flex align-items-center h6">
|
|
<span>
|
|
<i className="fa fa-fw fa-copy mr-2"></i>
|
|
Accordion Card #3
|
|
</span>
|
|
<Accordion.Indicator className="ml-auto"/>
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
</Col>
|
|
{ /* END Col6 2 */}
|
|
</Row>
|
|
{ /* END Section 1 */}
|
|
|
|
{ /* START Header 2 */}
|
|
<Row>
|
|
<Col lg={ 12 }>
|
|
<HeaderDemo
|
|
no={2}
|
|
title="Accordions Styling"
|
|
className="mt-5"
|
|
subTitle="Basic button layout options"
|
|
/>
|
|
</Col>
|
|
</Row>
|
|
{ /* END Header 2 */}
|
|
{ /* START Section 2 */}
|
|
<Row>
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Card Colors Borders
|
|
<span className="small ml-1 text-muted">
|
|
#2.01
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>,
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
|
|
<Accordion className="mb-2 b-primary" initialOpen>
|
|
<Accordion.Header className="text-primary">
|
|
Primary Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="text-success">
|
|
Success Card #2
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header className="text-danger">
|
|
Danger Card #3
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Card Colors Backgrounds
|
|
<span className="small ml-1 text-muted">
|
|
#2.02
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>,
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
<Accordion className="mb-2 bg-primary text-white" initialOpen>
|
|
<Accordion.Header className="text-white">
|
|
Primary Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2 bg-success text-white">
|
|
<Accordion.Header className="text-white">
|
|
Success Card #2
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2 bg-danger text-white">
|
|
<Accordion.Header className="text-white">
|
|
Danger Card #3
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
</Col>
|
|
<Col lg={ 6 }>
|
|
{ /* START Example */}
|
|
<div className="mb-5">
|
|
<h6>
|
|
Accordion: Card White Background
|
|
<span className="small ml-1 text-muted">
|
|
#2.03
|
|
</span>
|
|
</h6>
|
|
<p>
|
|
Below is an example of default accordion based on <code>Card</code>, <code>h6</code>,
|
|
and <code>UncontrolledCollapse</code>.
|
|
</p>
|
|
<Accordion className="mb-2" initialOpen>
|
|
<Accordion.Header>
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header>
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
|
|
<Accordion className="mb-2">
|
|
<Accordion.Header>
|
|
Accordion Card #1
|
|
</Accordion.Header>
|
|
<Accordion.Body>
|
|
<CardText>
|
|
{ faker.lorem.paragraph() }
|
|
</CardText>
|
|
</Accordion.Body>
|
|
</Accordion>
|
|
</div>
|
|
{ /* END Example */}
|
|
</Col>
|
|
</Row>
|
|
{ /* END Section 2 */}
|
|
</Container>
|
|
</React.Fragment>
|
|
);
|
|
|
|
export default Accordions;
|