Blog/Airframe-React
Template
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Init

Browse Source 
Preview: http://dashboards.webkom.co/react/airframe
This commit is contained in:
Tomasz Owczarczyk
2019-08-15 00:54:44 +02:00
parent f975443095
commit 37092d1d6c
626 changed files with 56691 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
app/routes/Interface/Navbars/Navbars.js Executable file
View 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=&quot;light&quot;</code> and <code>color=&quot;&lt;desired color&gt;&quot;</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=&quot;dark&quot;</code> and <code>color=&quot;&lt;desired color&gt;&quot;</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=&quot;color&quot;</code> and <code>color=&quot;&lt;desired color&gt;&quot;</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;