refactor: update to v4
This commit is contained in:
Łukasz Holeczek
parent
2f793d1746
commit
d1a87d22f8
7
.eslintrc
Normal file
7
.eslintrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"extends": "react-app",
|
||||
"plugins": ["prettier"],
|
||||
"rules": {
|
||||
"prettier/prettier": "error"
|
||||
}
|
||||
}
|
||||
1
.prettierignore
Normal file
1
.prettierignore
Normal file
@ -0,0 +1 @@
|
||||
dist/
|
||||
7
.prettierrc.js
Normal file
7
.prettierrc.js
Normal file
@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
semi: false,
|
||||
trailingComma: "all",
|
||||
singleQuote: true,
|
||||
printWidth: 100,
|
||||
tabWidth: 2
|
||||
};
|
||||
30
migration.md
30
migration.md
@ -11,47 +11,57 @@
|
||||
- `float-left` to `float-start`
|
||||
- `float-right` to `float-end`
|
||||
|
||||
## Badges
|
||||
## Components
|
||||
|
||||
- variant="pill" --> shape="rounded-pill"
|
||||
- variant="square" --> shape="rounded-0"
|
||||
- Deprecated component `CEmbed`
|
||||
- Deprecated component `CJumbotron`
|
||||
|
||||
## Forms
|
||||
### Badges
|
||||
|
||||
- variant="pill" => shape="rounded-pill"
|
||||
- variant="square" => shape="rounded-0"
|
||||
|
||||
### Forms
|
||||
|
||||
- `CInput` => `CFormControl`
|
||||
- `CInputCheckbox` => `CFormCheck`
|
||||
- `CLabel` => `CFormLabel`
|
||||
- `CSelect` => `CFormSelect`
|
||||
- `CValidFeedback` => `CFormFeedback valid`
|
||||
- `CInvalidFeedback` => `CFormFeedback invalid`
|
||||
|
||||
- Deprecated component `CFormGroup`
|
||||
- Deprecated component `CInputGroupAppend`
|
||||
- Deprecated component `CInputGroupPrepend`
|
||||
- Depreacted component `CSwitch`, use `CFormCheck switch` instead of.
|
||||
- Deprecated `.help-block`
|
||||
|
||||
## Header
|
||||
### Header
|
||||
|
||||
- Deprecated pro `withSubheader`
|
||||
- Deprecated component `CHeaderNavItem`, use `CNavItem` instead of.
|
||||
- Deprecated component `CHeaderNavLink`, use `CNavLink` instead of.
|
||||
|
||||
## List Group
|
||||
### List Group
|
||||
|
||||
- Depracated prop `action` Use `component="a"` or `component="b"` instead of `action`.
|
||||
|
||||
## Modal
|
||||
### Modal
|
||||
|
||||
- Depracated prop `show` Use `visible` instead of.
|
||||
|
||||
## Popover
|
||||
### Popover
|
||||
|
||||
- Depracated prop `header` Use `title` instead of.
|
||||
|
||||
## Progress Bar
|
||||
### Progress Bar
|
||||
|
||||
- Depracated prop `precision`
|
||||
- Depracated prop `showLabel`
|
||||
- Depracated prop `showPercentage`
|
||||
- Depracated prop `showValue`
|
||||
|
||||
## Tabs
|
||||
### Tabs
|
||||
|
||||
- Deprecated component `<CTabs>` use `<CNav variant="tabs">` without wrapper component `<CTabs>`
|
||||
|
||||
|
||||
@ -30,10 +30,10 @@
|
||||
"@coreui/react": "^3.4.0",
|
||||
"@coreui/react-chartjs": "^1.0.1",
|
||||
"@coreui/utils": "^1.3.1",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.3.2",
|
||||
"classnames": "^2.2.6",
|
||||
"core-js": "^3.8.1",
|
||||
"enzyme": "^3.11.0",
|
||||
"@wojtekmaj/enzyme-adapter-react-17": "^0.3.2",
|
||||
"node-sass": "^4.14.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^17.0.1",
|
||||
@ -45,6 +45,9 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"auto-changelog": "~2.2.1",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"gatsby-plugin-sitemap": "^3.2.0",
|
||||
"prettier": "2.2.1",
|
||||
"react-scripts": "^4.0.1"
|
||||
},
|
||||
"scripts": {
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
* CoreUI Free - React.js Admin Template
|
||||
* @version v3.2.0
|
||||
* CoreUI - Free React.js Admin Template
|
||||
* @version v4.0.0-alpha.0
|
||||
* @link https://coreui.io/pro/react/
|
||||
* Copyright (c) 2020 creativeLabs Łukasz Holeczek
|
||||
* Copyright (c) 2021 creativeLabs Łukasz Holeczek
|
||||
* License MIT
|
||||
-->
|
||||
<html lang="en">
|
||||
|
||||
@ -25,21 +25,25 @@ const AppHeader = () => {
|
||||
const dispatch = useDispatch()
|
||||
const sidebarShow = useSelector((state) => state.sidebarShow)
|
||||
|
||||
const toggleSidebar = () => {
|
||||
const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
|
||||
dispatch({ type: 'set', sidebarShow: val })
|
||||
}
|
||||
// const toggleSidebar = () => {
|
||||
// const val = [true, 'responsive'].includes(sidebarShow) ? false : 'responsive'
|
||||
// dispatch({ type: 'set', sidebarShow: val })
|
||||
// }
|
||||
|
||||
const toggleSidebarMobile = () => {
|
||||
const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
|
||||
dispatch({ type: 'set', sidebarShow: val })
|
||||
}
|
||||
// const toggleSidebarMobile = () => {
|
||||
// const val = [false, 'responsive'].includes(sidebarShow) ? true : 'responsive'
|
||||
// dispatch({ type: 'set', sidebarShow: val })
|
||||
// }
|
||||
|
||||
return (
|
||||
<CHeader position="sticky" className="mb-4">
|
||||
<CContainer fluid>
|
||||
<CHeaderToggler inHeader className="ms-md-3 d-lg-none" onClick={toggleSidebarMobile} />
|
||||
<CHeaderToggler inHeader className="ms-3 d-md-down-none" onClick={toggleSidebar} />
|
||||
<CHeaderToggler
|
||||
className="ms-md-3 d-lg-none"
|
||||
onClick={() => dispatch({ type: 'set', sidebarShow: !sidebarShow })}
|
||||
>
|
||||
<CIcon name="cil-menu" />
|
||||
</CHeaderToggler>
|
||||
<CHeaderBrand className="mx-auto d-lg-none" to="/">
|
||||
<CIcon name="logo" height="48" alt="Logo" />
|
||||
</CHeaderBrand>
|
||||
|
||||
@ -17,14 +17,19 @@ import navigation from '../containers/_nav'
|
||||
const AppSidebar = () => {
|
||||
const dispatch = useDispatch()
|
||||
const unfoldable = useSelector((state) => state.sidebarUnfoldable)
|
||||
// const visible = useSelector(state => state.sidebarUnfoldable)
|
||||
const sidebarShow = useSelector((state) => state.sidebarShow)
|
||||
|
||||
return (
|
||||
<CSidebar
|
||||
position="fixed"
|
||||
selfHiding="md"
|
||||
unfoldable={unfoldable}
|
||||
// show={show}
|
||||
show={sidebarShow}
|
||||
onShow={() => console.log('show')}
|
||||
onHide={() => {
|
||||
console.log('hide')
|
||||
dispatch({ type: 'set', sidebarShow: false })
|
||||
}}
|
||||
// onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
|
||||
>
|
||||
<CSidebarBrand className="d-md-down-none" to="/">
|
||||
|
||||
@ -147,12 +147,6 @@ const _nav = [
|
||||
anchor: 'Buttons',
|
||||
to: '/buttons/buttons',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
anchor: 'Brand buttons',
|
||||
to: '/buttons/brand-buttons',
|
||||
},
|
||||
{
|
||||
_component: 'CNavItem',
|
||||
as: NavLink,
|
||||
|
||||
@ -19,7 +19,6 @@ const ProgressBar = React.lazy(() => import('./views/base/progress-bar/ProgressB
|
||||
|
||||
const Tabs = React.lazy(() => import('./views/base/tabs/Tabs'))
|
||||
const Tooltips = React.lazy(() => import('./views/base/tooltips/Tooltips'))
|
||||
const BrandButtons = React.lazy(() => import('./views/buttons/brand-buttons/BrandButtons'))
|
||||
const ButtonDropdowns = React.lazy(() => import('./views/buttons/button-dropdowns/ButtonDropdowns'))
|
||||
const ButtonGroups = React.lazy(() => import('./views/buttons/button-groups/ButtonGroups'))
|
||||
const Buttons = React.lazy(() => import('./views/buttons/buttons/Buttons'))
|
||||
@ -64,7 +63,6 @@ const routes = [
|
||||
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons },
|
||||
{ path: '/buttons/button-dropdowns', name: 'Dropdowns', component: ButtonDropdowns },
|
||||
{ path: '/buttons/button-groups', name: 'Button Groups', component: ButtonGroups },
|
||||
{ path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
|
||||
{ path: '/charts', name: 'Charts', component: Charts },
|
||||
{ path: '/icons', exact: true, name: 'Icons', component: CoreUIIcons },
|
||||
{ path: '/icons/coreui-icons', name: 'CoreUI Icons', component: CoreUIIcons },
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { createStore } from 'redux'
|
||||
|
||||
const initialState = {
|
||||
sidebarShow: 'responsive',
|
||||
sidebarShow: false,
|
||||
}
|
||||
|
||||
const changeState = (state = initialState, { type, ...rest }) => {
|
||||
|
||||
@ -13,37 +13,9 @@ import {
|
||||
import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Collapses = () => {
|
||||
const [collapse, setCollapse] = useState(false)
|
||||
const [collapseMulti, setCollapseMulti] = useState([false, false])
|
||||
const [accordion, setAccordion] = useState(1)
|
||||
const [fade, setFade] = useState(true)
|
||||
|
||||
const toggle = (e) => {
|
||||
setCollapse(!collapse)
|
||||
e.preventDefault()
|
||||
}
|
||||
|
||||
const toggleMulti = (type) => {
|
||||
let newCollapse = collapseMulti.slice()
|
||||
switch (type) {
|
||||
case 'left':
|
||||
newCollapse[0] = !collapseMulti[0]
|
||||
break
|
||||
case 'right':
|
||||
newCollapse[1] = !collapseMulti[1]
|
||||
break
|
||||
case 'both':
|
||||
newCollapse[0] = !collapseMulti[0]
|
||||
newCollapse[1] = !collapseMulti[1]
|
||||
break
|
||||
default:
|
||||
}
|
||||
setCollapseMulti(newCollapse)
|
||||
}
|
||||
|
||||
const toggleFade = () => {
|
||||
setFade(!fade)
|
||||
}
|
||||
const [visible, setVisible] = useState(false)
|
||||
const [visibleA, setVisibleA] = useState(false)
|
||||
const [visibleB, setVisibleB] = useState(false)
|
||||
|
||||
return (
|
||||
<CRow>
|
||||
@ -53,71 +25,50 @@ const Collapses = () => {
|
||||
Collapse
|
||||
<DocsLink name="CCollapse" />
|
||||
</CCardHeader>
|
||||
<CCollapse show={collapse}>
|
||||
<CCardBody>
|
||||
<p>
|
||||
<CButton
|
||||
href="#"
|
||||
onClick={(e) => {
|
||||
e.preventDefault()
|
||||
setVisible(!visible)
|
||||
}}
|
||||
>
|
||||
Link
|
||||
</CButton>
|
||||
<CButton onClick={() => setVisible(!visible)}>Button</CButton>
|
||||
<CCollapse visible={visible}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
||||
cred nesciunt sapiente ea proident.
|
||||
</p>
|
||||
<p>
|
||||
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non
|
||||
pulvinar risus. Aenean elementum eleifend nunc, pellentesque dapibus arcu hendrerit
|
||||
fringilla. Aliquam in nibh massa. Cras ultricies lorem non enim volutpat, a eleifend
|
||||
urna placerat. Fusce id luctus urna. In sed leo tellus. Mauris tristique leo a nisl
|
||||
feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis sollicitudin
|
||||
vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel
|
||||
turpis purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus
|
||||
tellus, a luctus enim orci non augue. Aenean ullamcorper nisl urna, non feugiat
|
||||
tortor volutpat in. Vivamus lobortis massa dolor, eget faucibus ipsum varius eget.
|
||||
Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
|
||||
vehicula sagittis elit leo id nisi.
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
<CCardFooter>
|
||||
<CButton color="primary" onClick={toggle} className={'mb-1'}>
|
||||
Toggling button
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
|
||||
</CCollapse>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<small> multi target</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p>
|
||||
<CButton onClick={() => setVisibleA(!visibleA)}>Toggle first element</CButton>
|
||||
<CButton onClick={() => setVisibleB(!visibleB)}>Toggle second element</CButton>
|
||||
<CButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
toggleMulti('left')
|
||||
setVisibleA(!visibleA)
|
||||
setVisibleB(!visibleB)
|
||||
}}
|
||||
>
|
||||
Left
|
||||
</CButton>{' '}
|
||||
<CButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
toggleMulti('right')
|
||||
}}
|
||||
>
|
||||
Right
|
||||
</CButton>{' '}
|
||||
<CButton
|
||||
color="primary"
|
||||
onClick={() => {
|
||||
toggleMulti('both')
|
||||
}}
|
||||
>
|
||||
Both
|
||||
</CButton>{' '}
|
||||
</p>
|
||||
Toggle both elements
|
||||
</CButton>
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CCollapse show={collapseMulti[0]}>
|
||||
<CCard className="mb-4">
|
||||
<CCol xs="6">
|
||||
<CCollapse visible={visibleA}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
@ -126,9 +77,9 @@ const Collapses = () => {
|
||||
</CCard>
|
||||
</CCollapse>
|
||||
</CCol>
|
||||
<CCol className="col-sm-12 col-md-6">
|
||||
<CCollapse show={collapseMulti[1]}>
|
||||
<CCard className="mb-4">
|
||||
<CCol xs="6">
|
||||
<CCollapse visible={visibleB}>
|
||||
<CCard className="mt-3">
|
||||
<CCardBody>
|
||||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes
|
||||
@ -140,109 +91,6 @@ const Collapses = () => {
|
||||
</CRow>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
<hr />
|
||||
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Fade
|
||||
<DocsLink name="CFade" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CFade timeout={300} in={fade} tag="h5" className="mt-3">
|
||||
This content will fade in and out as the button is pressed...
|
||||
</CFade>
|
||||
</CCardBody>
|
||||
<CCardFooter>
|
||||
<CButton color="primary" onClick={toggleFade}>
|
||||
Toggle Fade
|
||||
</CButton>
|
||||
</CCardFooter>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xl="6">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Collapse
|
||||
<small> accordion</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<div id="accordion">
|
||||
<CCard className="mb-0">
|
||||
<CCardHeader id="headingOne">
|
||||
<CButton
|
||||
block
|
||||
color="link"
|
||||
className="text-left m-0 p-0"
|
||||
onClick={() => setAccordion(accordion === 0 ? null : 0)}
|
||||
>
|
||||
<h5 className="m-0 p-0">Collapsible Group Item #1</h5>
|
||||
</CButton>
|
||||
</CCardHeader>
|
||||
<CCollapse show={accordion === 0}>
|
||||
<CCardBody>
|
||||
1. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
||||
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
|
||||
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
||||
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||||
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
|
||||
you probably haven''t heard of them accusamus labore sustainable VHS.
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard className="mb-0">
|
||||
<CCardHeader id="headingTwo">
|
||||
<CButton
|
||||
block
|
||||
color="link"
|
||||
className="text-left m-0 p-0"
|
||||
onClick={() => setAccordion(accordion === 1 ? null : 1)}
|
||||
>
|
||||
<h5 className="m-0 p-0">Collapsible Group Item #2</h5>
|
||||
</CButton>
|
||||
</CCardHeader>
|
||||
<CCollapse show={accordion === 1}>
|
||||
<CCardBody>
|
||||
2. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
||||
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
|
||||
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
||||
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||||
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
|
||||
you probably haven''t heard of them accusamus labore sustainable VHS.
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
<CCard className="mb-0">
|
||||
<CCardHeader id="headingThree">
|
||||
<CButton
|
||||
block
|
||||
color="link"
|
||||
className="text-left m-0 p-0"
|
||||
onClick={() => setAccordion(accordion === 2 ? null : 2)}
|
||||
>
|
||||
<h5 className="m-0 p-0">Collapsible Group Item #3</h5>
|
||||
</CButton>
|
||||
</CCardHeader>
|
||||
<CCollapse show={accordion === 2}>
|
||||
<CCardBody>
|
||||
3. Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
|
||||
richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor
|
||||
brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
|
||||
sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
|
||||
shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson
|
||||
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo.
|
||||
Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
|
||||
you probably havent heard of them accusamus labore sustainable VHS.
|
||||
</CCardBody>
|
||||
</CCollapse>
|
||||
</CCard>
|
||||
</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
|
||||
@ -13,7 +13,6 @@ const Paginations = () => {
|
||||
<DocsLink name="CPagination" />
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Default</h6>
|
||||
<CPagination>
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
@ -21,61 +20,98 @@ const Paginations = () => {
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
<br></br>
|
||||
|
||||
<h6>Small</h6>
|
||||
<CPagination
|
||||
size="sm"
|
||||
activePage={currentPage}
|
||||
pages={10}
|
||||
onActivePageChange={setCurrentPage}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<div className="d-md-down-none">
|
||||
<h6>Large</h6>
|
||||
<CPagination
|
||||
size="lg"
|
||||
activePage={currentPage}
|
||||
pages={10}
|
||||
onActivePageChange={setCurrentPage}
|
||||
/>
|
||||
<br></br>
|
||||
</div>
|
||||
|
||||
<div>currentPage: {currentPage}</div>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong> Pagination </strong>
|
||||
Pagination
|
||||
<small>with icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CPagination>
|
||||
<CPaginationItem aria-label="previous">
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem aria-label="next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Pagination
|
||||
<small>with icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CPagination ariaLabel="Page navigation example">
|
||||
<CPaginationItem ariaLabel="Previous" disabled>
|
||||
<span aria-hidden="true">«</span>
|
||||
</CPaginationItem>
|
||||
<CPaginationItem active>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem ariaLabel="Next">
|
||||
<span aria-hidden="true">»</span>
|
||||
</CPaginationItem>
|
||||
</CPagination>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Pagination
|
||||
<small>sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<CPagination size="lg" ariaLabel="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
<hr />
|
||||
<CPagination size="sm" ariaLabel="Page navigation example">
|
||||
<CPaginationItem>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Pagination
|
||||
<small>alignment</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>Left alignment (default)</h6>
|
||||
<CPagination activePage={currentPage} pages={10} onActivePageChange={setCurrentPage} />
|
||||
<br></br>
|
||||
|
||||
<h6>Center alignment</h6>
|
||||
<CPagination
|
||||
align="center"
|
||||
addListClass="some-class"
|
||||
activePage={currentPage}
|
||||
pages={10}
|
||||
onActivePageChange={setCurrentPage}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<h6>Right (end) alignment</h6>
|
||||
<CPagination
|
||||
align="end"
|
||||
activePage={currentPage}
|
||||
pages={10}
|
||||
onActivePageChange={setCurrentPage}
|
||||
/>
|
||||
<br></br>
|
||||
|
||||
<div>currentPage: {currentPage}</div>
|
||||
<CPagination className="justify-content-start" ariaLabel="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
<hr />
|
||||
<CPagination className="justify-content-center" ariaLabel="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
<hr />
|
||||
<CPagination className="justify-content-end" ariaLabel="Page navigation example">
|
||||
<CPaginationItem disabled>Previous</CPaginationItem>
|
||||
<CPaginationItem>1</CPaginationItem>
|
||||
<CPaginationItem>2</CPaginationItem>
|
||||
<CPaginationItem>3</CPaginationItem>
|
||||
<CPaginationItem>Next</CPaginationItem>
|
||||
</CPagination>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</>
|
||||
|
||||
@ -1,429 +0,0 @@
|
||||
import React from 'react'
|
||||
import { CButton, CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react-ts'
|
||||
import CIcon from '@coreui/icons-react'
|
||||
|
||||
const BrandButtons = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs="12">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Brand button</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>
|
||||
{' '}
|
||||
<code>size="sm"</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-facebook" />
|
||||
<span className="ms-2">Facebook</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-twitter" />
|
||||
<span className="ms-2">Twitter</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-linkedin" />
|
||||
<span className="ms-2">LinkedIn</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-flickr" />
|
||||
<span className="ms-2">Flickr</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-tumblr" />
|
||||
<span className="ms-2">Tumblr</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-xing" />
|
||||
<span className="ms-2">Xing</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-github btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-github" />
|
||||
<span className="ms-2">Github</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-stackoverflow" />
|
||||
<span className="ms-2">StackOverflow</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-youtube" />
|
||||
<span className="ms-2">YouTube</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-dribbble" />
|
||||
<span className="ms-2">Dribbble</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-instagram" />
|
||||
<span className="ms-2">Instagram</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-pinterest" />
|
||||
<span className="ms-2">Pinterest</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-vk" />
|
||||
<span className="ms-2">VK</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-yahoo" />
|
||||
<span className="ms-2">Yahoo</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-behance" />
|
||||
<span className="ms-2">Behance</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-reddit" />
|
||||
<span className="ms-2">Reddit</span>
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-vimeo" />
|
||||
<span className="ms-2">Vimeo</span>
|
||||
</CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<CButton className="btn-facebook btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-facebook" />
|
||||
<span className="ms-2">Facebook</span>
|
||||
</CButton>
|
||||
<CButton className="btn-twitter btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-twitter" />
|
||||
<span className="ms-2">Twitter</span>
|
||||
</CButton>
|
||||
<CButton className="btn-linkedin btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-linkedin" />
|
||||
<span className="ms-2">LinkedIn</span>
|
||||
</CButton>
|
||||
<CButton className="btn-flickr btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-flickr" />
|
||||
<span className="ms-2">Flickr</span>
|
||||
</CButton>
|
||||
<CButton className="btn-tumblr btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-tumblr" />
|
||||
<span className="ms-2">Tumblr</span>
|
||||
</CButton>
|
||||
<CButton className="btn-xing btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-xing" />
|
||||
<span className="ms-2">Xing</span>
|
||||
</CButton>
|
||||
<CButton className="btn-github btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-github" />
|
||||
<span className="ms-2">Github</span>
|
||||
</CButton>
|
||||
<CButton className="btn-stack-overflow btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-stackoverflow" />
|
||||
<span className="ms-2">StackOverflow</span>
|
||||
</CButton>
|
||||
<CButton className="btn-youtube btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-youtube" />
|
||||
<span className="ms-2">YouTube</span>
|
||||
</CButton>
|
||||
<CButton className="btn-dribbble btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-dribbble" />
|
||||
<span className="ms-2">Dribbble</span>
|
||||
</CButton>
|
||||
<CButton className="btn-instagram btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-instagram" />
|
||||
<span className="ms-2">Instagram</span>
|
||||
</CButton>
|
||||
<CButton className="btn-pinterest btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-pinterest" />
|
||||
<span className="ms-2">Pinterest</span>
|
||||
</CButton>
|
||||
<CButton className="btn-vk btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-vk" />
|
||||
<span className="ms-2">VK</span>
|
||||
</CButton>
|
||||
<CButton className="btn-yahoo btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-yahoo" />
|
||||
<span className="ms-2">Yahoo</span>
|
||||
</CButton>
|
||||
<CButton className="btn-behance btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-behance" />
|
||||
<span className="ms-2">Behance</span>
|
||||
</CButton>
|
||||
<CButton className="btn-reddit btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-reddit" />
|
||||
<span className="ms-2">Reddit</span>
|
||||
</CButton>
|
||||
<CButton className="btn-vimeo btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-vimeo" />
|
||||
<span className="ms-2">Vimeo</span>
|
||||
</CButton>
|
||||
</p>
|
||||
<h6>
|
||||
Size Large
|
||||
<small>
|
||||
{' '}
|
||||
<code>size="lg"</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-facebook" />
|
||||
<span className="ms-2">Facebook</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-twitter" />
|
||||
<span className="ms-2">Twitter</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-linkedin" />
|
||||
<span className="ms-2">LinkedIn</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-flickr" />
|
||||
<span className="ms-2">Flickr</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-tumblr" />
|
||||
<span className="ms-2">Tumblr</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-xing" />
|
||||
<span className="ms-2">Xing</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-github btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-github" />
|
||||
<span className="ms-2">Github</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-stackoverflow" />
|
||||
<span className="ms-2">StackOverflow</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-youtube" />
|
||||
<span className="ms-2">YouTube</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-dribbble" />
|
||||
<span className="ms-2">Dribbble</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-instagram" />
|
||||
<span className="ms-2">Instagram</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-pinterest" />
|
||||
<span className="ms-2">Pinterest</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-vk" />
|
||||
<span className="ms-2">VK</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-yahoo" />
|
||||
<span className="ms-2">Yahoo</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-behance" />
|
||||
<span className="ms-2">Behance</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-reddit" />
|
||||
<span className="ms-2">Reddit</span>
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-vimeo" />
|
||||
<span className="ms-2">Vimeo</span>
|
||||
</CButton>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
|
||||
<CCol xs="12">
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Brand button
|
||||
<small> only icons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<h6>
|
||||
Size Small
|
||||
<small>
|
||||
{' '}
|
||||
<code>size="sm"</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<CButton size="sm" className="btn-facebook btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-facebook" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-twitter btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-twitter" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-linkedin btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-linkedin" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-flickr btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-flickr" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-tumblr btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-tumblr" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-xing btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-xing" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-github btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-github" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-stack-overflow btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-stackoverflow" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-youtube btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-youtube" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-dribbble btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-dribbble" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-instagram btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-instagram" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-pinterest btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-pinterest" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-vk btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-vk" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-yahoo btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-yahoo" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-behance btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-behance" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-reddit btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-reddit" />
|
||||
</CButton>
|
||||
<CButton size="sm" className="btn-vimeo btn-brand me-1 mb-1">
|
||||
<CIcon size="sm" name="cib-vimeo" />
|
||||
</CButton>
|
||||
</p>
|
||||
<h6>Size Normal</h6>
|
||||
<p>
|
||||
<CButton className="btn-facebook btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-facebook" />
|
||||
</CButton>
|
||||
<CButton className="btn-twitter btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-twitter" />
|
||||
</CButton>
|
||||
<CButton className="btn-linkedin btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-linkedin" />
|
||||
</CButton>
|
||||
<CButton className="btn-flickr btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-flickr" />
|
||||
</CButton>
|
||||
<CButton className="btn-tumblr btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-tumblr" />
|
||||
</CButton>
|
||||
<CButton className="btn-xing btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-xing" />
|
||||
</CButton>
|
||||
<CButton className="btn-github btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-github" />
|
||||
</CButton>
|
||||
<CButton className="btn-stack-overflow btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-stackoverflow" />
|
||||
</CButton>
|
||||
<CButton className="btn-youtube btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-youtube" />
|
||||
</CButton>
|
||||
<CButton className="btn-dribbble btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-dribbble" />
|
||||
</CButton>
|
||||
<CButton className="btn-instagram btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-instagram" />
|
||||
</CButton>
|
||||
<CButton className="btn-pinterest btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-pinterest" />
|
||||
</CButton>
|
||||
<CButton className="btn-vk btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-vk" />
|
||||
</CButton>
|
||||
<CButton className="btn-yahoo btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-yahoo" />
|
||||
</CButton>
|
||||
<CButton className="btn-behance btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-behance" />
|
||||
</CButton>
|
||||
<CButton className="btn-reddit btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-reddit" />
|
||||
</CButton>
|
||||
<CButton className="btn-vimeo btn-brand me-1 mb-1">
|
||||
<CIcon name="cib-vimeo" />
|
||||
</CButton>
|
||||
</p>
|
||||
<h6>
|
||||
Size Large
|
||||
<small>
|
||||
{' '}
|
||||
<code>size="lg"</code>
|
||||
</small>
|
||||
</h6>
|
||||
<p>
|
||||
<CButton size="lg" className="btn-facebook btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-facebook" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-twitter btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-twitter" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-linkedin btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-linkedin" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-flickr btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-flickr" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-tumblr btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-tumblr" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-xing btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-xing" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-github btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-github" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-stack-overflow btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-stackoverflow" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-youtube btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-youtube" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-dribbble btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-dribbble" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-instagram btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-instagram" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-pinterest btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-pinterest" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-vk btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-vk" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-yahoo btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-yahoo" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-behance btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-behance" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-reddit btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-reddit" />
|
||||
</CButton>
|
||||
<CButton size="lg" className="btn-vimeo btn-brand me-1 mb-1">
|
||||
<CIcon size="lg" name="cib-vimeo" />
|
||||
</CButton>
|
||||
</p>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default BrandButtons
|
||||
@ -1,6 +1,5 @@
|
||||
import ButtonDropdowns from './ButtonDropdowns'
|
||||
import ButtonGroups from './ButtonGroups'
|
||||
import Buttons from './Buttons'
|
||||
import BrandButtons from './BrandButtons'
|
||||
|
||||
export { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons }
|
||||
export { ButtonDropdowns, ButtonGroups, Buttons }
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardGroup, CCardHeader } from '@coreui/react-ts'
|
||||
import { CCard, CCardBody, CCol, CCardHeader, CRow } from '@coreui/react-ts'
|
||||
import {
|
||||
CChartBar,
|
||||
CChartLine,
|
||||
@ -12,7 +12,8 @@ import { DocsLink } from 'src/reusable'
|
||||
|
||||
const Charts = () => {
|
||||
return (
|
||||
<CCardGroup columns className="cols-2">
|
||||
<CRow>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
Bar Chart
|
||||
@ -36,7 +37,8 @@ const Charts = () => {
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Doughnut Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -56,7 +58,8 @@ const Charts = () => {
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Line Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -82,7 +85,8 @@ const Charts = () => {
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Pie Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -102,7 +106,8 @@ const Charts = () => {
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Polar Area Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -133,11 +138,20 @@ const Charts = () => {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']}
|
||||
labels={[
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running',
|
||||
]}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
|
||||
</CCol>
|
||||
<CCol xs={6}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>Radar Chart</CCardHeader>
|
||||
<CCardBody>
|
||||
@ -172,11 +186,20 @@ const Charts = () => {
|
||||
enabled: true,
|
||||
},
|
||||
}}
|
||||
labels={['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running']}
|
||||
labels={[
|
||||
'Eating',
|
||||
'Drinking',
|
||||
'Sleeping',
|
||||
'Designing',
|
||||
'Coding',
|
||||
'Cycling',
|
||||
'Running',
|
||||
]}
|
||||
/>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCardGroup>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
58
yarn.lock
58
yarn.lock
@ -4742,6 +4742,13 @@ eslint-plugin-jsx-a11y@^6.3.1:
|
||||
jsx-ast-utils "^3.1.0"
|
||||
language-tags "^1.0.5"
|
||||
|
||||
eslint-plugin-prettier@^3.3.1:
|
||||
version "3.3.1"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.3.1.tgz#7079cfa2497078905011e6f82e8dd8453d1371b7"
|
||||
integrity sha512-Rq3jkcFY8RYeQLgk2cCwuc0P7SEFwDravPhsJZOQ5N4YI4DSg50NyqJ/9gdZHzQlHf8MvafSesbNJCcP/FF6pQ==
|
||||
dependencies:
|
||||
prettier-linter-helpers "^1.0.0"
|
||||
|
||||
eslint-plugin-react-hooks@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz"
|
||||
@ -5096,6 +5103,11 @@ fast-deep-equal@^3.1.1:
|
||||
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
|
||||
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
|
||||
|
||||
fast-diff@^1.1.2:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
|
||||
integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
|
||||
|
||||
fast-glob@^3.1.1:
|
||||
version "3.2.5"
|
||||
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz"
|
||||
@ -5440,6 +5452,17 @@ functions-have-names@^1.2.1:
|
||||
resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.2.tgz"
|
||||
integrity sha512-bLgc3asbWdwPbx2mNk2S49kmJCuQeu0nfmaOgbs8WIyzzkw3r4htszdIi9Q9EMezDPTYuJx2wvjZ/EwgAthpnA==
|
||||
|
||||
gatsby-plugin-sitemap@^3.2.0:
|
||||
version "3.2.0"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-plugin-sitemap/-/gatsby-plugin-sitemap-3.2.0.tgz#7a17a95ca5b7bc0fe1c9b8661cdbf326e7cd4b17"
|
||||
integrity sha512-UIeOClN5o7eoARmLQY8+ad0hE85cJTCDFvnNMmbJ1SzuAyldgHep2GVDw+YbTnPCkP7rXIZ0aYPFhugPOa/Zqw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.5"
|
||||
common-tags "^1.8.0"
|
||||
minimatch "^3.0.4"
|
||||
pify "^3.0.0"
|
||||
sitemap "^1.13.0"
|
||||
|
||||
gauge@~2.7.3:
|
||||
version "2.7.4"
|
||||
resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz"
|
||||
@ -8604,6 +8627,11 @@ pify@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz"
|
||||
integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
|
||||
|
||||
pify@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176"
|
||||
integrity sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=
|
||||
|
||||
pify@^4.0.1:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/pify/-/pify-4.0.1.tgz"
|
||||
@ -9363,6 +9391,18 @@ prepend-http@^1.0.0:
|
||||
resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz"
|
||||
integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
|
||||
|
||||
prettier-linter-helpers@^1.0.0:
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
|
||||
integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
|
||||
dependencies:
|
||||
fast-diff "^1.1.2"
|
||||
|
||||
prettier@2.2.1:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.2.1.tgz#795a1a78dd52f073da0cd42b21f9c91381923ff5"
|
||||
integrity sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q==
|
||||
|
||||
pretty-bytes@^5.3.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.5.0.tgz"
|
||||
@ -10627,6 +10667,14 @@ sisteransi@^1.0.5:
|
||||
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz"
|
||||
integrity sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==
|
||||
|
||||
sitemap@^1.13.0:
|
||||
version "1.13.0"
|
||||
resolved "https://registry.yarnpkg.com/sitemap/-/sitemap-1.13.0.tgz#569cbe2180202926a62a266cd3de09c9ceb43f83"
|
||||
integrity sha1-Vpy+IYAgKSamKiZs094Jyc60P4M=
|
||||
dependencies:
|
||||
underscore "^1.7.0"
|
||||
url-join "^1.1.0"
|
||||
|
||||
slash@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz"
|
||||
@ -11576,6 +11624,11 @@ uglify-js@^3.1.4:
|
||||
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.12.5.tgz"
|
||||
integrity sha512-SgpgScL4T7Hj/w/GexjnBHi3Ien9WS1Rpfg5y91WXMj9SY997ZCQU76mH4TpLwwfmMvoOU8wiaRkIf6NaH3mtg==
|
||||
|
||||
underscore@^1.7.0:
|
||||
version "1.12.1"
|
||||
resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.12.1.tgz#7bb8cc9b3d397e201cf8553336d262544ead829e"
|
||||
integrity sha512-hEQt0+ZLDVUMhebKxL4x1BTtDY7bavVofhZ9KZ4aI26X9SRaE+Y3m83XUL1UP2jn8ynjndwCCpEHdUG+9pP1Tw==
|
||||
|
||||
unicode-canonical-property-names-ecmascript@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz"
|
||||
@ -11685,6 +11738,11 @@ urix@^0.1.0:
|
||||
resolved "https://registry.yarnpkg.com/urix/-/urix-0.1.0.tgz"
|
||||
integrity sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=
|
||||
|
||||
url-join@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/url-join/-/url-join-1.1.0.tgz#741c6c2f4596c4830d6718460920d0c92202dc78"
|
||||
integrity sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg=
|
||||
|
||||
url-loader@4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/url-loader/-/url-loader-4.1.1.tgz"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user