Tomasz Owczarczyk
457
app/routes/Interface/Accordions/Accordions.js
Executable file
457
app/routes/Interface/Accordions/Accordions.js
Executable file
@@ -0,0 +1,457 @@
|
||||
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;
|
||||
3
app/routes/Interface/Accordions/index.js
Executable file
3
app/routes/Interface/Accordions/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Accordions from './Accordions';
|
||||
|
||||
export default Accordions;
|
||||
758
app/routes/Interface/Alerts/Alerts.js
Executable file
758
app/routes/Interface/Alerts/Alerts.js
Executable file
@@ -0,0 +1,758 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Alert,
|
||||
Col,
|
||||
Button,
|
||||
Media,
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const Alerts = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Alerts"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Alerts Default"
|
||||
subTitle="Provide contextual feedback messages for typical user actions with the handful of
|
||||
available and flexible alert messages. Alerts don't have default classes, only base and
|
||||
modifier classes: choose from primary, success, info, warning or danger. Wrap any text
|
||||
and an optional dismiss button in .alert and one of the five contextual classes
|
||||
(e.g., .alert-success) for basic alert messages."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Alert: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="primary">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Morning!
|
||||
</h6>
|
||||
Were glad to see you again and wish you a nice day.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Alert: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="danger">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Oh Snap!
|
||||
</h6>
|
||||
Change a few things up and try submitting again.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Alert: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="info">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Heads Up!
|
||||
</h6>
|
||||
This alert needs your attention, but its not super important.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 2 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Alert: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.04
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="warning">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Warning!
|
||||
</h6>
|
||||
Better check yourself, youre not looking too good.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Alert: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.05
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="success">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Well Done!
|
||||
</h6>
|
||||
You successfully read this important alert message.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Alert: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.06
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="dark">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Attention
|
||||
</h6>
|
||||
This alert needs your attention, but its not important.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 2 */}
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Alerts Dismissing"
|
||||
className="mt-5"
|
||||
subTitle="Sing the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="primary">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Morning!
|
||||
</h6>
|
||||
Were glad to see you again and wish you a nice day.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="danger">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Oh Snap!
|
||||
</h6>
|
||||
Change a few things up and try submitting again.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="info">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Heads Up!
|
||||
</h6>
|
||||
This alert needs your attention, but its not super important.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 2 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="warning">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Warning!
|
||||
</h6>
|
||||
Better check yourself, youre not looking too good.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="success">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Well Done!
|
||||
</h6>
|
||||
You successfully read this important alert message.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.06
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="dark">
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Attention
|
||||
</h6>
|
||||
This alert needs your attention, but its not important.
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 2 */}
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Alerts Icon Small"
|
||||
className="mt-5"
|
||||
subTitle="Sing the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Small: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="primary">
|
||||
<i className="fa fa-play-circle mr-1 alert-icon"></i>
|
||||
<span>
|
||||
<strong className="alert-heading">Welcome!</strong> We're glad to see you again and wish you a nice day.
|
||||
</span>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Small: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="danger">
|
||||
<i className="fa fa-times-circle mr-1 alert-icon"></i>
|
||||
<span>
|
||||
<strong className="alert-heading">Danger!</strong> Change a few things up and try submitting again.
|
||||
</span>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Small: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="info">
|
||||
<i className="fa fa-info-circle mr-1 alert-icon"></i>
|
||||
<span>
|
||||
<strong className="alert-heading">Information!</strong> This alert needs your attention, but it's not important.
|
||||
</span>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 2 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Small: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="warning">
|
||||
<i className="fa fa-exclamation-circle mr-1 alert-icon"></i>
|
||||
<span>
|
||||
<strong className="alert-heading">Warning!</strong> Better check yourself, you're not looking too good.
|
||||
</span>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Small: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.05
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="success">
|
||||
<i className="fa fa-check-circle mr-1 alert-icon"></i>
|
||||
<span>
|
||||
<strong className="alert-heading">Success!</strong> You successfully read this important alert message.
|
||||
</span>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Small: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="dark">
|
||||
<i className="fa fa-question-circle mr-1 alert-icon"></i>
|
||||
<span>
|
||||
<strong className="alert-heading">Attention!</strong> This alert needs your attention, but it's not important.
|
||||
</span>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 2 */}
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Alerts Icon Big"
|
||||
className="mt-5"
|
||||
subTitle="Sing the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="primary">
|
||||
<Media>
|
||||
<Media left middle className="mr-2">
|
||||
<i className="fa fa-caret-right fa-fw fa-2x alert-icon"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Welcome!
|
||||
</h6>
|
||||
We're glad to see you again and wish you a nice day.
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="danger">
|
||||
<Media>
|
||||
<Media left middle className="mr-2">
|
||||
<i className="fa fa-close fa-fw fa-2x alert-icon"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Danger!
|
||||
</h6>
|
||||
Change a few things up and try submitting.
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="info">
|
||||
<Media>
|
||||
<Media left middle className="mr-2">
|
||||
<i className="fa fa-info fa-fw fa-2x alert-icon"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Information!
|
||||
</h6>
|
||||
This alert needs your attention, but it's not important.
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 2 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="warning">
|
||||
<Media>
|
||||
<Media left middle className="mr-2">
|
||||
<i className="fa fa-exclamation fa-fw fa-2x alert-icon"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Warning!
|
||||
</h6>
|
||||
Better check yourself, you're not looking too good.
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="success">
|
||||
<Media>
|
||||
<Media left middle className="mr-2">
|
||||
<i className="fa fa-check fa-fw fa-2x alert-icon"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Success!
|
||||
</h6>
|
||||
You successfully read this important alert message.
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.06
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="dark">
|
||||
<Media>
|
||||
<Media left top className="mr-2">
|
||||
<i className="fa fa-question fa-fw fa-2x alert-icon"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="mb-1 alert-heading">
|
||||
Attention!
|
||||
</h6>
|
||||
This alert needs your attention, but it's not important.
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 2 */}
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
|
||||
{ /* START Header 5 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={5}
|
||||
title="Alerts Big"
|
||||
className="mt-5"
|
||||
subTitle="Sing the alert JavaScript plugin, it’s possible to dismiss any alert inline. Here’s how:"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 5 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Dismissing: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.01
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="primary">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-circle fa-stack-2x alert-bg-icon"></i>
|
||||
<i className="fa fa-caret-right fa-stack-1x fa-inverse alert-icon"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="alert-heading mb-1">
|
||||
Welcome!
|
||||
</h6>
|
||||
We're glad to see you again and wish you a nice day.
|
||||
<div className="mt-2">
|
||||
<Button color="primary">I Understand</Button>{' '}
|
||||
<Button color="primary" outline>Cancel</Button>{' '}
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.02
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="danger">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-circle fa-fw fa-stack-2x alert-bg-icon"></i>
|
||||
<i className="fa fa-close fa-stack-1x fa-inverse alert-icon"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="alert-heading mb-1">
|
||||
Danger!
|
||||
</h6>
|
||||
Change a few things up and try submitting.
|
||||
<div className="mt-2">
|
||||
<Button color="danger">I Understand</Button>{' '}
|
||||
<Button color="danger" outline>Cancel</Button>{' '}
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.03
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="info">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-circle fa-fw fa-stack-2x alert-bg-icon"></i>
|
||||
<i className="fa fa-info fa-stack-1x fa-inverse alert-icon"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="alert-heading mb-1">
|
||||
Information!
|
||||
</h6>
|
||||
This alert needs your attention, but it's not important.
|
||||
<div className="mt-2">
|
||||
<Button color="info">I Understand</Button>{' '}
|
||||
<Button color="info" outline>Cancel</Button>{' '}
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 2 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.04
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="warning">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-circle fa-fw fa-stack-2x alert-bg-icon"></i>
|
||||
<i className="fa fa-exclamation fa-stack-1x fa-inverse alert-icon"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="alert-heading mb-1">
|
||||
Warning!
|
||||
</h6>
|
||||
Better check yourself, you're not looking too good.
|
||||
<div className="mt-2">
|
||||
<Button color="warning">I Understand</Button>{' '}
|
||||
<Button color="warning" outline>Cancel</Button>{' '}
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.05
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="success">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-circle fa-fw fa-stack-2x alert-bg-icon"></i>
|
||||
<i className="fa fa-check fa-stack-1x fa-inverse alert-icon"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="alert-heading mb-1">
|
||||
Success!
|
||||
</h6>
|
||||
You successfully read this important alert message.
|
||||
<div className="mt-2">
|
||||
<Button color="success">I Understand</Button>{' '}
|
||||
<Button color="success" outline>Cancel</Button>{' '}
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
{ /* START Example */}
|
||||
<div className="mb-4">
|
||||
<h6>
|
||||
Icon Big: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.06
|
||||
</span>
|
||||
</h6>
|
||||
<Alert color="dark">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<span className="fa-stack fa-lg">
|
||||
<i className="fa fa-circle fa-fw fa-stack-2x"></i>
|
||||
<i className="fa fa-question fa-stack-1x fa-inverse alert-icon"></i>
|
||||
</span>
|
||||
</Media>
|
||||
<Media body>
|
||||
<h6 className="alert-heading">
|
||||
Attention!
|
||||
</h6>
|
||||
This alert needs your attention, but it's not important.
|
||||
<div className="mt-2">
|
||||
<Button color="dark">I Understand</Button>{' '}
|
||||
<Button color="dark" outline>Cancel</Button>{' '}
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
</Alert>
|
||||
</div>
|
||||
{ /* END Example */}
|
||||
</Col>
|
||||
{ /* END Col6 2 */}
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Alerts;
|
||||
3
app/routes/Interface/Alerts/index.js
Executable file
3
app/routes/Interface/Alerts/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Alerts from './Alerts';
|
||||
|
||||
export default Alerts;
|
||||
1662
app/routes/Interface/Avatars/Avatars.js
Executable file
1662
app/routes/Interface/Avatars/Avatars.js
Executable file
File diff suppressed because it is too large
Load Diff
3
app/routes/Interface/Avatars/index.js
Executable file
3
app/routes/Interface/Avatars/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Avatars from './Avatars';
|
||||
|
||||
export default Avatars;
|
||||
600
app/routes/Interface/BadgesLabels/BadgesLabels.js
Executable file
600
app/routes/Interface/BadgesLabels/BadgesLabels.js
Executable file
@@ -0,0 +1,600 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
Badge,
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const BadgesLabels = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Badges & Labels"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Badges Default"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Basic button layout options.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-default</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="primary">Primary</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Secondary
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-secondary</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="secondary">Secondary</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-success</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="success">Success</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-danger</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="danger">Danger</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-warning</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="warning">Warning</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-info</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="info">Info</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Light
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-light</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="light">Light</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.08
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-dark</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="dark">Dark</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Badges Options"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Basic button layout options.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Pill
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-default</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="primary" pill>Badge Pill</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Without Rounded
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-secondary</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="secondary">Without Rounds</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Dropdown
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-success</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="success">Badge Dropdown</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Only Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-danger</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="info">
|
||||
<i className="fa fa-home"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Only Icon Link
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-warning</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="warning" href="#">
|
||||
<i className="fa fa-link"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Only Icon Rounded
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-info</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="danger">
|
||||
<i className="fa fa-exclamation"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge: Only Icon Rounded Link
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-light</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="dark" href="#">
|
||||
<i className="fa fa-gear"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Badges Border"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Basic button layout options.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-default</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="primary">Primary</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Secondary
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-secondary</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="secondary">Secondary</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-success</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="success">Success</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-danger</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="danger">Danger</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-warning</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="warning">Warning</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-info</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="info">Info</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Light
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-light</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="light">Light</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.08
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-dark</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="dark">Dark</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Badges Border Options"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Basic button layout options.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Pill
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-default</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="primary" pill>Badge Pill</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Without Rounded
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-secondary</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="secondary">Without Rounds</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Dropdown
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-success</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="success">Badge Dropdown</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Only Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-danger</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="info">
|
||||
<i className="fa fa-home"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Only Icon Link
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-warning</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="warning" href="#">
|
||||
<i className="fa fa-link"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Only Icon Rounded
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-info</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="danger">
|
||||
<i className="fa fa-exclamation"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Badge Border: Only Icon Rounded Link
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default label styling. To use,
|
||||
add <code>.label-light</code> to the base <code>.label</code> class.
|
||||
</p>
|
||||
<Badge color="dark" href="#">
|
||||
<i className="fa fa-gear"></i>
|
||||
</Badge>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default BadgesLabels;
|
||||
3
app/routes/Interface/BadgesLabels/index.js
Executable file
3
app/routes/Interface/BadgesLabels/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import BadgesLabels from './BadgesLabels';
|
||||
|
||||
export default BadgesLabels;
|
||||
119
app/routes/Interface/Breadcrumbs/Breadcrumbs.js
Executable file
119
app/routes/Interface/Breadcrumbs/Breadcrumbs.js
Executable file
@@ -0,0 +1,119 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardBody,
|
||||
Breadcrumb,
|
||||
BreadcrumbItem,
|
||||
CardTitle,
|
||||
} from './../../../components'
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import {
|
||||
HeaderDemo
|
||||
} from "../../components/HeaderDemo";
|
||||
|
||||
export const Breadcrumbs = () => (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Breadcrumbs"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Breadcrumbs Defaults"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Breadcrumb */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Breadcrumb: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem active>
|
||||
Home
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Breadcrumb */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Breadcrumb */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Breadcrumb: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>
|
||||
<a href="#">Home</a>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem active>
|
||||
Library
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Breadcrumb */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Breadcrumb */}
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Breadcrumb: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>
|
||||
<a href="#">Home</a>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem>
|
||||
<a href="#">Library</a>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbItem active>
|
||||
Data
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Breadcrumb */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
</Row>
|
||||
{ /* START Section 1 */}
|
||||
|
||||
</Container>
|
||||
);
|
||||
|
||||
export default Breadcrumbs;
|
||||
3
app/routes/Interface/Breadcrumbs/index.js
Executable file
3
app/routes/Interface/Breadcrumbs/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Breadcrumbs from './Breadcrumbs';
|
||||
|
||||
export default Breadcrumbs;
|
||||
1986
app/routes/Interface/Buttons/Buttons.js
Executable file
1986
app/routes/Interface/Buttons/Buttons.js
Executable file
File diff suppressed because it is too large
Load Diff
3
app/routes/Interface/Buttons/index.js
Executable file
3
app/routes/Interface/Buttons/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Buttons from './Buttons';
|
||||
|
||||
export default Buttons;
|
||||
112
app/routes/Interface/Calendar/Calendar.js
Executable file
112
app/routes/Interface/Calendar/Calendar.js
Executable file
@@ -0,0 +1,112 @@
|
||||
import React from 'react';
|
||||
import { Calendar as BigCalendar, momentLocalizer } from 'react-big-calendar';
|
||||
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
|
||||
import moment from 'moment';
|
||||
|
||||
import {
|
||||
Container
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import events from './events';
|
||||
|
||||
const DragAndDropCalendar = withDragAndDrop(BigCalendar)
|
||||
const localizer = momentLocalizer(moment)
|
||||
|
||||
|
||||
export class Calendar extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
events: events,
|
||||
}
|
||||
|
||||
this.moveEvent = this.moveEvent.bind(this)
|
||||
this.newEvent = this.newEvent.bind(this)
|
||||
}
|
||||
|
||||
moveEvent({ event, start, end, isAllDay: droppedOnAllDaySlot }) {
|
||||
const { events } = this.state
|
||||
|
||||
const idx = events.indexOf(event)
|
||||
let allDay = event.allDay
|
||||
|
||||
if (!event.allDay && droppedOnAllDaySlot) {
|
||||
allDay = true
|
||||
} else if (event.allDay && !droppedOnAllDaySlot) {
|
||||
allDay = false
|
||||
}
|
||||
|
||||
const updatedEvent = { ...event, start, end, allDay }
|
||||
|
||||
const nextEvents = [...events]
|
||||
nextEvents.splice(idx, 1, updatedEvent)
|
||||
|
||||
this.setState({
|
||||
events: nextEvents,
|
||||
})
|
||||
}
|
||||
|
||||
resizeEvent = ({ event, start, end }) => {
|
||||
const { events } = this.state
|
||||
|
||||
const nextEvents = events.map(existingEvent => {
|
||||
return existingEvent.id == event.id
|
||||
? { ...existingEvent, start, end }
|
||||
: existingEvent
|
||||
})
|
||||
|
||||
this.setState({
|
||||
events: nextEvents,
|
||||
})
|
||||
}
|
||||
|
||||
newEvent(event) {
|
||||
const title = window.prompt('New Event name');
|
||||
if (!title) {
|
||||
return;
|
||||
}
|
||||
|
||||
let idList = this.state.events.map(a => a.id)
|
||||
let newId = Math.max(...idList) + 1
|
||||
let hour = {
|
||||
id: newId,
|
||||
title,
|
||||
allDay: event.slots.length == 1,
|
||||
start: event.start,
|
||||
end: event.end,
|
||||
}
|
||||
this.setState({
|
||||
events: this.state.events.concat([hour]),
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Calendar"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
<p className="pb-4">
|
||||
An events calendar component built for React and made for modern browsers (read: IE10+) and uses flexbox over the classic tables-ception approach.
|
||||
See <a href="https://github.com/intljusticemission/react-big-calendar" target="_blank" rel="noopener noreferrer">Demo and Docs</a>
|
||||
</p>
|
||||
<DragAndDropCalendar
|
||||
style={{
|
||||
minHeight: '720px'
|
||||
}}
|
||||
selectable
|
||||
localizer={localizer}
|
||||
events={this.state.events}
|
||||
onEventDrop={this.moveEvent}
|
||||
resizable
|
||||
onEventResize={this.resizeEvent}
|
||||
onSelectSlot={this.newEvent}
|
||||
defaultView={'month'}
|
||||
defaultDate={new Date()}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
111
app/routes/Interface/Calendar/events.js
Executable file
111
app/routes/Interface/Calendar/events.js
Executable file
@@ -0,0 +1,111 @@
|
||||
import moment from 'moment';
|
||||
|
||||
const currentYear = moment().year();
|
||||
const currentMonth = moment().month();
|
||||
|
||||
export default [
|
||||
{
|
||||
id: 0,
|
||||
title: 'All Day Event very long title',
|
||||
allDay: true,
|
||||
start: new Date(currentYear, currentMonth, 0),
|
||||
end: new Date(currentYear, currentMonth, 1),
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'Long Event',
|
||||
start: new Date(currentYear, currentMonth, 7),
|
||||
end: new Date(currentYear, currentMonth, 10),
|
||||
},
|
||||
|
||||
{
|
||||
id: 2,
|
||||
title: 'DTS STARTS',
|
||||
start: new Date(2016, 2, 13, 0, 0, 0),
|
||||
end: new Date(2016, 2, 20, 0, 0, 0),
|
||||
},
|
||||
|
||||
{
|
||||
id: 3,
|
||||
title: 'DTS ENDS',
|
||||
start: new Date(2016, 10, 6, 0, 0, 0),
|
||||
end: new Date(2016, 10, 13, 0, 0, 0),
|
||||
},
|
||||
|
||||
{
|
||||
id: 4,
|
||||
title: 'Some Event',
|
||||
start: new Date(currentYear, currentMonth, 9, 0, 0, 0),
|
||||
end: new Date(currentYear, currentMonth, 10, 0, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: 'Conference',
|
||||
start: new Date(currentYear, currentMonth, 11),
|
||||
end: new Date(currentYear, currentMonth, 13),
|
||||
desc: 'Big conference for important people',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: 'Meeting',
|
||||
start: new Date(currentYear, currentMonth, 12, 10, 30, 0, 0),
|
||||
end: new Date(currentYear, currentMonth, 12, 12, 30, 0, 0),
|
||||
desc: 'Pre-meeting meeting, to prepare for the meeting',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: 'Lunch',
|
||||
start: new Date(currentYear, currentMonth, 12, 12, 0, 0, 0),
|
||||
end: new Date(currentYear, currentMonth, 12, 13, 0, 0, 0),
|
||||
desc: 'Power lunch',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: 'Meeting',
|
||||
start: new Date(currentYear, currentMonth, 12, 14, 0, 0, 0),
|
||||
end: new Date(currentYear, currentMonth, 12, 15, 0, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: 'Happy Hour',
|
||||
start: new Date(currentYear, currentMonth, 12, 17, 0, 0, 0),
|
||||
end: new Date(currentYear, currentMonth, 12, 17, 30, 0, 0),
|
||||
desc: 'Most important meal of the day',
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: 'Dinner',
|
||||
start: new Date(currentYear, currentMonth, 12, 20, 0, 0, 0),
|
||||
end: new Date(currentYear, currentMonth, 12, 21, 0, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: 'Birthday Party',
|
||||
start: new Date(currentYear, currentMonth, 13, 7, 0, 0),
|
||||
end: new Date(currentYear, currentMonth, 13, 10, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: 'Late Night Event',
|
||||
start: new Date(currentYear, currentMonth, 17, 19, 30, 0),
|
||||
end: new Date(currentYear, currentMonth, 18, 2, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 12.5,
|
||||
title: 'Late Same Night Event',
|
||||
start: new Date(currentYear, currentMonth, 17, 19, 30, 0),
|
||||
end: new Date(currentYear, currentMonth, 17, 23, 30, 0),
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: 'Multi-day Event',
|
||||
start: new Date(currentYear, currentMonth, 20, 19, 30, 0),
|
||||
end: new Date(currentYear, currentMonth, 22, 2, 0, 0),
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: 'Today',
|
||||
start: new Date(new Date().setHours(new Date().getHours() - 3)),
|
||||
end: new Date(new Date().setHours(new Date().getHours() + 3)),
|
||||
},
|
||||
];
|
||||
3
app/routes/Interface/Calendar/index.js
Executable file
3
app/routes/Interface/Calendar/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { Calendar } from './Calendar';
|
||||
|
||||
export default Calendar;
|
||||
508
app/routes/Interface/Colors/Colors.js
Executable file
508
app/routes/Interface/Colors/Colors.js
Executable file
@@ -0,0 +1,508 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
import { CardRgbaColor } from "../../components/Colors/CardRgbaColor";
|
||||
import { CardColor } from "../../components/Colors/CardColor";
|
||||
|
||||
const Colors = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Colors"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Colors"
|
||||
subTitle="Use any of these color variables as they are or reassign them to more meaningful variables for your project."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="primary"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="info"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="success"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="warning"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="danger"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="secondary"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="dark"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="light"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="white"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="All Colors"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
All colors available in Bootstrap 4, available as Sass variables and a Sass map in our <code>scss/_variables.scss</code> file.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="blue"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="indigo"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="purple"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="pink"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="red"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="orange"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="yellow"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="green"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="teal"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="cyan"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="RGBA Colors"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Main Colors with Opacity from 0.1 to 0.9 for example <code>.text-primary-100</code>, cod.bg-primary-200 or .b-primary-300
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="primary"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="info"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="success"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="warning"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="danger"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="yellow"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="purple"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="secondary"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="dark"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
cardClass="bg-dark b-0"
|
||||
color="light"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="All Colors"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
All colors available in Bootstrap 4, available as Sass variables and a Sass map in our <code>scss/_variables.scss</code> file.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="facebook"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="twitter"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="lastfm"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="pinterest"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="linkedin"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="medium"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="skype"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="foursquare"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="android"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="spotify"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="youtube"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="windows"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
{ /* START Card Color */}
|
||||
<CardColor
|
||||
color="amazon"
|
||||
hex="#262626"
|
||||
rgba="65, 839, 220"
|
||||
cmyk="71% 65% 64% 69%"
|
||||
/>
|
||||
{ /* END Card Color */}
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
|
||||
{ /* START Header 5 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Gray & White RGBA"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Very helpful colors useful in the design of
|
||||
elements on bright backgrounds.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 5 */}
|
||||
{ /* START Section 5 */}
|
||||
<Row>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
color="black"
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 3 } md={ 6 } sm={ 12 }>
|
||||
<CardRgbaColor
|
||||
cardClass="bg-dark b-0"
|
||||
color="white"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 5 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Colors;
|
||||
3
app/routes/Interface/Colors/index.js
Executable file
3
app/routes/Interface/Colors/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Colors from './Colors';
|
||||
|
||||
export default Colors;
|
||||
63
app/routes/Interface/CropImage/CropImage.js
Executable file
63
app/routes/Interface/CropImage/CropImage.js
Executable file
@@ -0,0 +1,63 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container
|
||||
} from './../../../components';
|
||||
import {
|
||||
ExampleProvider
|
||||
} from './components/ExampleProvider';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
import image1 from './images/image-1.jpg'
|
||||
import image2 from './images/image-2.jpg';
|
||||
|
||||
|
||||
export const CropImage = () => (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Crop Images"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
<div>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Default"
|
||||
subTitle="Default configuration of the crop component."
|
||||
/>
|
||||
<ExampleProvider
|
||||
src={ image1 }
|
||||
/>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
className="mt-5"
|
||||
title="Limit Crop Size"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
You can limit the crop size by providing crop
|
||||
percentage using <code>minWidth</code>, <code>maxWidth</code>,
|
||||
<code>minHeight</code> and <code>minHeight</code> props.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
<ExampleProvider
|
||||
src={ image2 }
|
||||
cropProps={{
|
||||
minWidth: 30,
|
||||
maxWidth: 60,
|
||||
minHeight: 30,
|
||||
maxHeight: 60
|
||||
}}
|
||||
initialPosition={{
|
||||
x: 20,
|
||||
width: 60,
|
||||
y: 20,
|
||||
height: 60
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
147
app/routes/Interface/CropImage/components/ExampleProvider.js
Executable file
147
app/routes/Interface/CropImage/components/ExampleProvider.js
Executable file
@@ -0,0 +1,147 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import _ from 'lodash';
|
||||
import ReactCrop from 'react-image-crop'
|
||||
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Button
|
||||
} from './../../../../components';
|
||||
|
||||
const _document = typeof document !== 'undefined' ? document : null;
|
||||
const _window = typeof window !== 'undefined' ? window : null;
|
||||
|
||||
const initialPosition = {
|
||||
x: 10,
|
||||
y: 10,
|
||||
width: 80,
|
||||
height: 80,
|
||||
}
|
||||
|
||||
function getCroppedImg(image, pixelCrop, scale, fileName) {
|
||||
const canvas = _document.createElement('canvas');
|
||||
canvas.width = pixelCrop.width;
|
||||
canvas.height = pixelCrop.height;
|
||||
const ctx = canvas.getContext('2d');
|
||||
ctx.drawImage(
|
||||
image,
|
||||
pixelCrop.x * scale.x,
|
||||
pixelCrop.y * scale.y,
|
||||
pixelCrop.width * scale.x,
|
||||
pixelCrop.height * scale.y,
|
||||
0,
|
||||
0,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height
|
||||
);
|
||||
|
||||
return new Promise((resolve) => {
|
||||
canvas.toBlob(file => {
|
||||
file.name = fileName;
|
||||
resolve(file);
|
||||
}, 'image/jpeg');
|
||||
});
|
||||
}
|
||||
|
||||
export class ExampleProvider extends React.Component {
|
||||
static propTypes = {
|
||||
cropProps: PropTypes.object,
|
||||
src: PropTypes.node.isRequired,
|
||||
initialPosition: PropTypes.object
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
cropProps: { }
|
||||
}
|
||||
|
||||
state = {
|
||||
position: _.clone(this.props.initialPosition || initialPosition),
|
||||
croppedPosition: _.clone(this.props.initialPosition || initialPosition),
|
||||
croppedBlob: null
|
||||
}
|
||||
|
||||
cropRef = React.createRef();
|
||||
|
||||
render() {
|
||||
const { croppedBlob, position } = this.state;
|
||||
const { cropProps, src } = this.props;
|
||||
const imageUrl = croppedBlob ? _window.URL.createObjectURL(croppedBlob) : null;
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<ReactCrop
|
||||
className="d-block"
|
||||
crop={ position }
|
||||
src={ src }
|
||||
onChange={ (position) => { this.setState({ position }) }}
|
||||
onComplete={ (croppedPosition) => { this.setState({ croppedPosition }) } }
|
||||
ref={ this.cropRef }
|
||||
{ ...cropProps }
|
||||
/>
|
||||
</Col>
|
||||
<Col lg={ 6 } >
|
||||
{
|
||||
(!imageUrl) && (
|
||||
<div className="d-flex align-items-center justify-content-center b-2 b-dashed h-100 p-4">
|
||||
<span className="d-block text-muted text-center">
|
||||
<i className="fa fa-fw fa-info-circle mb-2 fa-2x"></i>
|
||||
<br />
|
||||
Select the part of the image on the left and click "Crop"
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
imageUrl && (
|
||||
<img
|
||||
src={ imageUrl }
|
||||
alt="Result Image"
|
||||
style={{ maxWidth: '100%' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
</Col>
|
||||
<Col lg={ 12 } className="mt-2">
|
||||
<Button color="primary" onClick={ this._crop }>
|
||||
Crop
|
||||
</Button>
|
||||
<Button color="link" onClick={ this._reset } className="ml-2">
|
||||
Reset
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
|
||||
_crop = () => {
|
||||
const { croppedPosition } = this.state;
|
||||
this.setState({ croppedBlob: null });
|
||||
|
||||
if (_document) {
|
||||
const imageElement = _document.createElement('img');
|
||||
const holderElement = this.cropRef.current.componentRef;
|
||||
imageElement.onload = () => {
|
||||
const holderSize = holderElement.getBoundingClientRect();
|
||||
const scale = {
|
||||
x: imageElement.naturalWidth / (holderSize.right - holderSize.left),
|
||||
y: imageElement.naturalHeight / (holderSize.bottom - holderSize.top),
|
||||
};
|
||||
getCroppedImg(imageElement, croppedPosition, scale, 'result.jpg')
|
||||
.then((croppedBlob) => {
|
||||
this.setState({croppedBlob});
|
||||
});
|
||||
}
|
||||
imageElement.src = this.props.src;
|
||||
}
|
||||
}
|
||||
|
||||
_reset = () => {
|
||||
this.setState({
|
||||
position: _.clone(this.props.initialPosition || initialPosition),
|
||||
croppedPosition: _.clone(this.props.initialPosition || initialPosition),
|
||||
croppedBlob: null
|
||||
})
|
||||
}
|
||||
}
|
||||
BIN
app/routes/Interface/CropImage/images/image-1.jpg
Executable file
BIN
app/routes/Interface/CropImage/images/image-1.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 184 KiB |
BIN
app/routes/Interface/CropImage/images/image-2.jpg
Executable file
BIN
app/routes/Interface/CropImage/images/image-2.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 393 KiB |
3
app/routes/Interface/CropImage/index.js
Executable file
3
app/routes/Interface/CropImage/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { CropImage } from './CropImage';
|
||||
|
||||
export default CropImage;
|
||||
73
app/routes/Interface/DragAndDropElements/DragAndDropElements.js
Executable file
73
app/routes/Interface/DragAndDropElements/DragAndDropElements.js
Executable file
@@ -0,0 +1,73 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Button
|
||||
} from './../../../components';
|
||||
import {
|
||||
HeaderMain
|
||||
} from './../../components/HeaderMain';
|
||||
import {
|
||||
HeaderDemo
|
||||
} from './../../components/HeaderDemo';
|
||||
|
||||
import {
|
||||
MultipleVerticalLists,
|
||||
DraggableTable,
|
||||
HorizontalLists
|
||||
} from './components';
|
||||
|
||||
export class DragAndDropElements extends React.Component {
|
||||
multipleVerticalListsRef = React.createRef();
|
||||
draggableTableRef = React.createRef();
|
||||
horizontalLists = React.createRef();
|
||||
|
||||
onResetState = () => {
|
||||
this.multipleVerticalListsRef.current.recoverInitialState();
|
||||
this.draggableTableRef.current.recoverInitialState();
|
||||
this.horizontalLists.current.recoverInitialState();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<div className="d-flex">
|
||||
<div>
|
||||
<HeaderMain title="Drag & Drop Elements"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
</div>
|
||||
<Button onClick={ this.onResetState } className="ml-auto align-self-center" color="primary" outline>
|
||||
Reset Layout
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<HeaderDemo
|
||||
no="1"
|
||||
title="Mutliple Verical Lists"
|
||||
subTitle="Both list are draggable horizontally and inner list elements can be swapped or reorderd"
|
||||
/>
|
||||
<MultipleVerticalLists ref={ this.multipleVerticalListsRef }/>
|
||||
</div>
|
||||
|
||||
<div className="mb-5">
|
||||
<HeaderDemo
|
||||
no="2"
|
||||
title="Table"
|
||||
subTitle="Allows reordering of the table rows"
|
||||
/>
|
||||
<DraggableTable ref={ this.draggableTableRef }/>
|
||||
</div>
|
||||
<div>
|
||||
<HeaderDemo
|
||||
no="3"
|
||||
title="Horizontal Lists"
|
||||
subTitle="Items can be reaordered and moved between lists"
|
||||
/>
|
||||
<HorizontalLists ref={ this.horizontalLists }/>
|
||||
</div>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
}
|
||||
300
app/routes/Interface/DragAndDropElements/components/DraggableTable.js
Executable file
300
app/routes/Interface/DragAndDropElements/components/DraggableTable.js
Executable file
@@ -0,0 +1,300 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import uid from 'uuid/v4';
|
||||
import _ from 'lodash';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import {
|
||||
DragDropContext,
|
||||
Droppable,
|
||||
Draggable
|
||||
} from 'react-beautiful-dnd';
|
||||
import classNames from 'classnames';
|
||||
|
||||
import {
|
||||
Table,
|
||||
Badge,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
Progress,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from './../../../../components';
|
||||
import { randomAvatar, randomArray } from './../../../../utilities';
|
||||
import { reorder } from './utilities';
|
||||
import classes from './common.scss';
|
||||
|
||||
const allSkills = ['JavaScript', 'Photoshop', 'Management', 'Bootstrap',
|
||||
'PHP', 'Sketch', 'MySQL', 'Mongo', 'Node.js', 'TypeScript'];
|
||||
|
||||
const generateUser = () => ({
|
||||
id: uid(),
|
||||
name: `${faker.name.firstName()} ${faker.name.lastName()}`,
|
||||
title: faker.name.jobType(),
|
||||
avatarUrl: randomAvatar(),
|
||||
status: randomArray(['success', 'warning', 'danger']),
|
||||
skills: _.uniq(_.times(_.random(2, 5), () => randomArray(allSkills))),
|
||||
interviewProgress: _.random(40, 90),
|
||||
portfolio: (Math.round(Math.random())) ? {
|
||||
url: 'http://webkom.co',
|
||||
title: 'www.webkom.co'
|
||||
} : null
|
||||
});
|
||||
|
||||
const getTableClass = (isDraggedOver) =>
|
||||
classNames(classes['table'], {
|
||||
[classes['table--drag-over']]: isDraggedOver
|
||||
});
|
||||
|
||||
const getRowClass = (isDragging) =>
|
||||
classNames(classes['row'], {
|
||||
[classes['row--dragging']]: isDragging
|
||||
});
|
||||
|
||||
// Custom Table Cell - keeps cell width when the row
|
||||
// is detached from the table
|
||||
// ========================================================
|
||||
class TableCell extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
isDragOccurring: PropTypes.bool
|
||||
};
|
||||
|
||||
ref = React.createRef();
|
||||
|
||||
getSnapshotBeforeUpdate(prevProps) {
|
||||
if (!this.ref) {
|
||||
return null;
|
||||
}
|
||||
const ref = this.ref.current;
|
||||
|
||||
const isDragStarting =
|
||||
this.props.isDragOccurring && !prevProps.isDragOccurring;
|
||||
|
||||
if (!isDragStarting) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { width, height } = ref.getBoundingClientRect();
|
||||
|
||||
const snapshot = { width, height };
|
||||
|
||||
return snapshot;
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState, snapshot) {
|
||||
if (!this.ref) {
|
||||
return;
|
||||
}
|
||||
const ref = this.ref.current;
|
||||
|
||||
if (snapshot) {
|
||||
if (ref.style.width === snapshot.width) {
|
||||
return;
|
||||
}
|
||||
ref.style.width = `${snapshot.width}px`;
|
||||
ref.style.height = `${snapshot.height}px`;
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.props.isDragOccurring) {
|
||||
return;
|
||||
}
|
||||
|
||||
// inline styles not applied
|
||||
if (ref.style.width == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
// no snapshot and drag is finished - clear the inline styles
|
||||
ref.style.removeProperty('height');
|
||||
ref.style.removeProperty('width');
|
||||
}
|
||||
|
||||
render() {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const { children, isDragOccurring, ...otherProps } = this.props;
|
||||
return <td ref={this.ref} {...otherProps}>{children}</td>;
|
||||
}
|
||||
}
|
||||
|
||||
// Draggable Table Row
|
||||
// ========================================================
|
||||
const DraggableRow = (props) => (
|
||||
<Draggable
|
||||
draggableId={props.id}
|
||||
index={props.index}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<tr
|
||||
ref={ provided.innerRef }
|
||||
{ ...provided.draggableProps }
|
||||
className={getRowClass(snapshot.isDragging)}
|
||||
>
|
||||
<TableCell
|
||||
className="align-middle"
|
||||
isDragOccurring={snapshot.isDragging}
|
||||
{ ...provided.dragHandleProps }
|
||||
>
|
||||
<i className="fa fa-fw fa-arrows-v fa-lg d-block mx-auto text-muted" />
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="align-middle"
|
||||
isDragOccurring={snapshot.isDragging}
|
||||
>
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
className="d-block"
|
||||
src={ props.avatarUrl }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color={ props.status }
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="align-middle"
|
||||
isDragOccurring={snapshot.isDragging}
|
||||
>
|
||||
<span className="mt-0 h6 mb-1">
|
||||
{ props.name }
|
||||
</span>
|
||||
<p className="mb-0 text-muted text-truncate">
|
||||
{ props.title }
|
||||
</p>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="align-middle"
|
||||
isDragOccurring={snapshot.isDragging}
|
||||
>
|
||||
{_.map(props.skills, (skill, index) => (
|
||||
<Badge
|
||||
key={ index }
|
||||
className={`px-2 ${index > 0 && 'ml-1'}`}
|
||||
>
|
||||
{ skill }
|
||||
</Badge>
|
||||
))}
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="align-middle"
|
||||
isDragOccurring={snapshot.isDragging}
|
||||
>
|
||||
<Progress value={props.interviewProgress} slim />
|
||||
<span className="fw-500">{ props.interviewProgress }%</span>
|
||||
</TableCell>
|
||||
<TableCell
|
||||
className="text-right align-middle"
|
||||
isDragOccurring={snapshot.isDragging}
|
||||
>
|
||||
{
|
||||
!_.isEmpty(props.portfolio) ? (
|
||||
<a href={props.portfolio.url}>
|
||||
{ props.portfolio.title }
|
||||
</a>
|
||||
) : (
|
||||
<span>-</span>
|
||||
)
|
||||
}
|
||||
</TableCell>
|
||||
</tr>
|
||||
)}
|
||||
</Draggable>
|
||||
);
|
||||
DraggableRow.propTypes = {
|
||||
avatarUrl: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
status: PropTypes.string.isRequired,
|
||||
skills: PropTypes.array.isRequired,
|
||||
interviewProgress: PropTypes.number.isRequired,
|
||||
portfolio: PropTypes.object,
|
||||
index: PropTypes.number.isRequired
|
||||
}
|
||||
|
||||
// Demo Component
|
||||
// ========================================================
|
||||
const initialState = _.times(5, generateUser);
|
||||
|
||||
export class DraggableTable extends React.Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string,
|
||||
}
|
||||
|
||||
state = {
|
||||
users: initialState
|
||||
}
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.onDragEnd = this.onDragEnd.bind(this);
|
||||
}
|
||||
|
||||
onDragEnd({ source, destination }) {
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
const users = reorder(this.state.users,
|
||||
source.index, destination.index);
|
||||
this.setState({ users });
|
||||
}
|
||||
|
||||
recoverInitialState() {
|
||||
this.setState({
|
||||
users: initialState
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Card className={ this.props.className }>
|
||||
<CardHeader className="bg-none bb-0">
|
||||
<CardTitle className="h6">
|
||||
Queue of Candidates
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<DragDropContext onDragEnd={this.onDragEnd}>
|
||||
<Table className="mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="bt-0"></th>
|
||||
<th className="bt-0">Photo</th>
|
||||
<th className="bt-0">Name</th>
|
||||
<th className="bt-0">Skills</th>
|
||||
<th className="bt-0">Interview Passed in</th>
|
||||
<th className="bt-0 text-right">Portfolio</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<Droppable droppableId="table">
|
||||
{(provided, snapshot) => (
|
||||
<tbody
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
className={getTableClass(snapshot.isDraggingOver)}
|
||||
>
|
||||
{_.map(this.state.users, (user, index) => (
|
||||
<DraggableRow
|
||||
key={user.id}
|
||||
index={index}
|
||||
{ ...user }
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
)}
|
||||
</Droppable>
|
||||
</Table>
|
||||
</DragDropContext>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
}
|
||||
178
app/routes/Interface/DragAndDropElements/components/HorizontalLists.js
Executable file
178
app/routes/Interface/DragAndDropElements/components/HorizontalLists.js
Executable file
@@ -0,0 +1,178 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import _ from 'lodash';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
DragDropContext,
|
||||
Droppable,
|
||||
Draggable
|
||||
} from 'react-beautiful-dnd';
|
||||
import uid from 'uuid/v4';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Avatar,
|
||||
AvatarAddOn
|
||||
} from './../../../../components';
|
||||
import { randomAvatar, randomArray } from './../../../../utilities';
|
||||
import { reorder, move } from './utilities';
|
||||
import classes from './common.scss';
|
||||
|
||||
const generateItem = () => ({
|
||||
id: uid(),
|
||||
avatarUrl: randomAvatar(),
|
||||
status: randomArray(['success', 'warning', 'danger'])
|
||||
});
|
||||
|
||||
const getListClass = (isDraggedOver) =>
|
||||
classNames(classes['list'], {
|
||||
[classes['list--drag-over']]: isDraggedOver
|
||||
});
|
||||
|
||||
const RowList = (props) => (
|
||||
<Card className={props.className}>
|
||||
<CardHeader className="bg-none">
|
||||
<CardTitle className="h6 mb-0">
|
||||
{ props.title }
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<Droppable
|
||||
droppableId={ props.listId }
|
||||
direction="horizontal"
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
className={`card-body d-flex ${getListClass(snapshot.isDraggingOver)}`}
|
||||
style={{ overflowX: 'auto' }}
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
>
|
||||
{_.map(props.items, (item, index) => (
|
||||
<Draggable
|
||||
key={item.id}
|
||||
draggableId={item.id}
|
||||
index={index}
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
className="px-3"
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
>
|
||||
<Avatar.Image
|
||||
key={`avatar-${item.id}`}
|
||||
size="lg"
|
||||
className="d-block"
|
||||
src={ item.avatarUrl }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color={ item.status }
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{ provided.placeholder }
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</Card>
|
||||
)
|
||||
RowList.propTypes = {
|
||||
listId: PropTypes.string.isRequired,
|
||||
items: PropTypes.array.isRequired,
|
||||
title: PropTypes.string.isRequired,
|
||||
className: PropTypes.stirng
|
||||
}
|
||||
const initialState = {
|
||||
listAItems: _.times(_.random(3, 8), generateItem),
|
||||
listBItems: _.times(_.random(3, 8), generateItem),
|
||||
listCItems: _.times(_.random(3, 8), generateItem)
|
||||
};
|
||||
export class HorizontalLists extends React.Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string
|
||||
}
|
||||
|
||||
state = _.clone(initialState);
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.onDragEnd = this.onDragEnd.bind(this);
|
||||
}
|
||||
|
||||
onDragEnd(result) {
|
||||
const { source, destination } = result;
|
||||
|
||||
// dropped outside the list
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle List Items
|
||||
if (source.droppableId === destination.droppableId) {
|
||||
const items = reorder(
|
||||
this.state[`${source.droppableId}Items`],
|
||||
source.index,
|
||||
destination.index
|
||||
);
|
||||
|
||||
this.setState({
|
||||
[`${source.droppableId}Items`]: items
|
||||
});
|
||||
} else {
|
||||
const result = move(
|
||||
this.state[`${source.droppableId}Items`],
|
||||
this.state[`${destination.droppableId}Items`],
|
||||
source,
|
||||
destination
|
||||
);
|
||||
|
||||
this.setState(_.mapKeys(result, (val, key) => `${key}Items`));
|
||||
}
|
||||
}
|
||||
|
||||
recoverInitialState() {
|
||||
this.setState(initialState);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
|
||||
return (
|
||||
<div className={ className }>
|
||||
<DragDropContext onDragEnd={this.onDragEnd}>
|
||||
<RowList
|
||||
listId="listA"
|
||||
items={ this.state.listAItems }
|
||||
title="All Candidates"
|
||||
/>
|
||||
<RowList
|
||||
listId="listB"
|
||||
items={ this.state.listBItems }
|
||||
title="Candidates Interview"
|
||||
className="mt-4"
|
||||
/>
|
||||
<RowList
|
||||
listId="listC"
|
||||
items={ this.state.listCItems }
|
||||
title="Candidates Testing"
|
||||
className="mt-4"
|
||||
/>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
267
app/routes/Interface/DragAndDropElements/components/MultipleVerticalLists.js
Executable file
267
app/routes/Interface/DragAndDropElements/components/MultipleVerticalLists.js
Executable file
@@ -0,0 +1,267 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import _ from 'lodash';
|
||||
import {
|
||||
DragDropContext,
|
||||
Droppable,
|
||||
Draggable
|
||||
} from 'react-beautiful-dnd';
|
||||
import uid from 'uuid/v4';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import classNames from 'classnames';
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
Media,
|
||||
Avatar,
|
||||
AvatarAddOn
|
||||
} from './../../../../components';
|
||||
import { randomAvatar, randomArray } from './../../../../utilities';
|
||||
import { reorder, move } from './utilities';
|
||||
import classes from './common.scss';
|
||||
|
||||
// Utility Functions
|
||||
//=========================================================
|
||||
const generateItem = () => ({
|
||||
id: uid(),
|
||||
type: 'single',
|
||||
name: `${faker.name.firstName()} ${faker.name.lastName()}`,
|
||||
title: faker.name.jobType(),
|
||||
avatarUrl: randomAvatar(),
|
||||
status: randomArray(['success', 'warning', 'danger'])
|
||||
});
|
||||
|
||||
const getListClass = (isDraggedOver) =>
|
||||
classNames(classes['list'], {
|
||||
[classes['list--drag-over']]: isDraggedOver
|
||||
});
|
||||
|
||||
const getItemClass = (isDragging) =>
|
||||
classNames(classes['list-group-item'], {
|
||||
[classes['list-group-item--dragging']]: isDragging
|
||||
});
|
||||
|
||||
// Draggable List Component
|
||||
//=========================================================
|
||||
const VerticalList = React.memo((props) => {
|
||||
return (
|
||||
<Droppable droppableId={ props.listId }>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
className={`list-group list-group-flush flex-grow-1 ${getListClass(snapshot.isDraggingOver)}`}
|
||||
>
|
||||
{props.items.map((item, index) => (
|
||||
<Draggable
|
||||
key={item.id}
|
||||
draggableId={item.id}
|
||||
index={index}>
|
||||
{(provided, draggableSnapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
className={`list-group-item ${getItemClass(draggableSnapshot.isDragging)}`}
|
||||
>
|
||||
<Media>
|
||||
<Media left className="align-self-center pr-3">
|
||||
<i className="fa fa-ellipsis-v text-muted" />
|
||||
</Media>
|
||||
<Media left middle className="mr-4 align-self-center">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
className="d-block"
|
||||
src={ item.avatarUrl }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color={ item.status }
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<span className="mt-0 h6 mb-1">
|
||||
{ item.name }
|
||||
</span>
|
||||
<p className="mb-0 text-muted text-truncate">
|
||||
{ item.title }
|
||||
</p>
|
||||
</Media>
|
||||
</Media>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
);
|
||||
});
|
||||
VerticalList.propTypes = {
|
||||
items: PropTypes.array,
|
||||
listId: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
}
|
||||
|
||||
// Draggable Column Component
|
||||
//=========================================================
|
||||
class Column extends React.Component {
|
||||
static propTypes = {
|
||||
children: PropTypes.node,
|
||||
id: PropTypes.string,
|
||||
index: PropTypes.number,
|
||||
title: PropTypes.string
|
||||
}
|
||||
|
||||
render() {
|
||||
const { children, id, index, title } = this.props;
|
||||
|
||||
return (
|
||||
<Draggable
|
||||
draggableId={id}
|
||||
index={index}
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
className="col-md-4"
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
>
|
||||
<Card className="h-100">
|
||||
<CardHeader {...provided.dragHandleProps} className="b-0 bg-none">
|
||||
<CardTitle className="h6 mb-0">
|
||||
<i className="fa fa-ellipsis-v mr-3 text-muted" />
|
||||
{ title }
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
{ children }
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Demo Component
|
||||
//=========================================================
|
||||
const initialState = {
|
||||
listAItems: _.times(_.random(2, 4), generateItem),
|
||||
listBItems: _.times(_.random(3, 8), generateItem),
|
||||
listCItems: _.times(_.random(3, 8), generateItem),
|
||||
lists: [
|
||||
{ id: 'listA', title: 'All Candidates' },
|
||||
{ id: 'listB', title: 'Candidates Interview' },
|
||||
{ id: 'listC', title: 'Candidates Testing' }
|
||||
]
|
||||
};
|
||||
export class MultipleVerticalLists extends React.Component {
|
||||
static propTypes = {
|
||||
className: PropTypes.string
|
||||
}
|
||||
|
||||
state = _.clone(initialState);
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
|
||||
this.onDragEnd = this.onDragEnd.bind(this);
|
||||
}
|
||||
|
||||
onDragEnd(result) {
|
||||
const { source, destination } = result;
|
||||
|
||||
// Swap column positions
|
||||
if (source.droppableId === 'board') {
|
||||
if (destination.droppableId !== 'board') {
|
||||
return;
|
||||
}
|
||||
const lists = reorder(
|
||||
this.state.lists,
|
||||
source.index,
|
||||
destination.index
|
||||
);
|
||||
|
||||
this.setState({ lists });
|
||||
return;
|
||||
}
|
||||
|
||||
// dropped outside the list
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle List Items
|
||||
if (source.droppableId === destination.droppableId) {
|
||||
const items = reorder(
|
||||
this.state[`${source.droppableId}Items`],
|
||||
source.index,
|
||||
destination.index
|
||||
);
|
||||
|
||||
this.setState({
|
||||
[`${source.droppableId}Items`]: items
|
||||
});
|
||||
} else {
|
||||
const result = move(
|
||||
this.state[`${source.droppableId}Items`],
|
||||
this.state[`${destination.droppableId}Items`],
|
||||
source,
|
||||
destination
|
||||
);
|
||||
|
||||
this.setState(_.mapKeys(result, (val, key) => `${key}Items`));
|
||||
}
|
||||
}
|
||||
|
||||
recoverInitialState() {
|
||||
this.setState(initialState);
|
||||
}
|
||||
|
||||
render() {
|
||||
const { className } = this.props;
|
||||
const { lists } = this.state;
|
||||
|
||||
return (
|
||||
<div className={ className }>
|
||||
<DragDropContext onDragEnd={this.onDragEnd}>
|
||||
<Droppable
|
||||
droppableId="board"
|
||||
type="COLUMN"
|
||||
direction="horizontal"
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
className="row"
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
>
|
||||
{_.map(lists, (list, index) => (
|
||||
<Column
|
||||
id={list.id}
|
||||
index={ index }
|
||||
title={list.title}
|
||||
key={ list.id }
|
||||
>
|
||||
<VerticalList
|
||||
listId={list.id}
|
||||
items={this.state[`${list.id}Items`]}
|
||||
/>
|
||||
</Column>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
43
app/routes/Interface/DragAndDropElements/components/common.scss
Executable file
43
app/routes/Interface/DragAndDropElements/components/common.scss
Executable file
@@ -0,0 +1,43 @@
|
||||
@import "./../../../../styles/variables.scss";
|
||||
|
||||
.list {
|
||||
transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
|
||||
&--drag-over {
|
||||
background-color: lighten($primary, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
border-left: 1px solid transparent !important;
|
||||
border-right: 1px solid transparent !important;
|
||||
transition: border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
|
||||
&:first-child {
|
||||
border-top: 1px solid transparent !important;
|
||||
}
|
||||
|
||||
&--dragging {
|
||||
&:first-child {
|
||||
border-top-color: $primary !important;
|
||||
}
|
||||
border-color: $primary !important;
|
||||
}
|
||||
}
|
||||
|
||||
.table {
|
||||
transition: background-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
|
||||
&--drag-over {
|
||||
background-color: lighten($primary, 45%);
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
transition: border-color 200ms cubic-bezier(0.645, 0.045, 0.355, 1.000);
|
||||
background: $white;
|
||||
|
||||
&--dragging {
|
||||
border: 1px solid $primary !important;
|
||||
}
|
||||
}
|
||||
3
app/routes/Interface/DragAndDropElements/components/index.js
Executable file
3
app/routes/Interface/DragAndDropElements/components/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
export * from './MultipleVerticalLists';
|
||||
export * from './DraggableTable';
|
||||
export * from './HorizontalLists';
|
||||
21
app/routes/Interface/DragAndDropElements/components/utilities.js
Executable file
21
app/routes/Interface/DragAndDropElements/components/utilities.js
Executable file
@@ -0,0 +1,21 @@
|
||||
export const reorder = (list, startIndex, endIndex) => {
|
||||
const result = Array.from(list);
|
||||
const [removed] = result.splice(startIndex, 1);
|
||||
result.splice(endIndex, 0, removed);
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export const move = (source, destination, droppableSource, droppableDestination) => {
|
||||
const sourceClone = Array.from(source);
|
||||
const destClone = Array.from(destination);
|
||||
const [removed] = sourceClone.splice(droppableSource.index, 1);
|
||||
|
||||
destClone.splice(droppableDestination.index, 0, removed);
|
||||
|
||||
const result = {};
|
||||
result[droppableSource.droppableId] = sourceClone;
|
||||
result[droppableDestination.droppableId] = destClone;
|
||||
|
||||
return result;
|
||||
};
|
||||
3
app/routes/Interface/DragAndDropElements/index.js
Executable file
3
app/routes/Interface/DragAndDropElements/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { DragAndDropElements } from './DragAndDropElements';
|
||||
|
||||
export default DragAndDropElements;
|
||||
968
app/routes/Interface/Dropdowns/Dropdowns.js
Executable file
968
app/routes/Interface/Dropdowns/Dropdowns.js
Executable file
@@ -0,0 +1,968 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
InputGroup,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
Badge,
|
||||
CustomInput,
|
||||
InputGroupAddon,
|
||||
UncontrolledButtonDropdown,
|
||||
ListGroupItem,
|
||||
ListGroup,
|
||||
ExtendedDropdown,
|
||||
Form,
|
||||
Button,
|
||||
FormGroup,
|
||||
Label,
|
||||
Input,
|
||||
ButtonDropdown,
|
||||
DropdownToggle,
|
||||
DropdownMenu,
|
||||
DropdownItem
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
import { Messages } from "../../components/Dropdowns/Messages";
|
||||
import { Activity } from "../../components/Dropdowns/Activity";
|
||||
|
||||
const Dropdowns = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Dropdowns"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Dropdown States"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Dropdown component states
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Default dropdown menu styling.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Active
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Make the link active with <code>active</code> class.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem active>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Disabled
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Disable the link with <code>disabled</code> class.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem disabled>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Dropdown Headers"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Dropdown header with options
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Default Header
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Basic <code>header</code> styling of label sections.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Header Left Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Display left/right positioned icons.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>
|
||||
<i className="fa fa-angle-down mr-2"></i>
|
||||
Menu
|
||||
</DropdownItem>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 2 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Header Right Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Basic <code>header</code> styling of label sections.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header className="d-flex">
|
||||
Menu
|
||||
<i className="fa fa-angle-down ml-auto"></i>
|
||||
</DropdownItem>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Header Left & Right Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Display left/right positioned icons
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header className="d-flex">
|
||||
<i className="fa fa-gear mr-2"></i>
|
||||
Menu
|
||||
<i className="fa fa-angle-down ml-auto"></i>
|
||||
</DropdownItem>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 2 */}
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Dropdown Options"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Icons, checkboxes, radios, switches etc.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Left Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Dropdown icons in left position.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-user mr-2"></i>
|
||||
Profile
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-gear mr-2"></i>
|
||||
Settings
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
<i className="fa fa-fw fa-sign-out mr-2"></i>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Right Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Dropdown icons in right position.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
Profile
|
||||
<i className="fa fa-fw fa-user align-self-center ml-auto"></i>
|
||||
</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
Settings
|
||||
<i className="fa fa-fw fa-gear align-self-center ml-auto"></i>
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem className="d-flex">
|
||||
Logout
|
||||
<i className="fa fa-fw fa-sign-out align-self-center ml-auto"></i>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Right Badge
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Dropdown menu items with <code>Badge</code>.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
Profile
|
||||
<Badge color="primary" className="align-self-center ml-auto">
|
||||
Done
|
||||
</Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
Settings
|
||||
<Badge color="danger" className="align-self-center ml-auto">
|
||||
Error
|
||||
</Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem className="d-flex">
|
||||
Logout
|
||||
<Badge color="success" className="align-self-center ml-auto">
|
||||
Safe
|
||||
</Badge>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Right Pills
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Dropdown menu items with <code>Badge pill</code>.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
Profile
|
||||
<Badge pill color="primary" className="align-self-center ml-auto">
|
||||
5
|
||||
</Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
Settings
|
||||
<Badge pill color="danger" className="align-self-center ml-auto">
|
||||
12
|
||||
</Badge>
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem className="d-flex">
|
||||
Logout
|
||||
<Badge pill color="success" className="align-self-center ml-auto">
|
||||
34
|
||||
</Badge>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Left Badge
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Dropdown menu items with <code>Badge pill</code>.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem>
|
||||
<Badge color="primary" className="mr-2">
|
||||
Update
|
||||
</Badge>
|
||||
Profile
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<Badge color="success" className="mr-2">
|
||||
Ready
|
||||
</Badge>
|
||||
Settings
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
<Badge color="secondary" className="mr-2">
|
||||
Added
|
||||
</Badge>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 2 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Left Pills
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Dropdown menu items with <code>Badge pill</code>.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem>
|
||||
<Badge pill color="secondary" className="mr-2">
|
||||
32
|
||||
</Badge>
|
||||
Profile
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<Badge pill color="secondary" className="mr-2">
|
||||
86
|
||||
</Badge>
|
||||
Settings
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
<Badge pill color="secondary" className="mr-2">
|
||||
11
|
||||
</Badge>
|
||||
Logout
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Right & Left Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Basic <code>header</code> styling of label sections.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
<i className="fa fa-fw fa-angle-right align-self-center mr-2"></i>
|
||||
Profile
|
||||
<i className="fa fa-fw fa-user align-self-center ml-auto"></i>
|
||||
</DropdownItem>
|
||||
<DropdownItem className="d-flex">
|
||||
<i className="fa fa-fw fa-angle-right align-self-center mr-2"></i>
|
||||
Settings
|
||||
<i className="fa fa-fw fa-gear align-self-center ml-auto"></i>
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem className="d-flex">
|
||||
<i className="fa fa-fw fa-angle-right align-self-center mr-2"></i>
|
||||
Logout
|
||||
<i className="fa fa-fw fa-sign-out align-self-center ml-auto"></i>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Left Radios
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.08
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Left positioned <code>radio</code>.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>
|
||||
Select Style
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<CustomInput
|
||||
type="radio"
|
||||
id="DropdownLeftRadios1"
|
||||
name="DropdownLeftRadios"
|
||||
label="Minimal"
|
||||
defaultChecked
|
||||
/>
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<CustomInput
|
||||
type="radio"
|
||||
id="DropdownLeftRadios2"
|
||||
name="DropdownLeftRadios"
|
||||
label="Compact"
|
||||
/>
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
<CustomInput
|
||||
type="radio"
|
||||
id="DropdownLeftRadios3"
|
||||
name="DropdownLeftRadios"
|
||||
label="Custom..."
|
||||
/>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Left Checkboxes
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.09
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Left positioned <code>checkbox</code>.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>
|
||||
Select Javascript
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<CustomInput
|
||||
type="checkbox"
|
||||
id="DropdownLeftCheckbox1"
|
||||
label="ReactJS"
|
||||
defaultChecked
|
||||
/>
|
||||
</DropdownItem>
|
||||
<DropdownItem>
|
||||
<CustomInput
|
||||
type="checkbox"
|
||||
id="DropdownLeftCheckbox2"
|
||||
label="Angular"
|
||||
/>
|
||||
</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>
|
||||
<CustomInput
|
||||
type="checkbox"
|
||||
id="DropdownLeftCheckbox3"
|
||||
label="Other..."
|
||||
/>
|
||||
</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Forms
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.10
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
with Buttons, Inputs and Checkbox.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown>
|
||||
<DropdownToggle caret color="secondary" outline>
|
||||
Dropdown
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist className="p-4">
|
||||
<Form>
|
||||
<FormGroup>
|
||||
<Label for="emailAdress">Email Adress</Label>
|
||||
<Input type="email" name="email" id="emailAdress" placeholder="email@example.com" />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Label for="password">Password</Label>
|
||||
<Input type="password" name="password" id="password" placeholder="Password..." />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<CustomInput type="checkbox" id="RememberMe" label="Remember Me" />
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<Button color="primary">Sign In</Button>{' '}
|
||||
</FormGroup>
|
||||
</Form>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 2 */}
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Dropdown Directions"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Positions are available for: <code><Dropdown direction="left" /></code>,
|
||||
<code><Dropdown direction="right" /></code> and <code><Dropdown direction="up" /></code>.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Dropup
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Trigger dropdown menus above elements by adding
|
||||
<code><Dropdown direction="up" /></code>
|
||||
to the parent element.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown direction="up">
|
||||
<DropdownToggle color="secondary" outline caret>
|
||||
See Demo
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Dropleft
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Trigger dropdown menus above elements by adding
|
||||
<code><Dropdown direction="left" /></code>
|
||||
to the parent element.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown direction="left">
|
||||
<DropdownToggle color="secondary" outline caret>
|
||||
See Demo
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: Dropright
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>
|
||||
Trigger dropdown menus above elements by adding
|
||||
<code><Dropdown direction="right" /></code>
|
||||
to the parent element.
|
||||
</p>
|
||||
<UncontrolledButtonDropdown direction="right">
|
||||
<DropdownToggle color="secondary" outline caret>
|
||||
See Demo
|
||||
</DropdownToggle>
|
||||
<DropdownMenu persist>
|
||||
<DropdownItem header>Menu</DropdownItem>
|
||||
<DropdownItem>Profile</DropdownItem>
|
||||
<DropdownItem>Settings</DropdownItem>
|
||||
<DropdownItem divider />
|
||||
<DropdownItem>Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
|
||||
{ /* START Header 5 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={5}
|
||||
title="Dropdown Custom"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Dropdown as combo with Lists, Buttons, Input and Media...
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 5 */}
|
||||
{ /* START Section 5 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: List Group (as Links)
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>Mainly used components together with "Navbar".</p>
|
||||
<UncontrolledButtonDropdown direction="up">
|
||||
<DropdownToggle color="secondary" outline caret>
|
||||
See Demo
|
||||
</DropdownToggle>
|
||||
<ExtendedDropdown>
|
||||
<ExtendedDropdown.Section className="d-flex justify-content-between align-items-center">
|
||||
<h6 className="mb-0">Activity Feed</h6>
|
||||
<Badge pill>4</Badge>
|
||||
</ExtendedDropdown.Section>
|
||||
<ExtendedDropdown.Section list>
|
||||
<ListGroup>
|
||||
<ListGroupItem tag={ Link } to="/widgets" action>
|
||||
<Activity
|
||||
iconColorBelow="success"
|
||||
icon="check"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag={ Link } to="/widgets" action>
|
||||
<Activity
|
||||
iconColorBelow="danger"
|
||||
icon="close"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag={ Link } to="/widgets" action>
|
||||
<Activity
|
||||
iconColorBelow="warning"
|
||||
icon="exclamation"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag={ Link } to="/widgets" action>
|
||||
<Activity
|
||||
iconColorBelow="primary"
|
||||
icon="info"
|
||||
/>
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</ExtendedDropdown.Section>
|
||||
<ExtendedDropdown.Section className="text-center">
|
||||
<Link to="/widgets">
|
||||
See All Notifications
|
||||
<i className="fa fa-angle-right fa-fw ml-2" />
|
||||
</Link>
|
||||
</ExtendedDropdown.Section>
|
||||
</ExtendedDropdown>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Dropdown: List Group (as Buttons)
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p>Mainly used components together with "Navbar".</p>
|
||||
<UncontrolledButtonDropdown direction="up">
|
||||
<DropdownToggle color="secondary" outline caret>
|
||||
See Demo
|
||||
</DropdownToggle>
|
||||
<ExtendedDropdown>
|
||||
<ExtendedDropdown.Section className="d-flex justify-content-between align-items-center">
|
||||
<h6 className="mb-0">Messages</h6>
|
||||
<Link to="/apps/inbox">
|
||||
<i className="fa fa-pencil"></i>
|
||||
</Link>
|
||||
</ExtendedDropdown.Section>
|
||||
<ExtendedDropdown.Section>
|
||||
<InputGroup>
|
||||
<Input placeholder="Search Messages..." />
|
||||
<InputGroupAddon addonType="append">
|
||||
<Button>
|
||||
<i className="fa fa-search" />
|
||||
</Button>
|
||||
</InputGroupAddon>
|
||||
</InputGroup>
|
||||
</ExtendedDropdown.Section>
|
||||
<ExtendedDropdown.Section list>
|
||||
<ListGroup flush>
|
||||
<ListGroupItem tag="button" action>
|
||||
<Messages />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag="button" action>
|
||||
<Messages />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag="button" action>
|
||||
<Messages />
|
||||
</ListGroupItem>
|
||||
<ListGroupItem tag="button" action>
|
||||
<Messages />
|
||||
</ListGroupItem>
|
||||
</ListGroup>
|
||||
</ExtendedDropdown.Section>
|
||||
<ExtendedDropdown.Section className="text-center">
|
||||
<Link to="/apps/inbox">
|
||||
See All Messages
|
||||
<i className="fa fa-angle-right fa-fw ml-2" />
|
||||
</Link>
|
||||
</ExtendedDropdown.Section>
|
||||
</ExtendedDropdown>
|
||||
</UncontrolledButtonDropdown>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
</Row>
|
||||
{ /* END Section 5 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Dropdowns;
|
||||
3
app/routes/Interface/Dropdowns/index.js
Executable file
3
app/routes/Interface/Dropdowns/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Dropdowns from './Dropdowns';
|
||||
|
||||
export default Dropdowns;
|
||||
878
app/routes/Interface/Images/Images.js
Executable file
878
app/routes/Interface/Images/Images.js
Executable file
@@ -0,0 +1,878 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Avatar,
|
||||
AvatarAddOn,
|
||||
Media,
|
||||
Row,
|
||||
Button,
|
||||
Col,
|
||||
Card,
|
||||
CustomInput,
|
||||
CardImg,
|
||||
CardImgOverlay,
|
||||
CardBody,
|
||||
CardText,
|
||||
CardTitle,
|
||||
CardFooter,
|
||||
HolderProvider
|
||||
} from './../../../components';
|
||||
import { randomAvatar } from './../../../utilities';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const Images = () => (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Images"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Images"
|
||||
subTitle="Documentation and examples for opting images into responsive behavior."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<h6 className="">
|
||||
Images: Responsive Images
|
||||
<small className="text-muted">#1.01</small>
|
||||
</h6>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
className="mb-3"
|
||||
>
|
||||
<CardImg className="img-fluid mb-5" />
|
||||
</HolderProvider.Icon>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 12 } className="mb-5">
|
||||
<h6 className="mb-2">
|
||||
Images: Thumbnails
|
||||
<small className="text-muted">#1.02</small>
|
||||
</h6>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={200}
|
||||
height={200}
|
||||
>
|
||||
<CardImg
|
||||
className="img-thumbnail mr-2"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={200}
|
||||
height={200}
|
||||
>
|
||||
<CardImg
|
||||
className="img-thumbnail mr-2"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={200}
|
||||
height={200}
|
||||
>
|
||||
<CardImg
|
||||
className="img-thumbnail mr-2"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={200}
|
||||
height={200}
|
||||
>
|
||||
<CardImg
|
||||
className="img-thumbnail"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<h6 className="mb-2">
|
||||
Images: Aligning
|
||||
<small className="text-muted">#1.03</small>
|
||||
</h6>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={200}
|
||||
height={200}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded float-left"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={200}
|
||||
height={200}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded float-right"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
</Col>
|
||||
<Col lg={ 12 } className="mb-5">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={200}
|
||||
height={200}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded mx-auto d-block"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 12 } className="mb-5">
|
||||
<h6 className="mb-2">
|
||||
Images: Figures
|
||||
<small className="text-muted">#1.04</small>
|
||||
</h6>
|
||||
<figure className="figure mr-2">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={400}
|
||||
height={400}
|
||||
>
|
||||
<CardImg
|
||||
className="figure-img img-fluid rounded"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption">
|
||||
A caption for the above image.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure className="figure">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={400}
|
||||
height={400}
|
||||
>
|
||||
<CardImg
|
||||
className="figure-img img-fluid rounded"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption text-right">
|
||||
A caption for the above image.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
<Col lg={ 12 } className="mb-5">
|
||||
<h6 className="mb-2">
|
||||
Images: Styles
|
||||
<small className="text-muted">#1.05</small>
|
||||
</h6>
|
||||
<figure className="figure mr-2">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={125}
|
||||
height={125}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption">
|
||||
<code>.rounded</code>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure className="figure mr-2">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={125}
|
||||
height={125}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded-top"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption">
|
||||
<code>.rounded-top</code>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure className="figure mr-2">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={125}
|
||||
height={125}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded-right"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption">
|
||||
<code>.rounded-right</code>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure className="figure mr-2">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={125}
|
||||
height={125}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded-bottom"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption">
|
||||
<code>.rounded-bottom</code>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure className="figure mr-2">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={125}
|
||||
height={125}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded-left"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption">
|
||||
<code>.rounded-left</code>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure className="figure mr-2">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
width={125}
|
||||
height={125}
|
||||
>
|
||||
<CardImg
|
||||
className="rounded-circle"
|
||||
/>
|
||||
</HolderProvider.Icon>
|
||||
<figcaption className="figure-caption">
|
||||
<code>.rounded-circle</code>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Images: Title Options"
|
||||
className="mt-5"
|
||||
subTitle="Documentation and examples for opting images into responsive behavior."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">Default Title</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#2.01</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="d-flex h6 mb-0">
|
||||
<span className="">Icon Right Title</span>
|
||||
<i className="fa fa-info-circle ml-auto"></i>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2">#2.03</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
<a href="#">
|
||||
Link Title
|
||||
</a>
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#2.02</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
<i className="fa fa-play-circle mr-2"></i>
|
||||
Icon Left Title
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#2.03</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Images: Heading Options"
|
||||
className="mt-5"
|
||||
subTitle="Documentation and examples for opting images into responsive behavior."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="d-flex h6 mb-0">
|
||||
Default Title
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#3.01</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="d-flex h6 mb-0">
|
||||
Icon Right Title
|
||||
<i className="fa fa-info-circle ml-auto"></i>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#3.04</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="d-flex h6 mb-0">
|
||||
<a href="#">Link Title</a>
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#3.02</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="d-flex h6 mb-0">
|
||||
<CustomInput type="checkbox" id="checkboxLeftTitle" label="Checkbox Left Title" />
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#3.03</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="d-flex h6 mb-0">
|
||||
<i className="fa fa-play-circle mr-2"></i>
|
||||
Icon Left Title
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#3.05</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle className="d-flex h6 mb-0">
|
||||
<span>Checkbox Right Title</span>
|
||||
<CustomInput type="checkbox" id="checkboxRightTitle" label="" className="ml-auto mb-0" />
|
||||
</CardTitle>
|
||||
</CardBody>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#3.06</span>
|
||||
{ faker.lorem.sentences() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Images: Footer Options"
|
||||
className="mt-5"
|
||||
subTitle="Documentation and examples for opting images into responsive behavior."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
{ faker.lorem.sentence() }
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#4.01</span>
|
||||
{ faker.lorem.paragraph() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
<CardFooter className="d-flex">
|
||||
<div className="mr-auto">
|
||||
<span className="mr-3">
|
||||
<i className="fa-heart fa mr-1"></i> 9
|
||||
</span>
|
||||
<span className="mr-3">
|
||||
<i className="fa-comment fa mr-1"></i> 37
|
||||
</span>
|
||||
</div>
|
||||
<span>4 Minutes Ago</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
{ faker.lorem.sentence() }
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#4.04</span>
|
||||
{ faker.lorem.paragraph() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
<CardFooter className="d-flex">
|
||||
<a href="#">
|
||||
Read More
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</a>
|
||||
<div className="align-self-center ml-auto">
|
||||
<i className="fa-star-o fa"></i>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
{ faker.lorem.sentence() }
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#4.02</span>
|
||||
{ faker.lorem.paragraph() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
<CardFooter className="d-flex">
|
||||
<div className="mr-auto">
|
||||
<i className="fa-heart-o fa mr-1"></i> 9
|
||||
</div>
|
||||
<div>
|
||||
<i className="fa-eye fa mr-1"></i> 87
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
{ faker.lorem.sentence() }
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#4.05</span>
|
||||
{ faker.lorem.paragraph() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
<CardFooter className="d-flex">
|
||||
<Media>
|
||||
<Media left middle className="mr-3">
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="danger"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</Media>
|
||||
<Media body>
|
||||
<span className="mt-0 d-flex h6 mb-0">
|
||||
{ faker.name.firstName() } { faker.name.lastName() }
|
||||
</span>
|
||||
<p className="mb-0">
|
||||
2 Days Ago
|
||||
</p>
|
||||
</Media>
|
||||
</Media>
|
||||
<div className="align-self-center ml-auto">
|
||||
<i className="fa-heart-o fa"></i>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
{ faker.lorem.sentence() }
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2 ">#4.03</span>
|
||||
{ faker.lorem.paragraph() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
<CardFooter className="d-flex">
|
||||
<Button color="primary mr-auto">
|
||||
Read More
|
||||
<i className="fa fa-angle-right ml-2"></i>
|
||||
</Button>{' '}
|
||||
<div className="align-self-center">
|
||||
16 Min. Ago
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg top />
|
||||
</HolderProvider.Icon>
|
||||
<CardBody>
|
||||
<CardTitle className="h6">
|
||||
{ faker.lorem.sentence() }
|
||||
</CardTitle>
|
||||
<CardText>
|
||||
<span className="text-muted mr-2">#4.06</span>
|
||||
{ faker.lorem.paragraph() }
|
||||
</CardText>
|
||||
</CardBody>
|
||||
<CardFooter className="d-flex">
|
||||
<div>
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
className="mr-2"
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="success"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
className="mr-2"
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="warning"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
<Avatar.Image
|
||||
size="md"
|
||||
src={ randomAvatar() }
|
||||
className="mr-2"
|
||||
addOns={[
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="white"
|
||||
key="avatar-icon-bg"
|
||||
/>,
|
||||
<AvatarAddOn.Icon
|
||||
className="fa fa-circle"
|
||||
color="secondary"
|
||||
key="avatar-icon-fg"
|
||||
/>
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="align-self-center ml-auto">
|
||||
<i className="fa-heart-o fa"></i>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
|
||||
{ /* START Header 5 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={5}
|
||||
title="Images: Image Overlays"
|
||||
className="mt-5"
|
||||
subTitle="Documentation and examples for opting images into responsive behavior."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 5 */}
|
||||
{ /* START Section 5 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg />
|
||||
</HolderProvider.Icon>
|
||||
<CardImgOverlay className="d-flex align-content-between flex-wrap">
|
||||
<span>
|
||||
<p className="card-text mt-0">
|
||||
<span className="badge badge-primary">
|
||||
Sport
|
||||
</span>
|
||||
</p>
|
||||
<h6 className="mb-2">
|
||||
<a href="#">
|
||||
<span>{ faker.commerce.productName() }</span>
|
||||
<span className="text-muted ml-2">
|
||||
#5.01
|
||||
</span>
|
||||
</a>
|
||||
</h6>
|
||||
<p className="card-text text-dark">
|
||||
{ faker.lorem.sentence() }
|
||||
</p>
|
||||
</span>
|
||||
<div className="d-flex">
|
||||
<div className="ml-auto">
|
||||
<span className="mr-3">
|
||||
<i className="fa-heart fa mr-1"></i> 34
|
||||
</span>
|
||||
<span className="mr-3">
|
||||
<i className="fa-comment fa mr-1"></i> 8
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
16 Minutes Ago
|
||||
</span>
|
||||
</div>
|
||||
</CardImgOverlay>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card>
|
||||
<HolderProvider.Icon
|
||||
iconChar=""
|
||||
size={ 32 }
|
||||
>
|
||||
<CardImg />
|
||||
</HolderProvider.Icon>
|
||||
<CardImgOverlay className="d-flex align-content-between flex-wrap" style={{ height: '240px' }}>
|
||||
<p className="card-text mt-0">
|
||||
<span className="badge badge-primary">
|
||||
Electronics
|
||||
</span>
|
||||
</p>
|
||||
<span>
|
||||
<h6 className="mb-2">
|
||||
<a href="#">
|
||||
<span>{ faker.commerce.productName() }</span>
|
||||
<span className="text-muted ml-2">
|
||||
#5.02
|
||||
</span>
|
||||
</a>
|
||||
</h6>
|
||||
<p className="card-text mb-3">
|
||||
{ faker.lorem.sentence() }
|
||||
</p>
|
||||
</span>
|
||||
</CardImgOverlay>
|
||||
<CardFooter className="d-flex">
|
||||
<div>
|
||||
<span className="mr-3">
|
||||
<i className="fa-heart fa mr-1"></i> 34
|
||||
</span>
|
||||
<span className="mr-3">
|
||||
<i className="fa-comment fa mr-1"></i> 8
|
||||
</span>
|
||||
</div>
|
||||
<span className="ml-auto">
|
||||
4 Minutes Ago
|
||||
</span>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 5 */}
|
||||
</Container>
|
||||
);
|
||||
|
||||
export { Images };
|
||||
3
app/routes/Interface/Images/index.js
Executable file
3
app/routes/Interface/Images/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { Images } from './Images';
|
||||
|
||||
export default Images;
|
||||
1658
app/routes/Interface/ListGroups/ListGroups.js
Executable file
1658
app/routes/Interface/ListGroups/ListGroups.js
Executable file
File diff suppressed because it is too large
Load Diff
3
app/routes/Interface/ListGroups/index.js
Executable file
3
app/routes/Interface/ListGroups/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import ListGroups from './ListGroups';
|
||||
|
||||
export default ListGroups;
|
||||
2198
app/routes/Interface/MediaObjects/MediaObjects.js
Executable file
2198
app/routes/Interface/MediaObjects/MediaObjects.js
Executable file
File diff suppressed because it is too large
Load Diff
3
app/routes/Interface/MediaObjects/index.js
Executable file
3
app/routes/Interface/MediaObjects/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import MediaObjects from './MediaObjects';
|
||||
|
||||
export default MediaObjects;
|
||||
784
app/routes/Interface/Modals/Modals.js
Executable file
784
app/routes/Interface/Modals/Modals.js
Executable file
@@ -0,0 +1,784 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
Button,
|
||||
UncontrolledModal,
|
||||
ModalHeader,
|
||||
CardBody,
|
||||
CardTitle,
|
||||
CardGroup,
|
||||
ModalBody,
|
||||
ModalFooter
|
||||
} from './../../../components'
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import {
|
||||
HeaderDemo
|
||||
} from "../../components/HeaderDemo";
|
||||
|
||||
export const Modals = () => (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Modals"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Modal Default"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Use modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault101" color="secondary" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault101">
|
||||
<ModalHeader tag="h6">
|
||||
Modal: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-primary">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="primary">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault102" color="secondary" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault102">
|
||||
<ModalHeader tag="h6">
|
||||
<i className="fa fa-envelope-o mr-2"></i> Modal: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-primary">
|
||||
<i className="fa fa-close mr-2"></i>
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="primary">
|
||||
<i className="fa fa-check mr-2"></i>
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
</Row>
|
||||
{ /* START Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Modal Sizes"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
There are three sizes of modals in the application.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<CardGroup>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Small Size
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault201" color="secondary" outline size="sm">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault201" size="sm">
|
||||
<ModalHeader tag="h6">
|
||||
Modal: Small Size
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-primary" size="sm">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="primary" size="sm">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Default Size
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault202" color="secondary" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault202">
|
||||
<ModalHeader tag="h6">
|
||||
Modal: Default Size
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-primary">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="primary">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Large Size
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault203" color="secondary" outline size="lg">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault203" size="lg">
|
||||
<ModalHeader tag="h5">
|
||||
Modal: Large Size
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-primary" size="lg">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="primary" size="lg">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</CardGroup>
|
||||
{ /* START Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Modal Colors"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
You can apply colors to make them easier
|
||||
to see for users. All colors work from the section
|
||||
<a href="/colors">Colors</a>.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
<span className="text-primary">
|
||||
Modal: Primary
|
||||
</span>
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault301" color="primary" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault301" className="modal-outline-primary">
|
||||
<ModalHeader tag="h6">
|
||||
Modal: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="primary">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault302" color="danger" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault302" className="modal-outline-danger">
|
||||
<ModalHeader tag="h6">
|
||||
<span className="text-danger">
|
||||
Modal: Danger
|
||||
</span>
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-danger">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="danger">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault303" color="info" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault303" className="modal-outline-info">
|
||||
<ModalHeader tag="h6">
|
||||
<span className="text-info">
|
||||
Modal: Info
|
||||
</span>
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-info">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="info">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault304" color="warning" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault304" className="modal-outline-warning">
|
||||
<ModalHeader tag="h6">
|
||||
<span className="text-warning">
|
||||
Modal: Warning
|
||||
</span>
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-warning">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="warning">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault305" color="success" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault305" className="modal-outline-success">
|
||||
<ModalHeader tag="h6">
|
||||
<span className="text-success">
|
||||
Modal: Success
|
||||
</span>
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-success">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="success">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault306" color="dark" outline>
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault306" className="modal-outline-dark">
|
||||
<ModalHeader tag="h6">
|
||||
<span className="text-dark">
|
||||
Modal: Dark
|
||||
</span>
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</ModalHeader>
|
||||
<ModalBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<UncontrolledModal.Close color="link" className="text-dark">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="dark">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
</ModalFooter>
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
</Row>
|
||||
{ /* START Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Modal Alerts"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Six types of alerts below.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody className="table-primary">
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal Alerts: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault401" color="primary">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault401" className="modal-primary">
|
||||
<ModalHeader className="py-3" />
|
||||
<ModalBody className="text-center px-5">
|
||||
<i className="fa fa-5x fa-play fa-fw mb-3 modal-icon"></i>
|
||||
<h6>Welcome</h6>
|
||||
<p className="modal-text">
|
||||
We're glad to see you again and wish you a nice day.
|
||||
</p>
|
||||
<UncontrolledModal.Close color="primary" className="mr-2">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="link" className="text-primary">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
</ModalBody>
|
||||
<ModalFooter className="py-3" />
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody className="table-danger">
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal Alerts: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault402" color="danger">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault402" className="modal-danger">
|
||||
<ModalHeader className="py-3" />
|
||||
<ModalBody className="table-danger text-center px-5">
|
||||
<i className="fa fa-5x fa-close fa-fw modal-icon mb-3"></i>
|
||||
<h6>Danger</h6>
|
||||
<p className="modal-text">
|
||||
Change a few things up and try submitting.
|
||||
</p>
|
||||
<UncontrolledModal.Close color="danger" className="mr-2">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="link" className="text-danger">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
</ModalBody>
|
||||
<ModalFooter className="py-3" />
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody className="table-info">
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal Alerts: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault403" color="info">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault403" className="modal-info">
|
||||
<ModalHeader className="py-3" />
|
||||
<ModalBody className="table-info text-center px-5">
|
||||
<i className="fa fa-5x fa-info fa-fw modal-icon mb-3"></i>
|
||||
<h6>Information</h6>
|
||||
<p className="modal-text">
|
||||
This alert needs your attention, but it's not important.
|
||||
</p>
|
||||
<UncontrolledModal.Close color="info" className="mr-2">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="link" className="text-info">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
</ModalBody>
|
||||
<ModalFooter className="py-3" />
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody className="table-warning">
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal Alerts: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault404" color="warning">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault404" className="modal-warning">
|
||||
<ModalHeader className="py-3" />
|
||||
<ModalBody className="table-warning text-center px-5">
|
||||
<i className="fa fa-5x fa-exclamation fa-fw modal-icon mb-3"></i>
|
||||
<h6>Warning</h6>
|
||||
<p className="modal-text">
|
||||
Better check yourself, you're not looking too good.
|
||||
</p>
|
||||
<UncontrolledModal.Close color="warning" className="mr-2">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="link" className="text-warning">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
</ModalBody>
|
||||
<ModalFooter className="py-3" />
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody className="table-success">
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal Alerts: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault405" color="success">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault405" className="modal-success">
|
||||
<ModalHeader className="py-3" />
|
||||
<ModalBody className="table-success text-center px-5">
|
||||
<i className="fa fa-5x fa-check fa-fw modal-icon mb-3"></i>
|
||||
<h6>Success</h6>
|
||||
<p className="modal-text">
|
||||
Better check yourself, you're not looking too good.
|
||||
</p>
|
||||
<UncontrolledModal.Close color="success" className="mr-2">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="link" className="text-success">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
</ModalBody>
|
||||
<ModalFooter className="py-3" />
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
{ /* START Col6 1 */}
|
||||
<Col lg={ 6 }>
|
||||
{ /* START Card Modal */}
|
||||
<Card className="mb-3 text-center">
|
||||
<CardBody className="table-light">
|
||||
<CardTitle tag="h6" className="mb-3">
|
||||
Modal Alerts: Attention
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button id="modalDefault406" color="secondary">
|
||||
See Modal <i className="fa fa-angle-right ml-1"></i>
|
||||
</Button>
|
||||
{ /* START Example Modal */}
|
||||
<UncontrolledModal target="modalDefault406" className="modal-dark">
|
||||
<ModalHeader className="py-3" />
|
||||
<ModalBody className="table-light text-center px-5">
|
||||
<i className="fa fa-5x fa-exclamation fa-fw modal-icon mb-3"></i>
|
||||
<h6>Attention</h6>
|
||||
<p className="modal-text">
|
||||
This alert needs your attention, but it's not important.
|
||||
</p>
|
||||
<UncontrolledModal.Close color="secondary" className="mr-2">
|
||||
Save
|
||||
</UncontrolledModal.Close>
|
||||
<UncontrolledModal.Close color="link" className="text-secondary">
|
||||
Close
|
||||
</UncontrolledModal.Close>
|
||||
</ModalBody>
|
||||
<ModalFooter className="py-3" />
|
||||
</UncontrolledModal>
|
||||
{ /* END Example Modal */}
|
||||
</CardBody>
|
||||
</Card>
|
||||
{ /* START Card Modal */}
|
||||
</Col>
|
||||
{ /* END Col6 1 */}
|
||||
</Row>
|
||||
{ /* START Section 3 */}
|
||||
</Container>
|
||||
);
|
||||
3
app/routes/Interface/Modals/index.js
Executable file
3
app/routes/Interface/Modals/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { Modals } from './Modals';
|
||||
|
||||
export default Modals;
|
||||
116
app/routes/Interface/Navbars/Navbars.js
Executable file
116
app/routes/Interface/Navbars/Navbars.js
Executable file
@@ -0,0 +1,116 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
import { NavbarExample } from '../../components/Navbars/NavbarExample';
|
||||
|
||||
const ExampleWrap = ({ name, children }) => (
|
||||
<React.Fragment>
|
||||
<div className="small pt-4 pb-2">{ name }</div>
|
||||
{ children }
|
||||
</React.Fragment>
|
||||
);
|
||||
ExampleWrap.propTypes = {
|
||||
name: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
};
|
||||
|
||||
const Navbars = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Navbars"
|
||||
className="display-4 mb-3 mt-2"
|
||||
/>
|
||||
|
||||
<p className="mt-4">
|
||||
Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
|
||||
</p>
|
||||
|
||||
{ /* START Light */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Navbars Light"
|
||||
>
|
||||
Theming the navbar has never been easier thanks to Theme Providers. Wrap the <code>Navbar</code> with a <code>NavbarThemeProvider</code> component and set <code>style="light"</code> and <code>color="<desired color>"</code>.
|
||||
</HeaderDemo>
|
||||
|
||||
<ExampleWrap name="Navbar Default #1.01">
|
||||
<NavbarExample themeStyle="light" themeColor="primary" />
|
||||
</ExampleWrap>
|
||||
|
||||
<ExampleWrap name="Navbar Pills #1.02">
|
||||
<NavbarExample themeStyle="light" themeColor="success" navStyle="pills" />
|
||||
</ExampleWrap>
|
||||
|
||||
<ExampleWrap name="Navbar Accent #1.03">
|
||||
<NavbarExample themeStyle="light" themeColor="info" navStyle="accent" />
|
||||
</ExampleWrap>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Light */}
|
||||
|
||||
{ /* START Dark */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Navbars Dark"
|
||||
className="mt-5"
|
||||
>
|
||||
Theming the navbar has never been easier thanks to Theme Providers. Wrap the <code>Navbar</code> with a <code>NavbarThemeProvider</code> component and set <code>style="dark"</code> and <code>color="<desired color>"</code>.
|
||||
</HeaderDemo>
|
||||
|
||||
<ExampleWrap name="Navbar Default #2.01">
|
||||
<NavbarExample themeStyle="dark" themeColor="primary" />
|
||||
</ExampleWrap>
|
||||
|
||||
<ExampleWrap name="Navbar Pills #2.02">
|
||||
<NavbarExample themeStyle="dark" themeColor="success" navStyle="pills" />
|
||||
</ExampleWrap>
|
||||
|
||||
<ExampleWrap name="Navbar Accent #2.03">
|
||||
<NavbarExample themeStyle="dark" themeColor="info" navStyle="accent" />
|
||||
</ExampleWrap>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Dark */}
|
||||
|
||||
{ /* START Color */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Navbars Color"
|
||||
className="mt-5"
|
||||
>
|
||||
Theming the navbar has never been easier thanks to Theme Providers. Wrap the <code>Navbar</code> with a <code>NavbarThemeProvider</code> component and set <code>style="color"</code> and <code>color="<desired color>"</code>.
|
||||
</HeaderDemo>
|
||||
|
||||
<ExampleWrap name="Navbar Default #3.01">
|
||||
<NavbarExample themeStyle="color" themeColor="primary" />
|
||||
</ExampleWrap>
|
||||
|
||||
<ExampleWrap name="Navbar Pills #3.02">
|
||||
<NavbarExample themeStyle="color" themeColor="success" navStyle="pills" />
|
||||
</ExampleWrap>
|
||||
|
||||
<ExampleWrap name="Navbar Accent #3.03">
|
||||
<NavbarExample themeStyle="color" themeColor="info" navStyle="accent" />
|
||||
</ExampleWrap>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Color */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Navbars;
|
||||
3
app/routes/Interface/Navbars/index.js
Executable file
3
app/routes/Interface/Navbars/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Navbars from './Navbars';
|
||||
|
||||
export default Navbars;
|
||||
266
app/routes/Interface/Notifications/Notifications.js
Executable file
266
app/routes/Interface/Notifications/Notifications.js
Executable file
@@ -0,0 +1,266 @@
|
||||
import React from 'react';
|
||||
import { ToastContainer, toast } from 'react-toastify';
|
||||
import faker from 'faker/locale/en_US';
|
||||
import _ from 'lodash';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Button,
|
||||
CardBody,
|
||||
Col,
|
||||
CardHeader,
|
||||
Card,
|
||||
CardFooter,
|
||||
Media,
|
||||
FormGroup,
|
||||
CustomInput
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
|
||||
const positions = [
|
||||
{ label: 'top-left', value: 'top-left' },
|
||||
{ label: 'top-right', value: 'top-right' },
|
||||
{ label: 'top-center', value: 'top-center' },
|
||||
{ label: 'bottom-left', value: 'bottom-left' },
|
||||
{ label: 'bottom-right', value: 'bottom-right' },
|
||||
{ label: 'bottom-center', value: 'bottom-center' },
|
||||
];
|
||||
|
||||
const types = [
|
||||
{ label: 'info', value: 'info' },
|
||||
{ label: 'success', value: 'success' },
|
||||
{ label: 'warning', value: 'warning' },
|
||||
{ label: 'error', value: 'error' },
|
||||
{ label: 'default', value: 'default' },
|
||||
];
|
||||
|
||||
const initialState = {
|
||||
position: 'top-right',
|
||||
type: 'default'
|
||||
}
|
||||
|
||||
// ========== Toast Contents: ============
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const contentSuccess = ({ closeToast }) => (
|
||||
<Media>
|
||||
<Media middle left className="mr-3">
|
||||
<i className="fa fa-fw fa-2x fa-check"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<Media heading tag="h6">
|
||||
Success!
|
||||
</Media>
|
||||
<p>
|
||||
You successfully read this important alert message.
|
||||
</p>
|
||||
<div className="d-flex mt-2">
|
||||
<Button color="success" onClick={() => { closeToast }} >
|
||||
I Understand
|
||||
</Button>
|
||||
<Button color="link" onClick={() => { closeToast }} className="ml-2 text-success">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
);
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const contentError = ({ closeToast }) => (
|
||||
<Media>
|
||||
<Media middle left className="mr-3">
|
||||
<i className="fa fa-fw fa-2x fa-close"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<Media heading tag="h6">
|
||||
Danger!
|
||||
</Media>
|
||||
<p>
|
||||
Change a few things up and try submitting.
|
||||
</p>
|
||||
<div className="d-flex mt-2">
|
||||
<Button color="danger" onClick={() => { closeToast }}>
|
||||
I Understand
|
||||
</Button>
|
||||
<Button color="link" onClick={() => { closeToast }} className="ml-2 text-danger">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
);
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const contentInfo = ({ closeToast }) => (
|
||||
<Media>
|
||||
<Media middle left className="mr-3">
|
||||
<i className="fa fa-fw fa-2x fa-info"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<Media heading tag="h6">
|
||||
Information!
|
||||
</Media>
|
||||
<p>
|
||||
This alert needs your attention, but it's not important.
|
||||
</p>
|
||||
<div className="d-flex mt-2">
|
||||
<Button color="primary" onClick={() => { closeToast }} >
|
||||
I Understand
|
||||
</Button>
|
||||
<Button color="link" onClick={() => { closeToast }} className="ml-2 text-primary">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
);
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const contentWarning = ({ closeToast }) => (
|
||||
<Media>
|
||||
<Media middle left className="mr-3">
|
||||
<i className="fa fa-fw fa-2x fa-exclamation"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<Media heading tag="h6">
|
||||
Warning!
|
||||
</Media>
|
||||
<p>
|
||||
Better check yourself, you're not looking too good.
|
||||
</p>
|
||||
<div className="d-flex mt-2">
|
||||
<Button color="warning" onClick={() => { closeToast }} className="text-white">
|
||||
I Understand
|
||||
</Button>
|
||||
<Button color="link" onClick={() => { closeToast }} className="ml-2 text-warning">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
);
|
||||
// eslint-disable-next-line react/prop-types
|
||||
const contentDefault = ({ closeToast }) => (
|
||||
<Media>
|
||||
<Media middle left className="mr-3">
|
||||
<i className="fa fa-fw fa-2x fa-question"></i>
|
||||
</Media>
|
||||
<Media body>
|
||||
<Media heading tag="h6">
|
||||
Attention!
|
||||
</Media>
|
||||
<p>
|
||||
This alert needs your attention, but it's not important.
|
||||
</p>
|
||||
<div className="d-flex mt-2">
|
||||
<Button color="secondary" onClick={() => { closeToast }} className="text-white">
|
||||
I Understand
|
||||
</Button>
|
||||
<Button color="link" onClick={() => { closeToast }} className="ml-2 text-secondary">
|
||||
Cancel
|
||||
</Button>
|
||||
</div>
|
||||
</Media>
|
||||
</Media>
|
||||
);
|
||||
|
||||
// ========== Component: ============
|
||||
export class Notifications extends React.Component {
|
||||
state = _.clone(initialState);
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Notifications"
|
||||
className="mb-4 mt-4"
|
||||
/>
|
||||
<p>
|
||||
<strong>React-Toastify</strong> allow you to add notification to your app with ease.<br/>
|
||||
Specially written CSS are available in: <code>/app/styles/plugins/_react-toastify.scss</code>
|
||||
</p>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<div className="d-flex mb-2">
|
||||
<FormGroup>
|
||||
<h6 className="mb-3">Position</h6>
|
||||
{
|
||||
_.map(positions, (position) => (
|
||||
<CustomInput
|
||||
label={ position.label }
|
||||
checked={ position.value === this.state.position }
|
||||
onChange={ () => { this.setState({position: position.value}) } }
|
||||
type="radio"
|
||||
key={`pos-${position.value}`}
|
||||
id={`pos-${position.value}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</FormGroup>
|
||||
<FormGroup className="ml-5">
|
||||
<h6 className="mb-3">Type</h6>
|
||||
{
|
||||
_.map(types, (type) => (
|
||||
<CustomInput
|
||||
label={ type.label }
|
||||
checked={ type.value === this.state.type }
|
||||
onChange={ () => { this.setState({type: type.value}) } }
|
||||
type="radio"
|
||||
key={`pos-${type.value}`}
|
||||
id={`pos-${type.value}`}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</FormGroup>
|
||||
</div>
|
||||
<div className="d-flex ">
|
||||
<Button color="primary" onClick={ this._showHandler }>
|
||||
Show Toast
|
||||
</Button>
|
||||
<Button color="link" onClick={ this._clearHandler } className="ml-2">
|
||||
Clear All
|
||||
</Button>
|
||||
<Button color="link" onClick={ this._resetHandler } className="ml-2">
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
<ToastContainer
|
||||
position={this.state.position}
|
||||
autoClose={50000}
|
||||
draggable={false}
|
||||
hideProgressBar={true}
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
_showHandler = () => {
|
||||
switch(this.state.type) {
|
||||
case 'info':
|
||||
toast.info(contentInfo);
|
||||
break;
|
||||
case 'success':
|
||||
toast.success(contentSuccess);
|
||||
break;
|
||||
case 'warning':
|
||||
toast.warning(contentWarning);
|
||||
break;
|
||||
case 'error':
|
||||
toast.error(contentError);
|
||||
break;
|
||||
default:
|
||||
toast(contentDefault);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
_clearHandler = () => {
|
||||
toast.dismiss();
|
||||
}
|
||||
|
||||
_resetHandler = () => {
|
||||
this.setState(initialState);
|
||||
}
|
||||
}
|
||||
3
app/routes/Interface/Notifications/index.js
Executable file
3
app/routes/Interface/Notifications/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import { Notifications } from './Notifications';
|
||||
|
||||
export default Notifications;
|
||||
572
app/routes/Interface/Paginations/Paginations.js
Executable file
572
app/routes/Interface/Paginations/Paginations.js
Executable file
@@ -0,0 +1,572 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
Pagination,
|
||||
PaginationItem,
|
||||
PaginationLink
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const Paginations = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Paginations"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Paginations"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Documentation and examples for showing pagination to
|
||||
indicate a series of related content exists across m
|
||||
ultiple pages.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Basic Example
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">Previous</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">Next</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Disabled State
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Disabled example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem disabled>
|
||||
<PaginationLink previous href="#">Previous</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">Next</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Active State
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Active example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">Previous</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">Next</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Paginations with Icons"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Looking to use an icon or symbol in place of text for some pagination links?
|
||||
Be sure to provide proper screen reader support with <code>aria</code> attributes and
|
||||
the <code>.sr-only</code> utility.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Icons example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#" />
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#" />
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Icons example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-chevron-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-chevron-right"></i>
|
||||
</PaginationLink>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Icons example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-long-arrow-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-long-arrow-right"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Icons example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Icons example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-arrow-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-arrow-right"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Icons
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Icons example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-caret-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem active>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-caret-right"></i>
|
||||
</PaginationLink>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Paginations Sizes"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Fancy larger or smaller pagination?
|
||||
Add <code>.pagination-lg</code> or <code>.pagination-sm</code>
|
||||
for additional sizes.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Large
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Large example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example" size="lg">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Pagination: Small
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Small example
|
||||
</p>
|
||||
<Pagination aria-label="Page navigation example" size="sm">
|
||||
<PaginationItem>
|
||||
<PaginationLink previous href="#">
|
||||
<i className="fa fa-fw fa-angle-left"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
2
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink href="#">
|
||||
3
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
<PaginationItem>
|
||||
<PaginationLink next href="#">
|
||||
<i className="fa fa-fw fa-angle-right"></i>
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
</Pagination>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Paginations;
|
||||
3
app/routes/Interface/Paginations/index.js
Executable file
3
app/routes/Interface/Paginations/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Paginations from './Paginations';
|
||||
|
||||
export default Paginations;
|
||||
548
app/routes/Interface/ProgressBars/ProgressBars.js
Executable file
548
app/routes/Interface/ProgressBars/ProgressBars.js
Executable file
@@ -0,0 +1,548 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
Progress,
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const ProgressBars = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Progress Bars"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Progress Bars Colors"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Basic button layout options.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
{ /* START Col4 1 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Primary
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default progress styling. Use
|
||||
<code> <Progress value={'{'}2 * 5{'}'}/></code>
|
||||
</p>
|
||||
<Progress value={2 * 5} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Success
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="success" value={'{'}50{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="success" value={50} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Info
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="info" value={'{'}60{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="info" value={60} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 1 */}
|
||||
{ /* START Col4 2 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Warning
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="warning" value={'{'}70{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="warning" value={70} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Danger
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="danger" value={'{'}80{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="danger" value={80} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Dark
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="dark" value={'{'}20{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="dark" value={20} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 2 */}
|
||||
{ /* START Col4 3 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Secondary
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="secondary" value={'{'}30{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="secondary" value={30} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Custom Color
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="purple" value={'{'}40{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="purple" value={40} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Social Colors
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress color="facebook" value={'{'}60{'}'}/></code>
|
||||
</p>
|
||||
<Progress color="facebook" value={60} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 3 */}
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Progress Bars Heights"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Basic button layout options.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
{ /* START Col4 1 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Default progress styling. Use
|
||||
<code> <Progress value={'{'}3 * 5{'}'}/></code>
|
||||
</p>
|
||||
<Progress value={3 * 5} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: 5px
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress value={'{'}50{'}'} style={'{'}{'{'}height: "5px"{'}'}{'}'}/></code>
|
||||
</p>
|
||||
<Progress value={2 * 5} style={{height: "5px"}} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 1 */}
|
||||
{ /* START Col4 2 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: 3px
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress value={'{'}60{'}'} style={'{'}{'{'}height: "3px"{'}'}{'}'}/></code>
|
||||
</p>
|
||||
<Progress value={60} style={{height: "3px"}} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: 1px
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress value={'{'}30{'}'} style={'{'}{'{'}height: "1px"{'}'}{'}'}/></code>
|
||||
</p>
|
||||
<Progress value={30} style={{height: "1px"}} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
</Col>
|
||||
{ /* END Col4 2 */}
|
||||
{ /* START Col4 3 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: 4px
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress value={'{'}70{'}'} style={'{'}{'{'}height: "4px"{'}'}{'}'}/></code>
|
||||
</p>
|
||||
<Progress value={70} style={{height: "4px"}} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: 2px
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Color progress styling. Use
|
||||
<code> <Progress value={'{'}40{'}'} style={'{'}{'{'}height: "2px"{'}'}{'}'}/></code>
|
||||
</p>
|
||||
<Progress value={40} style={{height: "2px"}} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 3 */}
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Progress Bars Options"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Basic button layout options.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
{ /* START Col4 1 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Label
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Custom progress styling. Use
|
||||
<code> <Progress value={'{'}25{'}'}>25%<Progress></code>
|
||||
</p>
|
||||
<Progress value="25">25%</Progress>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Label Icon
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Custom progress styling. Use
|
||||
<code> <Progress value={'{'}25{'}'}><i className="fa fa-twitter"></i><Progress></code>
|
||||
</p>
|
||||
<Progress value="55" color="twitter">
|
||||
<i className="fa fa-twitter"></i>
|
||||
</Progress>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Multiple Bars
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Custom progress styling. Use
|
||||
<code> <Progress multi ><Progress bar value="15" /></Progress>
|
||||
</code>
|
||||
</p>
|
||||
<Progress multi>
|
||||
<Progress bar value="15" />
|
||||
<Progress bar color="success" value="30" />
|
||||
<Progress bar color="info" value="25" />
|
||||
</Progress>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 1 */}
|
||||
{ /* START Col4 2 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Striped
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Custom progress styling. Use <code><Progress striped value={'{'}45{'}'} /></code>
|
||||
</p>
|
||||
<Progress striped value={45} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Animated Striped
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Custom progress styling. Use <code><Progress animated striped value={'{'}45{'}'} /></code>
|
||||
</p>
|
||||
<Progress animated striped value={45} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Square Rounds
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Custom progress styling. Use <code><Progress value={'{'}25{'}'} /></code>
|
||||
</p>
|
||||
<Progress value={25} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 2 */}
|
||||
{ /* START Col4 3 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Full Rounds
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Custom progress styling. Use <code><Progress value={'{'}15{'}'} /></code>
|
||||
</p>
|
||||
<Progress value={15} />
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 3 */}
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Progress Bars Layouts"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Below are often used UI cases in applications.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
{ /* START Col4 1 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Details Below
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
A combined example that is often used in UI/UX.
|
||||
</p>
|
||||
<Progress value="25" className="mb-2">25%</Progress>
|
||||
<div className="d-flex">
|
||||
<p>Your Computer:</p>
|
||||
<p className="ml-auto text-inverse">
|
||||
6GB/12GB
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 1 */}
|
||||
{ /* START Col4 2 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Details Above
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
A combined example that is often used in UI/UX.
|
||||
</p>
|
||||
<div className="d-flex mb-0">
|
||||
<p>Your Disk:</p>
|
||||
<p className="ml-auto text-inverse">
|
||||
4125GB
|
||||
</p>
|
||||
</div>
|
||||
<Progress value="95" color="danger" className="mt-0">95%</Progress>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 2 */}
|
||||
{ /* START Col4 3 */}
|
||||
<Col lg={ 4 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Progress Bars: Details Inline
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
A combined example that is often used in UI/UX.
|
||||
</p>
|
||||
<div className="d-flex justify-content-between">
|
||||
<span className="d-flex align-items-center mr-2">HDD</span>
|
||||
<Progress value="55" color="success" className="mt-1 w-100">55%</Progress>
|
||||
<span className="ml-2 text-inverse">34GB</span>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 3 */}
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default ProgressBars;
|
||||
3
app/routes/Interface/ProgressBars/index.js
Executable file
3
app/routes/Interface/ProgressBars/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import ProgressBars from './ProgressBars';
|
||||
|
||||
export default ProgressBars;
|
||||
1556
app/routes/Interface/TabsPills/TabsPills.js
Executable file
1556
app/routes/Interface/TabsPills/TabsPills.js
Executable file
File diff suppressed because it is too large
Load Diff
3
app/routes/Interface/TabsPills/index.js
Executable file
3
app/routes/Interface/TabsPills/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import TabsPills from './TabsPills';
|
||||
|
||||
export default TabsPills;
|
||||
284
app/routes/Interface/TooltipsPopovers/TooltipsPopovers.js
Executable file
284
app/routes/Interface/TooltipsPopovers/TooltipsPopovers.js
Executable file
@@ -0,0 +1,284 @@
|
||||
import React from 'react';
|
||||
import faker from 'faker/locale/en_US';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Button,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody,
|
||||
CardText,
|
||||
UncontrolledTooltip,
|
||||
UncontrolledPopover,
|
||||
PopoverHeader,
|
||||
PopoverBody
|
||||
} from './../../../components';
|
||||
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const TooltipsPopovers = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Tooltips & Popovers"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Tooltips Examples"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
A rendered modal with header, body, and set of actions in the footer.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardText>
|
||||
Tight pants next level keffiyeh <a href="#" id="UncontrolledTooltip1">you probably</a> haven't heard of them.
|
||||
Photo booth beard raw denim letterpress vegan messenger bag stumptown.
|
||||
Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american
|
||||
apparel <a href="#" id="UncontrolledTooltip2">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans
|
||||
banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko
|
||||
mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" id="UncontrolledTooltip3">whatever keytar</a>,
|
||||
scenester farm-to-table banksy Austin <a href="#" id="UncontrolledTooltip4">twitter handle</a> freegan cred raw denim
|
||||
single-origin coffee viral.
|
||||
</CardText>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip1">
|
||||
Default Tooltip
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip2">
|
||||
Another Tooltip
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip3">
|
||||
Another one here too
|
||||
</UncontrolledTooltip>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltip4">
|
||||
The last tip!
|
||||
</UncontrolledTooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Tooltips Demos"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Four options are available: <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> aligned.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Top
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipTop">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="top" target="UncontrolledTooltipTop">
|
||||
Tooltip Top
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Right
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipRight">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="right" target="UncontrolledTooltipRight">
|
||||
Tooltip Right
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Bottom
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipBottom">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="bottom" target="UncontrolledTooltipBottom">
|
||||
Tooltip Bottom
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Tooltip: Left
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledTooltipLeft">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledTooltip placement="left" target="UncontrolledTooltipLeft">
|
||||
Tooltip Left
|
||||
</UncontrolledTooltip>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Popovers Examples"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Four options are available: <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> aligned.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Top
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverTop">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="top" target="UncontrolledPopoverTop">
|
||||
<PopoverHeader>
|
||||
Top Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Right
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverRight">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="right" target="UncontrolledPopoverRight">
|
||||
<PopoverHeader>
|
||||
Right Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Bottom
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverBottom">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="bottom" target="UncontrolledPopoverBottom">
|
||||
<PopoverHeader>
|
||||
Bottom Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 3 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody className="text-center">
|
||||
<CardTitle tag="h6" className="text-center mb-3">
|
||||
Popover: Left
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<Button className="text-center" outline color="secondary" id="UncontrolledPopoverLeft">
|
||||
Show
|
||||
</Button>
|
||||
<UncontrolledPopover placement="left" target="UncontrolledPopoverLeft">
|
||||
<PopoverHeader>
|
||||
Left Popover
|
||||
</PopoverHeader>
|
||||
<PopoverBody>
|
||||
{ faker.lorem.paragraph() }
|
||||
</PopoverBody>
|
||||
</UncontrolledPopover>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default TooltipsPopovers;
|
||||
3
app/routes/Interface/TooltipsPopovers/index.js
Executable file
3
app/routes/Interface/TooltipsPopovers/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import TooltipsPopovers from './TooltipsPopovers';
|
||||
|
||||
export default TooltipsPopovers;
|
||||
962
app/routes/Interface/Typography/Typography.js
Executable file
962
app/routes/Interface/Typography/Typography.js
Executable file
@@ -0,0 +1,962 @@
|
||||
import React from 'react';
|
||||
|
||||
import {
|
||||
Container,
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardTitle,
|
||||
CardBody
|
||||
} from './../../../components';
|
||||
import { HeaderMain } from "../../components/HeaderMain";
|
||||
import { HeaderDemo } from "../../components/HeaderDemo";
|
||||
|
||||
const Typography = () => (
|
||||
<React.Fragment>
|
||||
<Container>
|
||||
<HeaderMain
|
||||
title="Typography"
|
||||
className="mb-5 mt-4"
|
||||
/>
|
||||
{ /* START Header 1 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={1}
|
||||
title="Colors"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
Convey meaning through color with a
|
||||
handful of color utility classes.
|
||||
Includes support for styling links
|
||||
with hover states, too.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 1 */}
|
||||
{ /* START Section 1 */}
|
||||
<Row>
|
||||
{ /* START Col4 1 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Defaults Colors
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Use any of these color variables as they
|
||||
are or reassign them to more meaningful
|
||||
variables for your project.
|
||||
</p>
|
||||
<div>
|
||||
<p className="text-secondary">This is an example for <code>.text-secondary</code>
|
||||
</p>
|
||||
<p className="text-success">
|
||||
This is an example for <code>.text-success</code>
|
||||
</p>
|
||||
<p className="text-danger">
|
||||
This is an example for <code>.text-danger</code>
|
||||
</p>
|
||||
<p className="text-warning">
|
||||
This is an example for <code>.text-warning</code>
|
||||
</p>
|
||||
<p className="text-info">
|
||||
This is an example for <code>.text-info</code>
|
||||
</p>
|
||||
|
||||
<p className="text-body">
|
||||
This is an example for <code>.text-body </code>
|
||||
</p>
|
||||
<p className="text-muted">
|
||||
This is an example for <code>.text-muted</code>
|
||||
</p>
|
||||
<p className="text-dark p-2 bg-gray-500">
|
||||
This is an example for <code>.text-dark</code>
|
||||
</p>
|
||||
<p className="text-black-50 p-2 bg-gray-500">
|
||||
This is an example for <code>.text-black-50</code>
|
||||
</p>
|
||||
<p className="text-white p-2 bg-dark">
|
||||
This is an example for <code>.text-white</code>
|
||||
</p>
|
||||
<p className="text-light p-2 bg-dark">
|
||||
This is an example for <code>.text-light</code>
|
||||
</p>
|
||||
<p className="text-white-50 p-2 bg-dark">
|
||||
This is an example for <code>.text-white-50</code>
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Social Colors
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Colors are often used for social media.
|
||||
</p>
|
||||
<div>
|
||||
<p className="text-facebook">
|
||||
<i className="fa fa-fw fa-facebook mr-1"></i>
|
||||
This is an example for <code>.text-facebook</code>
|
||||
</p>
|
||||
<p className="text-twitter">
|
||||
<i className="fa fa-fw fa-twitter mr-1"></i>
|
||||
This is an example for <code>.text-twitter</code>
|
||||
</p>
|
||||
<p className="text-lastfm">
|
||||
<i className="fa fa-fw fa-lastfm mr-1"></i>
|
||||
This is an example for <code>.text-lastfm</code>
|
||||
</p>
|
||||
<p className="text-pinterest">
|
||||
<i className="fa fa-fw fa-pinterest mr-1"></i>
|
||||
This is an example for <code>.text-pinterest</code>
|
||||
</p>
|
||||
<p className="text-linkedin">
|
||||
<i className="fa fa-fw fa-linkedin mr-1"></i>
|
||||
This is an example for <code>.text-linkedin</code>
|
||||
</p>
|
||||
<p className="text-medium">
|
||||
<i className="fa fa-fw fa-medium mr-1"></i>
|
||||
This is an example for <code>.text-medium</code>
|
||||
</p>
|
||||
<p className="text-skype">
|
||||
<i className="fa fa-fw fa-skype mr-1"></i>
|
||||
This is an example for <code>.text-skype</code>
|
||||
</p>
|
||||
<p className="text-foursquare">
|
||||
<i className="fa fa-fw fa-foursquare mr-1"></i>
|
||||
This is an example for <code>.text-foursquare</code>
|
||||
</p>
|
||||
<p className="text-android">
|
||||
<i className="fa fa-fw fa-android mr-1"></i>
|
||||
This is an example for
|
||||
<code>.text-android</code>
|
||||
</p>
|
||||
<p className="text-spotify">
|
||||
<i className="fa fa-fw fa-spotify mr-1"></i>
|
||||
This is an example for <code>.text-spotify</code>
|
||||
</p>
|
||||
<p className="text-youtube">
|
||||
<i className="fa fa-fw fa-youtube mr-1"></i>
|
||||
This is an example for <code>.text-youtube</code>
|
||||
</p>
|
||||
<p className="text-windows">
|
||||
<i className="fa fa-fw fa-windows mr-1"></i>
|
||||
This is an example for <code>.text-windows</code>
|
||||
</p>
|
||||
<p className="text-amazon">
|
||||
<i className="fa fa-fw fa-amazon mr-1"></i>
|
||||
This is an example for <code>.text-amazon</code>
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 1 */}
|
||||
{ /* START Col4 2 */}
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Grays
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Grayscale colors provide quick access to
|
||||
commonly used shades of black while semantic
|
||||
include various colors assigned to meaningful
|
||||
contextual values.
|
||||
</p>
|
||||
<div>
|
||||
<p className="text-gray-100 p-2 bg-dark">
|
||||
This is an example for <code>.text-gray-100</code>
|
||||
</p>
|
||||
<p className="text-gray-200 p-2 bg-dark">
|
||||
This is an example for <code>.text-gray-200</code>
|
||||
</p>
|
||||
<p className="text-gray-300 p-2 bg-dark">
|
||||
This is an example for <code>.text-gray-300</code>
|
||||
</p>
|
||||
<p className="text-gray-400 p-2 bg-dark">
|
||||
This is an example for <code>.text-gray-400</code>
|
||||
</p>
|
||||
<p className="text-gray-500 p-2 bg-dark">
|
||||
This is an example for
|
||||
<code>.text-gray-500</code>
|
||||
</p>
|
||||
<p className="text-gray-600 p-2 bg-gray-100">
|
||||
This is an example for <code>.text-gray-600</code>
|
||||
</p>
|
||||
<p className="text-gray-700 p-2 bg-gray-100">
|
||||
This is an example for <code>.text-gray-700</code>
|
||||
</p>
|
||||
<p className="text-gray-800 p-2 bg-gray-100">
|
||||
This is an example for <code>.text-gray-800</code>
|
||||
</p>
|
||||
<p className="text-gray-900 p-2">
|
||||
This is an example for <code>.text-gray-900</code>
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Social Colors
|
||||
<span className="small ml-1 text-muted">
|
||||
#1.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Colors are often used for social media.
|
||||
</p>
|
||||
<div>
|
||||
<p>
|
||||
This is an example <a href="#" className="text-primary">Primary Link</a>
|
||||
</p>
|
||||
<p>
|
||||
This is an example <a href="#" className="text-secondary">Secondary Link</a>
|
||||
</p>
|
||||
<p>
|
||||
This is an example <a href="#" className="text-success">Success Link</a>
|
||||
</p>
|
||||
<p>
|
||||
This is an example <a href="#" className="text-danger">Danger Link</a>
|
||||
</p>
|
||||
<p>
|
||||
This is an example <a href="#" className="text-warning">Warning Link</a>
|
||||
</p>
|
||||
<p>
|
||||
This is an example <a href="#" className="text-info">Info Link</a>
|
||||
</p>
|
||||
<p>
|
||||
This is an example <a href="#" className="text-dark">Dark Link</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="#" className="text-light bg-dark">Light Link</a>
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
{ /* END Col4 2 */}
|
||||
</Row>
|
||||
{ /* END Section 1 */}
|
||||
|
||||
{ /* START Header 2 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={2}
|
||||
title="Headings"
|
||||
className="mt-5"
|
||||
subTitle={(
|
||||
<React.Fragment>
|
||||
All HTML headings, <code><h1></code>
|
||||
through <code><h6></code>, are available.
|
||||
</React.Fragment>
|
||||
)}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 2 */}
|
||||
{ /* START Section 2 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Header: Light
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Just add class/helper <code>.fw-300</code> to <code><h1></code>
|
||||
- <code><h6></code>.
|
||||
</p>
|
||||
<div>
|
||||
<h1 className="mb-2 fw-300">
|
||||
h1. Light Heading
|
||||
</h1>
|
||||
<h2 className="fw-300">
|
||||
h2. Light Heading
|
||||
</h2>
|
||||
<h3 className="fw-300">
|
||||
h3. Light Heading
|
||||
</h3>
|
||||
<h4 className="fw-300">
|
||||
h4. Light Heading
|
||||
</h4>
|
||||
<h5 className="fw-300">
|
||||
h5. Light Heading
|
||||
</h5>
|
||||
<h6 className="fw-300">
|
||||
h6. Light Heading
|
||||
</h6>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Header: Displays
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Traditional heading elements are designed
|
||||
to work best in the meat of your page content.
|
||||
When you need a heading to stand out, consider using a display heading—a larger, slightly more opinionated heading style.
|
||||
</p>
|
||||
<div>
|
||||
<h1 className="display-1">Display 1</h1>
|
||||
<h1 className="display-2">Display 2</h1>
|
||||
<h1 className="display-3">Display 3</h1>
|
||||
<h1 className="display-4">Display 4</h1>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Header: Regular
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
In the case of Regular is from set as default in <code>.scss</code>.
|
||||
</p>
|
||||
<div>
|
||||
<h1 className="mb-0">
|
||||
h1. Regular Heading
|
||||
</h1>
|
||||
<h2>
|
||||
h2. Regular Heading
|
||||
</h2>
|
||||
<h3>
|
||||
h3. Regular Heading
|
||||
</h3>
|
||||
<h4>
|
||||
h4. Regular Heading
|
||||
</h4>
|
||||
<h5>
|
||||
h5. Regular Heading
|
||||
</h5>
|
||||
<h6>
|
||||
h6. Regular Heading
|
||||
</h6>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Header: Customizing
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Use the included utility classes to recreate the small secondary
|
||||
heading text from Bootstrap 4
|
||||
</p>
|
||||
<div>
|
||||
<h1 className="mb-0">
|
||||
h1. Custom
|
||||
<small className="text-muted">
|
||||
with Small Text
|
||||
</small>
|
||||
</h1>
|
||||
<h2>
|
||||
h2. Custom
|
||||
<small className="text-muted">
|
||||
with Small Text
|
||||
</small>
|
||||
</h2>
|
||||
<h3>
|
||||
h3. Custom
|
||||
<small className="text-muted">
|
||||
with Small Text
|
||||
</small>
|
||||
</h3>
|
||||
<h4>
|
||||
h4. Custom
|
||||
<small className="text-muted">
|
||||
with Small Text
|
||||
</small>
|
||||
</h4>
|
||||
<h5>
|
||||
h5. Custom
|
||||
<small className="text-muted">
|
||||
with Small Text
|
||||
</small>
|
||||
</h5>
|
||||
<h6>
|
||||
h6. Custom
|
||||
<small className="text-muted">
|
||||
with Small Text
|
||||
</small>
|
||||
</h6>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 2 */}
|
||||
|
||||
{ /* START Header 3 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={3}
|
||||
title="Text"
|
||||
className="mt-5"
|
||||
subTitle="Documentation and examples for common text utilities to control alignment, wrapping, weight, and more."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 3 */}
|
||||
{ /* START Section 3 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Justify
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Just add class <code>.text-justify</code>.
|
||||
</p>
|
||||
<p className="card-text text-justify">
|
||||
Ambitioni dedisse scripsisse iudicaretur.
|
||||
Cras mattis iudicium purus sit amet fermentum.
|
||||
Donec sed odio operae, eu vulputate felis rhoncus.
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
At nos hinc posthac, sitientis piros Afros.
|
||||
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
|
||||
Cras mattis iudicium purus sit amet fermentum.
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: No Wrap
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Prevent text from wrapping with a <code>.text-nowrap</code> class.
|
||||
</p>
|
||||
<div className="text-nowrap" style={{ width: '8rem' }}>
|
||||
This text should overflow the parent.
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Transform
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Transform text in components with text capitalization classes.
|
||||
</p>
|
||||
<p className="text-lowercase">
|
||||
Lowercased text.
|
||||
</p>
|
||||
<p className="text-uppercase">
|
||||
Uppercased text.
|
||||
</p>
|
||||
<p className="text-capitalize">
|
||||
CapiTaliZed text.
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Monospace
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.07
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Change a selection to our monospace font stack with <code>.text-monospace</code>.
|
||||
</p>
|
||||
<p className="text-monospace">
|
||||
This is in monospace
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Inline Text Elements
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.09
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Styling for common inline HTML5 elements.
|
||||
</p>
|
||||
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
|
||||
<p><del>This line of text is meant to be treated as deleted text.</del></p>
|
||||
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
|
||||
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
|
||||
<p><u>This line of text will render as underlined</u></p>
|
||||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||||
<p><strong>This line rendered as bold text.</strong></p>
|
||||
<p><em>This line rendered as italicized text.</em></p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Alignment
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Add class <code>.text-left</code>,
|
||||
<code>.text-center</code> or
|
||||
<code>.text-right</code>.
|
||||
</p>
|
||||
<div>
|
||||
<p className="text-left">
|
||||
Left aligned text on all viewport sizes.
|
||||
</p>
|
||||
<p className="text-center">
|
||||
Center aligned text on all viewport sizes.
|
||||
</p>
|
||||
<p className="text-right">
|
||||
Right aligned text on all viewport sizes.
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Truncate
|
||||
<span className="small ml-1 text-muted">
|
||||
#2.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
For longer content, you can add a <code>.text-truncate</code>
|
||||
class to truncate the text with an ellipsis. <strong>Requires</strong> display:
|
||||
<code>inline-block</code> or <code>display: block</code>.
|
||||
</p>
|
||||
<div className="row">
|
||||
<div className="col-3 text-truncate">
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
</div>
|
||||
</div>
|
||||
<span className="d-inline-block text-truncate" style={{ maxWidth: '150px'}}>
|
||||
Praeterea iter est quasdam res quas ex communi.
|
||||
</span>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Transform
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.06
|
||||
</span>
|
||||
</CardTitle>
|
||||
<div>
|
||||
<p className="card-text">
|
||||
Quickly change the weight (boldness) of text or italicize text.
|
||||
</p>
|
||||
<p className="font-weight-bold">
|
||||
Bold text.
|
||||
</p>
|
||||
<p className="font-weight-normal">
|
||||
Normal weight text.
|
||||
</p>
|
||||
<p className="font-weight-light">
|
||||
Light weight text.
|
||||
</p>
|
||||
<p className="font-italic">
|
||||
Italic text.
|
||||
</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Lead
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.08
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Make a paragraph stand out by adding <code>.lead</code>.
|
||||
</p>
|
||||
<p className="card-text lead">
|
||||
Vivamus sagittis lacus vel augue laoreet rutrum
|
||||
faucibus dolor auctor. Duis mollis, est non commodo luctus.
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Text: Abbreviations
|
||||
<span className="small ml-1 text-muted">
|
||||
#3.10
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Add <code>.initialism</code> to an abbreviation for a slightly smaller font-size.
|
||||
</p>
|
||||
<p><abbr title="attribute">attr</abbr></p>
|
||||
<p><abbr title="HyperText Markup Language" className="initialism">HTML</abbr></p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 3 */}
|
||||
|
||||
{ /* START Header 4 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={4}
|
||||
title="Blackquotes"
|
||||
className="mt-5"
|
||||
subTitle="For quoting blocks of content from another source within your document."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 4 */}
|
||||
{ /* START Section 4 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Blackquote: Default
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Wrap <code><blockquote className="blockquote" /></code> around any HTML as the quote.
|
||||
</p>
|
||||
<blockquote className="blockquote">
|
||||
<p className="mb-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Integer posuere erat a ante.</p>
|
||||
</blockquote>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Blackquote: Alignment Center
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Use text utilities as needed to change the alignment of your blockquote.
|
||||
</p>
|
||||
<blockquote className="blockquote text-center">
|
||||
<p className="mb-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
|
||||
</p>
|
||||
<footer className="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Blackquote: Naming a Source
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Add a <code><footer className="blockquote-footer"></code>
|
||||
for identifying the source. Wrap the name of the source work in <code>cite</code>.
|
||||
</p>
|
||||
<blockquote className="blockquote">
|
||||
<p className="mb-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
|
||||
</p>
|
||||
<footer className="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Blackquote: Alignment Right
|
||||
<span className="small ml-1 text-muted">
|
||||
#4.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Use text utilities as needed to change the alignment of your blockquote.
|
||||
</p>
|
||||
<blockquote className="blockquote text-right">
|
||||
<p className="mb-0">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
|
||||
</p>
|
||||
<footer className="blockquote-footer">
|
||||
Someone famous in <cite title="Source Title">Source Title</cite>
|
||||
</footer>
|
||||
</blockquote>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 4 */}
|
||||
{ /* START Header 5 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={5}
|
||||
title="Lists"
|
||||
className="mt-5"
|
||||
subTitle="For quoting blocks of content from another source within your document."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 5 */}
|
||||
{ /* START Section 5 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Lists: Unstyled
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Remove the default <code>.list-style</code> and left margin on list items.
|
||||
</p>
|
||||
<ul className="list-unstyled">
|
||||
<li>Lorem ipsum dolor sit amet</li>
|
||||
<li>Consectetur adipiscing elit</li>
|
||||
<li>Integer molestie lorem at massa</li>
|
||||
<li>Facilisis in pretium nisl aliquet</li>
|
||||
<li>Nulla volutpat aliquam velit
|
||||
<ul>
|
||||
<li>Phasellus iaculis neque</li>
|
||||
<li>Purus sodales ultricies</li>
|
||||
<li>Vestibulum laoreet porttitor sem</li>
|
||||
<li>Ac tristique libero volutpat at</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Faucibus porta lacus fringilla vel</li>
|
||||
<li>Aenean sit amet erat nunc</li>
|
||||
<li>Eget porttitor lorem</li>
|
||||
</ul>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Lists: Inline
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Remove a list’s bullets and apply some light margin
|
||||
with a combination of two classes, <code>.list-inline</code> and
|
||||
<code>.list-inline-item</code>.
|
||||
</p>
|
||||
<ul className="list-inline">
|
||||
<li className="list-inline-item">Lorem ipsum</li>
|
||||
<li className="list-inline-item">Phasellus iaculis</li>
|
||||
<li className="list-inline-item">Nulla volutpat</li>
|
||||
</ul>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 12 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Lists: Description List Alignment
|
||||
<span className="small ml-1 text-muted">
|
||||
#5.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Align terms and descriptions horizontally by using
|
||||
our grid system’s predefined classes (or semantic mixins).
|
||||
For longer terms, you can optionally add a <code>.text-truncate</code>
|
||||
class to truncate the text with an ellipsis.
|
||||
</p>
|
||||
<dl className="row">
|
||||
<dt className="col-sm-3">Description lists</dt>
|
||||
<dd className="col-sm-9">A description list is perfect for defining terms.</dd>
|
||||
<dt className="col-sm-3">Euismod</dt>
|
||||
<dd className="col-sm-9">
|
||||
<p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
|
||||
<p>Donec id elit non mi porta gravida at eget metus.</p>
|
||||
</dd>
|
||||
<dt className="col-sm-3">Malesuada porta</dt>
|
||||
<dd className="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||
<dt className="col-sm-3 text-truncate">Truncated term is truncated</dt>
|
||||
<dd className="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
|
||||
<dt className="col-sm-3">Nesting</dt>
|
||||
<dd className="col-sm-9">
|
||||
<dl className="row">
|
||||
<dt className="col-sm-4">Nested definition list</dt>
|
||||
<dd className="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
|
||||
</dl>
|
||||
</dd>
|
||||
</dl>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 5 */}
|
||||
{ /* START Header 6 */}
|
||||
<Row>
|
||||
<Col lg={ 12 }>
|
||||
<HeaderDemo
|
||||
no={6}
|
||||
title="Code"
|
||||
className="mt-5"
|
||||
subTitle="Documentation and examples for displaying inline and multiline blocks of code with Bootstrap."
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Header 6 */}
|
||||
{ /* START Section 6 */}
|
||||
<Row>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Code: Inline Code
|
||||
<span className="small ml-1 text-muted">
|
||||
#6.01
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Wrap inline snippets of code with <code><code></code>.
|
||||
Be sure to escape HTML angle brackets.
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Code: Variables
|
||||
<span className="small ml-1 text-muted">
|
||||
#6.03
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
For indicating variables use the <code><var></code> tag.
|
||||
</p>
|
||||
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Code: User Input
|
||||
<span className="small ml-1 text-muted">
|
||||
#6.04
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Use the <code><kbd></code> to indicate input that is typically entered via keyboard.
|
||||
</p>
|
||||
To switch directories, type <kbd>cd</kbd> followed by the name of
|
||||
the directory.<br />
|
||||
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col lg={ 6 }>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Code: Sample Output
|
||||
<span className="small ml-1 text-muted">
|
||||
#6.05
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
For indicating sample output from a program use the <code><samp></code> tag.
|
||||
</p>
|
||||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card className="mb-3">
|
||||
<CardBody>
|
||||
<CardTitle tag="h6">
|
||||
Code: Code Blocks
|
||||
<span className="small ml-1 text-muted">
|
||||
#6.02
|
||||
</span>
|
||||
</CardTitle>
|
||||
<p className="card-text">
|
||||
Use <code><pre></code>s for multiple lines of code. Once again, be sure to
|
||||
escape any angle brackets in the code for proper rendering.
|
||||
You may optionally add the <code>.pre-scrollable</code> class, \
|
||||
which will set a max-height of 340px and provide a y-axis scrollbar.
|
||||
</p>
|
||||
<code><p>Sample text here...</p>
|
||||
<p>And another line of sample text here...</p>
|
||||
</code>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
{ /* END Section 6 */}
|
||||
</Container>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
export default Typography;
|
||||
3
app/routes/Interface/Typography/index.js
Executable file
3
app/routes/Interface/Typography/index.js
Executable file
@@ -0,0 +1,3 @@
|
||||
import Typography from './Typography';
|
||||
|
||||
export default Typography;
|
||||
Reference in New Issue
Block a user