gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: add reusable folder with DocsLink component

Browse Source
This commit is contained in:
woothu 2020-08-12 15:50:40 +02:00
parent be5d1f0618
commit eef84dbbd7
38 changed files with 207 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
jsconfig.json Normal file
View File

@ -0,0 +1,6 @@
{
"compilerOptions": {
"baseUrl": "."
},
"include": ["src"]
}

28
src/reusable/DocsLink.js Normal file
View File

@ -0,0 +1,28 @@
import React from 'react'
import { CLink } from '@coreui/react'
const DocsLink = props => {
const {
name,
text,
...rest
} = props
const href = name ? `https://coreui.io/react/docs/components/${name}` : props.href
return (
<div className="card-header-actions">
<CLink
{...rest}
href={href}
rel="noreferrer noopener"
target="_blank"
className="card-header-action"
>
<small className="text-muted">{ text || 'docs' }</small>
</CLink>
</div>
)
}
export default React.memo(DocsLink)

5
src/reusable/index.js Normal file
View File

@ -0,0 +1,5 @@
import DocsLink from './DocsLink'
export {
DocsLink
}

12
src/views/base/breadcrumbs/Breadcrumbs.js
View File

@ -10,6 +10,7 @@ import {
CCol,
CRow
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import routes from '../../../routes'
const Breadcrumbs = () => {
@ -19,16 +20,7 @@ const Breadcrumbs = () => {
<CCard>
<CCardHeader>
Bootstrap Breadcrumb
<div className="card-header-actions">
<a
href="https://coreui.github.io/components/breadcrumbs/"
rel="noreferrer noopener"
target="_blank"
className="card-header-action"
>
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CBreadcrumb"/>
</CCardHeader>
<CCardBody>
<h6>CBreadcrumbRouter wrapper component</h6>

3
src/views/base/cards/Cards.js
View File

@ -13,6 +13,8 @@ import {
CLink
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
const Cards = () => {
const [collapsed, setCollapsed] = React.useState(true)
@ -25,6 +27,7 @@ const Cards = () => {
<CCard>
<CCardHeader>
Card title
<DocsLink name="CCard"/>
</CCardHeader>
<CCardBody>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut

2
src/views/base/carousels/Carousels.js
View File

@ -12,6 +12,7 @@ import {
CCol,
CRow
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const slides = [
'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
@ -28,6 +29,7 @@ const Carousels = () => {
<CCard>
<CCardHeader>
Carousel with controls
<DocsLink name="CCarousel"/>
</CCardHeader>
<CCardBody>
<CCarousel>

13
src/views/base/collapses/Collapses.js
View File

@ -10,6 +10,7 @@ import {
CFade,
CRow
} from '@coreui/react';
import { DocsLink } from 'src/reusable'
const Collapses = () => {
@ -51,11 +52,7 @@ const Collapses = () => {
<CCard>
<CCardHeader>
Collapse
<div className="card-header-actions">
<a href="https://coreui.github.io/components/collapse/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CCollapse"/>
</CCardHeader>
<CCollapse show={collapse}>
<CCardBody>
@ -129,11 +126,7 @@ const Collapses = () => {
<CCard>
<CCardHeader>
Fade
<div className="card-header-actions">
<a href="https://coreui.github.io/components/fade/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CFade"/>
</CCardHeader>
<CCardBody>
<CFade timeout={300} in={fade} tag="h5" className="mt-3">

2
src/views/base/forms/BasicForms.js
View File

@ -31,6 +31,7 @@ import {
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
const BasicForms = () => {
const [collapsed, setCollapsed] = React.useState(true)
@ -44,6 +45,7 @@ const BasicForms = () => {
<CCardHeader>
Credit Card
<small> Form</small>
<DocsLink name="-Input"/>
</CCardHeader>
<CCardBody>
<CRow>

20
src/views/base/index.js Normal file
View File

@ -0,0 +1,20 @@
import Breadcrumbs from './Breadcrumbs';
import Cards from './Cards';
import Carousels from './Carousels';
import Collapses from './Collapses';
import Dropdowns from './Dropdowns';
import Jumbotrons from './Jumbotrons';
import ListGroups from './ListGroups';
import Navbars from './Navbars';
import Navs from './Navs';
import Paginations from './Paginations';
import Popovers from './Popovers';
import ProgressBar from './ProgressBar';
import Switches from './Switches';
import Tabs from './Tabs';
import Tooltips from './Tooltips';
export {
Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tabs, Tooltips, Paginations,
};

7
src/views/base/jumbotrons/Jumbotrons.js
View File

@ -11,6 +11,7 @@ import {
CEmbed,
CEmbedItem
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Jumbotrons = () => {
@ -21,11 +22,7 @@ const Jumbotrons = () => {
<CCard>
<CCardHeader>
Jumbotron
<div className="card-header-actions">
<a href="https://coreui.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CJumbotron"/>
</CCardHeader>
<CCardBody>
<CJumbotron className="border">

12
src/views/base/list-groups/ListGroups.js
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { useState } from 'react'
import {
CBadge,
CCard,
@ -10,7 +10,9 @@ import {
CRow,
CTabContent,
CTabPane
} from '@coreui/react';
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ListGroups = () => {
const [activeTab, setActiveTab] = useState(1)
@ -23,11 +25,7 @@ const ListGroups = () => {
<CCard>
<CCardHeader>
List group
<div className="card-header-actions">
<a href="https://coreui.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CListGroup"/>
</CCardHeader>
<CCardBody>
<CListGroup>

3
src/views/base/navbars/Navbars.js
View File

@ -19,7 +19,7 @@ import {
CButton,
CImg
} from '@coreui/react'
// import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
const CNavbars = () => {
const [isOpen, setIsOpen] = useState(false)
@ -32,6 +32,7 @@ const CNavbars = () => {
<CCard>
<CCardHeader>
CNavbar
<DocsLink name="CNavbar"/>
</CCardHeader>
<CCardBody>
<CNavbar expandable="sm" color="info" >

7
src/views/base/navs/Navs.js
View File

@ -13,6 +13,7 @@ import {
CNavItem,
CNavLink
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Navs = () => {
return (
@ -22,11 +23,7 @@ const Navs = () => {
<CCard>
<CCardHeader>
Navs
<div className="card-header-actions">
<a href="https://coreui.github.io/components/navs/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CNav"/>
</CCardHeader>
<CCardBody>
<small>List Based</small>

8
src/views/base/paginations/Pagnations.js
View File

@ -5,6 +5,8 @@ import {
CCardHeader,
CPagination
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Paginations = () => {
const [currentPage, setCurrentPage] = useState(2)
@ -14,11 +16,7 @@ const Paginations = () => {
<CCard>
<CCardHeader>
Pagination
<div className="card-header-actions">
<a href="https://coreui.github.io/components/pagination/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CPagination"/>
</CCardHeader>
<CCardBody>
<h6>Default</h6>

12
src/views/base/popovers/Popovers.js
View File

@ -9,6 +9,7 @@ import {
CCol,
CLink
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Popovers = () => {
const placements = [
@ -23,16 +24,7 @@ const Popovers = () => {
<CCard>
<CCardHeader>
Popovers
<div className="card-header-actions">
<a
href="https://coreui.github.io/components/popovers/"
rel="noreferrer noopener"
target="_blank"
className="card-header-action"
>
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CPopover"/>
</CCardHeader>
<CCardBody>
{/*eslint-disable-next-line*/}

7
src/views/base/progress-bar/ProgressBar.js
View File

@ -6,6 +6,7 @@ import {
CProgress,
CProgressBar
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ProgressBar = () => {
return (
@ -13,11 +14,7 @@ const ProgressBar = () => {
<CCard>
<CCardHeader>
Progress
<div className="card-header-actions">
<a href="https://coreui.github.io/components/progress/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CProgressBar"/>
</CCardHeader>
<CCardBody>
<CProgress className="mb-3" />

2
src/views/base/switches/Switches.js
View File

@ -7,6 +7,7 @@ import {
CRow,
CSwitch
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Switches = () => {
return (
@ -15,6 +16,7 @@ const Switches = () => {
<CCard>
<CCardHeader>
3d Switch
<DocsLink name="CSwitch"/>
</CCardHeader>
<CCardBody>
<CSwitch className={'mx-1'} variant={'3d'} color={'primary'} defaultChecked onChange={(e)=>console.log(e.target.checked)}/>

2
src/views/base/tables/Tables.js
View File

@ -8,6 +8,7 @@ import {
CDataTable,
CRow
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
import usersData from '../../users/UsersData'
@ -30,6 +31,7 @@ const Tables = () => {
<CCard>
<CCardHeader>
Simple Table
<DocsLink name="CModal"/>
</CCardHeader>
<CCardBody>
<CDataTable

2
src/views/base/tabs/Tabs.js
View File

@ -13,6 +13,7 @@ import {
CCardHeader
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
const Tabs = () => {
const [active, setActive] = useState(1)
@ -24,6 +25,7 @@ const Tabs = () => {
<CCard>
<CCardHeader>
Index indentifiers
<DocsLink name="CTabs"/>
</CCardHeader>
<CCardBody>
<CTabs>

12
src/views/base/tooltips/Tooltips.js
View File

@ -9,6 +9,7 @@ import {
CCol,
CLink
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Tooltips = () => {
const placements = [
@ -23,16 +24,7 @@ const Tooltips = () => {
<CCard>
<CCardHeader>
Tooltips
<div className="card-header-actions">
<a
href="https://coreui.github.io/components/tooltips/"
rel="noreferrer noopener"
target="_blank"
className="card-header-action"
>
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CTooltip"/>
</CCardHeader>
<CCardBody>
{/*eslint-disable-next-line*/}

7
src/views/buttons/button-dropdowns/ButtonDropdowns.js
View File

@ -18,6 +18,7 @@ import {
CInput,
CInputCheckbox
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ButtonDropdowns = () => {
return (
@ -26,11 +27,7 @@ const ButtonDropdowns = () => {
<CCard>
<CCardHeader>
Dropdowns
<div className="card-header-actions">
<a href="https://coreui.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CDropdown"/>
</CCardHeader>
<CCardBody>

13
src/views/buttons/button-groups/ButtonGroups.js
View File

@ -18,6 +18,7 @@ import {
CRow,
CCallout
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const ButtonGroups = () => {
return (
@ -26,11 +27,7 @@ const ButtonGroups = () => {
<CCard>
<CCardHeader>
Callout
<div className="card-header-actions">
<a href="https://coreui.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CCallout"/>
</CCardHeader>
<CCardBody>
<CCallout color="primary">
@ -42,11 +39,7 @@ const ButtonGroups = () => {
<CCard>
<CCardHeader>
Button Group
<div className="card-header-actions">
<a href="https://coreui.github.io/components/button-group/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="-Button/#CButtonGroup"/>
</CCardHeader>
<CCardBody>
<CButtonGroup>

2
src/views/buttons/buttons/Buttons.js
View File

@ -8,6 +8,7 @@ import {
CRow
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { DocsLink } from 'src/reusable'
const Buttons = () => {
return (
@ -15,6 +16,7 @@ const Buttons = () => {
<CCard>
<CCardHeader>
Standard Buttons
<DocsLink name="-Button"/>
</CCardHeader>
<CCardBody>
<CRow className="align-items-center">

8
src/views/buttons/index.js Normal file
View File

@ -0,0 +1,8 @@
import ButtonDropdowns from './ButtonDropdowns'
import ButtonGroups from './ButtonGroups'
import Buttons from './Buttons'
import BrandButtons from './BrandButtons'
export {
ButtonDropdowns, ButtonGroups, Buttons, BrandButtons
}

1
src/views/charts/ChartBarSimple.js
View File

@ -48,7 +48,6 @@ const ChartBarSimple = props => {
return (
<CChartBar
{...attributes}
type="bar"
datasets={defaultDatasets}
options={defaultOptions}
labels={label}

1
src/views/charts/ChartLineSimple.js
View File

@ -123,7 +123,6 @@ const ChartLineSimple = props => {
return (
<CChartLine
{...attributes}
type="line"
datasets={computedDatasets}
options={computedOptions}
labels={label}

13
src/views/charts/Charts.js
View File

@ -13,6 +13,7 @@ import {
CChartPie,
CChartPolarArea
} from '@coreui/react-chartjs'
import { DocsLink } from 'src/reusable'
const Charts = () => {
@ -21,15 +22,10 @@ const Charts = () => {
<CCard>
<CCardHeader>
Bar Chart
<div className="card-header-actions">
<a href="http://www.chartjs.org" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink href="http://www.chartjs.org"/>
</CCardHeader>
<CCardBody>
<CChartBar
type="bar"
datasets={[
{
label: 'GitHub Commits',
@ -53,7 +49,6 @@ const Charts = () => {
</CCardHeader>
<CCardBody>
<CChartDoughnut
type="doughnut"
datasets={[
{
backgroundColor: [
@ -81,7 +76,6 @@ const Charts = () => {
</CCardHeader>
<CCardBody>
<CChartLine
type="line"
datasets={[
{
label: 'Data One',
@ -110,7 +104,6 @@ const Charts = () => {
</CCardHeader>
<CCardBody>
<CChartPie
type="pie"
datasets={[
{
backgroundColor: [
@ -138,7 +131,6 @@ const Charts = () => {
</CCardHeader>
<CCardBody>
<CChartPolarArea
type="polarArea"
datasets={[
{
label: 'My First dataset',
@ -179,7 +171,6 @@ const Charts = () => {
</CCardHeader>
<CCardBody>
<CChartRadar
type="radar"
datasets={[
{
label: '2019',

9
src/views/icons/brands/Brands.js
View File

@ -2,6 +2,7 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { brandSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable'
const toKebabCase = (str) => {
return str.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
@ -20,12 +21,8 @@ const CoreUIIcons = () => {
return (
<CCard>
<CCardHeader>
Brand Icons / as CIcon{' '}
<div className="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">Github</small>
</a>
</div>
Brand Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
</CCardHeader>
<CCardBody>
<CRow className="text-center">

7
src/views/icons/coreui-icons/CoreUIIcons.js
View File

@ -2,17 +2,14 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { freeSet } from '@coreui/icons'
import { getIconsView } from '../brands/Brands.js'
import { DocsLink } from 'src/reusable'
const CoreUIIcons = () => {
return (
<CCard>
<CCardHeader>
Free Icons / as CIcon{' '}
<div className="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">Github</small>
</a>
</div>
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
</CCardHeader>
<CCardBody>
<CRow className="text-center">

9
src/views/icons/flags/Flags.js
View File

@ -2,17 +2,14 @@ import React from 'react'
import { CCard, CCardBody, CCardHeader, CRow } from '@coreui/react'
import { getIconsView } from '../brands/Brands.js'
import { flagSet } from '@coreui/icons'
import { DocsLink } from 'src/reusable'
const CoreUIIcons = () => {
return (
<CCard>
<CCardHeader>
Flag Icons / as CIcon{' '}
<div className="card-header-actions">
<a href="https://github.com/coreui/coreui-icons" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">Github</small>
</a>
</div>
Flag Icons
<DocsLink href="https://github.com/coreui/coreui-icons" text="GitHub"/>
</CCardHeader>
<CCardBody>
<CRow className="text-center">

7
src/views/icons/index.js Normal file
View File

@ -0,0 +1,7 @@
import CoreUIIcons from './coreui-icons';
import Flags from './flags';
import Brands from './brands';
export {
CoreUIIcons, Flags, Brands
};

7
src/views/notifications/alerts/Alerts.js
View File

@ -10,6 +10,7 @@ import {
CProgress,
CRow
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Alerts = () => {
const [visible, setVisible] = React.useState(10)
@ -21,11 +22,7 @@ const Alerts = () => {
<CCard>
<CCardHeader>
Alerts
<div className="card-header-actions">
<a href="https://coreui.github.io/components/alerts/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CAlert"/>
</CCardHeader>
<CCardBody>
<CAlert color="primary">

7
src/views/notifications/badges/Badges.js
View File

@ -9,6 +9,7 @@ import {
CCol,
CRow
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Badges = () => {
return (
@ -17,11 +18,7 @@ const Badges = () => {
<CCard>
<CCardHeader>
Badges
<div className="card-header-actions">
<a href="https://coreui.github.io/components/badge/" rel="noreferrer noopener" target="_blank" className="card-header-action">
<small className="text-muted">docs</small>
</a>
</div>
<DocsLink name="CBadge"/>
</CCardHeader>
<CCardBody>
<h1>Example heading <CBadge color="secondary">New</CBadge></h1>

8
src/views/notifications/index.js Normal file
View File

@ -0,0 +1,8 @@
import Alerts from './Alerts';
import Badges from './Badges';
import Modals from './Modals';
import Toaster from './Toaster';
export {
Alerts, Badges, Modals, Toaster
};

15
src/views/notifications/modals/Modals.js
View File

@ -12,6 +12,7 @@ import {
CModalTitle,
CRow
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Modals = () => {
@ -30,25 +31,17 @@ const Modals = () => {
<CCard>
<CCardHeader>
Bootstrap Modals
<DocsLink name="CModal"/>
</CCardHeader>
<CCardBody>
<CButton
onClick={() => setModal(!modal)}
className="mr-1"
color="secondary"
>Launch demo modal</CButton>
<CButton
onClick={() => setLarge(!large)}
className="mr-1"
color="secondary"
>
<CButton onClick={() => setLarge(!large)} className="mr-1">
Launch large modal
</CButton>
<CButton
onClick={() => setSmall(!large)}
className="mr-1"
color="secondary"
>
<CButton onClick={() => setSmall(!large)} className="mr-1">
Launch small modal
</CButton>
<CModal

2
src/views/notifications/toaster/Toaster.js
View File

@ -17,6 +17,7 @@ import {
CFormGroup,
CLabel
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Toaster = () => {
@ -65,6 +66,7 @@ const Toaster = () => {
<CCard>
<CCardHeader>
Toasts.
<DocsLink name="-Toast"/>
</CCardHeader>
<CCardBody>
<CContainer>

35
src/views/theme/colors/Colors.js
View File

@ -1,7 +1,15 @@
import React, { useEffect, useState, createRef } from 'react'
import classNames from 'classnames'
import { CRow, CCol } from '@coreui/react'
import {
CRow,
CCol,
CCard,
CCardHeader,
CCardBody
} from '@coreui/react'
import { rgbToHex } from '@coreui/utils'
import { DocsLink } from 'src/reusable'
const ThemeView = () => {
const [color, setColor] = useState('rgb(255, 255, 255)')
@ -43,11 +51,12 @@ const ThemeColor = ({className, children}) => {
const Colors = () => {
return (
<>
<div className="card">
<div className="card-header">
<CCard>
<CCardHeader>
Theme colors
</div>
<div className="card-body">
<DocsLink href="https://coreui.io/docs/utilities/colors/"/>
</CCardHeader>
<CCardBody>
<CRow>
<ThemeColor className="bg-primary">
<h6>Brand Primary Color</h6>
@ -74,13 +83,13 @@ const Colors = () => {
<h6>Brand Dark Color</h6>
</ThemeColor>
</CRow>
</div>
</div>
<div className="card">
<div className="card-header">
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Grays
</div>
<div className="card-body">
</CCardHeader>
<CCardBody>
<CRow className="mb-3">
<ThemeColor className="bg-gray-100">
<h6>Gray 100 Color</h6>
@ -110,8 +119,8 @@ const Colors = () => {
<h6>Gray 900 Color</h6>
</ThemeColor>
</CRow>
</div>
</div>
</CCardBody>
</CCard>
</>
)
}

66
src/views/theme/typography/Typography.js
View File

@ -1,13 +1,20 @@
import React from 'react'
import {
CCard,
CCardHeader,
CCardBody
} from '@coreui/react'
import { DocsLink } from 'src/reusable'
const Typography = () => {
return (
<>
<div className="card">
<div className="card-header">
<CCard>
<CCardHeader>
Headings
</div>
<div className="card-body">
<DocsLink href="https://coreui.io/docs/content/typography/"/>
</CCardHeader>
<CCardBody>
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<table className="table">
<thead>
@ -55,15 +62,18 @@ const Typography = () => {
</tr>
</tbody>
</table>
</div>
</div>
<div className="card">
<div className="card-header">
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Headings
</div>
<div className="card-body">
<p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you
want to match the font styling of a heading but cannot use the associated HTML element.</p>
</CCardHeader>
<CCardBody>
<p><code className="highlighter-rouge">.h1</code> through
<code className="highlighter-rouge">.h6</code>
classes are also available, for when you
want to match the font styling of a heading but cannot use the
associated HTML element.</p>
<div className="bd-example">
<p className="h1">h1. Bootstrap heading</p>
<p className="h2">h2. Bootstrap heading</p>
@ -72,9 +82,9 @@ const Typography = () => {
<p className="h5">h5. Bootstrap heading</p>
<p className="h6">h6. Bootstrap heading</p>
</div>
</div>
</div>
<div className="card">
</CCardBody>
</CCard>
<CCard>
<div className="card-header">
Display headings
</div>
@ -100,12 +110,12 @@ const Typography = () => {
</table>
</div>
</div>
</div>
<div className="card">
<div className="card-header">
</CCard>
<CCard>
<CCardHeader>
Inline text elements
</div>
<div className="card-body">
</CCardHeader>
<CCardBody>
<p>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 <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<div className="bd-example">
@ -124,13 +134,13 @@ const Typography = () => {
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
</div>
</div>
<div className="card">
<div className="card-header">
</CCardBody>
</CCard>
<CCard>
<CCardHeader>
Description list alignment
</div>
<div className="card-body">
</CCardHeader>
<CCardBody>
<p>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 className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<div className="bd-example">
@ -159,8 +169,8 @@ const Typography = () => {
</dd>
</dl>
</div>
</div>
</div>
</CCardBody>
</CCard>
</>
)
}