Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit cc45282

Browse filesBrowse files
mrholekmrholek
committed
docs: update documentation
1 parent d672653 commit cc45282
Copy full SHA for cc45282

File tree

Expand file treeCollapse file tree

11 files changed

+214
-86
lines changed
Filter options
Expand file treeCollapse file tree

11 files changed

+214
-86
lines changed

‎packages/docs/content/4.2/templates.mdx

Copy file name to clipboard
+91Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: React Templates
3+
name: React Templates
4+
description: Develop modern, beautiful, and responsive applications in half the time with high-performing and easy-to-customize react admin panels to cover any requirement.
5+
menu: Templates
6+
route: /templates
7+
---
8+
9+
import {
10+
CCard,
11+
CCardBody,
12+
CCardSubtitle,
13+
CCardTitle,
14+
CCol,
15+
CImage,
16+
CLink,
17+
CRow
18+
} from '@coreui/react/src/index'
19+
20+
## React Admin & Dashboard Templates
21+
22+
Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI for React.js, and CoreUI PRO for React.js
23+
24+
<CRow>
25+
<CCol md={6}>
26+
<CCard className="mb-4">
27+
<CCardBody>
28+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/react/#compare" target="_blank">
29+
<CCardTitle>Free React Admin Template</CCardTitle>
30+
<CCardSubtitle className="mb-3 text-muted">Default Theme</CCardSubtitle>
31+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_free_1440.webp" alt=""/>
32+
</CLink>
33+
</CCardBody>
34+
</CCard>
35+
</CCol>
36+
<CCol md={6}>
37+
<CCard className="mb-4">
38+
<CCardBody>
39+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=default-v3" target="_blank">
40+
<CCardTitle>React Dashboard Template</CCardTitle>
41+
<CCardSubtitle className="mb-3 text-muted">Default Theme v3</CCardSubtitle>
42+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_v3_1440.webp" alt=""/>
43+
</CLink>
44+
</CCardBody>
45+
</CCard>
46+
</CCol>
47+
<CCol md={6}>
48+
<CCard className="mb-4">
49+
<CCardBody>
50+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=light-v3" target="_blank">
51+
<CCardTitle>React Dashboard Template</CCardTitle>
52+
<CCardSubtitle className="mb-3 text-muted">Light Theme v3</CCardSubtitle>
53+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_v3_1440.webp" alt=""/>
54+
</CLink>
55+
</CCardBody>
56+
</CCard>
57+
</CCol>
58+
<CCol md={6}>
59+
<CCard className="mb-4">
60+
<CCardBody>
61+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=default" target="_blank">
62+
<CCardTitle>React Dashboard Template</CCardTitle>
63+
<CCardSubtitle className="mb-3 text-muted">Default Theme</CCardSubtitle>
64+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_default_1440.webp" alt=""/>
65+
</CLink>
66+
</CCardBody>
67+
</CCard>
68+
</CCol>
69+
<CCol md={6}>
70+
<CCard className="mb-4">
71+
<CCardBody>
72+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=light" target="_blank">
73+
<CCardTitle>React Dashboard Template</CCardTitle>
74+
<CCardSubtitle className="mb-3 text-muted">Light Theme</CCardSubtitle>
75+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_light_1440.webp" alt=""/>
76+
</CLink>
77+
</CCardBody>
78+
</CCard>
79+
</CCol>
80+
<CCol md={6}>
81+
<CCard className="mb-4">
82+
<CCardBody>
83+
<CLink className="text-decoration-none text-reset" href="https://coreui.io/product/react-dashboard-template/?theme=dark" target="_blank">
84+
<CCardTitle>React Dashboard Template</CCardTitle>
85+
<CCardSubtitle className="mb-3 text-muted">Dark Theme</CCardSubtitle>
86+
<CImage className="rounded shadow-sm" fluid src="https://coreui.io/images/templates/coreui_pro_dark_1440.webp" alt=""/>
87+
</CLink>
88+
</CCardBody>
89+
</CCard>
90+
</CCol>
91+
</CRow>

‎packages/docs/package.json

Copy file name to clipboardExpand all lines: packages/docs/package.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
},
2929
"dependencies": {
3030
"@coreui/chartjs": "^3.0.0",
31-
"@coreui/coreui": "^4.1.6",
31+
"@coreui/coreui": "^4.2.0",
3232
"@coreui/icons": "^2.1.0",
3333
"@coreui/icons-react": "^2.0.0",
3434
"@coreui/react-chartjs": "^2.0.0",

‎packages/docs/src/components/Ads.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/components/Ads.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const Ads: FC = ({ code, placement }: { code: string; placement: string }) => {
1313
}
1414
}, [])
1515

16-
return <div id="carbonads" className="my-3" ref={ref} />
16+
return <div ref={ref} />
1717
}
1818

1919
Ads.displayName = 'Ads'

‎packages/docs/src/components/CodeBlock.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/components/CodeBlock.tsx
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const CodeBlock: FC = ({ children }) => {
99
: 'jsx'
1010

1111
return (
12-
<div className="code mb-4" style={{ maxHeight: '500px', overflow: 'scroll' }}>
12+
<div className="code mb-4">
1313
<Highlight {...defaultProps} theme={undefined} code={_children?.trim()} language={language}>
1414
{({ className, style, tokens, getLineProps, getTokenProps }) => (
1515
<pre className={className} style={{ ...style }}>

‎packages/docs/src/components/Header.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/components/Header.tsx
+1-22Lines changed: 1 addition & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,14 @@
11
import React, { FC } from 'react'
2-
import GitHubButton from 'react-github-btn'
32

43
import CIcon from '@coreui/icons-react'
54
import { cibGithub, cibTwitter, cilCloudDownload, cilMenu } from '@coreui/icons'
6-
import {
7-
CAlert,
8-
CButton,
9-
CHeader,
10-
CHeaderNav,
11-
CHeaderToggler,
12-
CNavItem,
13-
} from '@coreui/react/src/index'
5+
import { CButton, CHeader, CHeaderNav, CHeaderToggler, CNavItem } from '@coreui/react/src/index'
146

157
import { myContext } from './../templates/Docs'
168

179
const Header: FC = () => {
1810
return (
1911
<>
20-
<CAlert color="light" className="d-flex justify-content-center rounded-0 border-bottom mb-0">
21-
<span className="me-3">
22-
If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️
23-
</span>
24-
<GitHubButton
25-
href="https://github.com/coreui/coreui-react"
26-
data-size="large"
27-
aria-label="Star coreui/coreui-react on GitHub"
28-
>
29-
Star
30-
</GitHubButton>
31-
<span className="ms-3">🙏</span>
32-
</CAlert>
3312
<myContext.Consumer>
3413
{(context) => (
3514
<CHeader className="mb-5" position="sticky">

‎packages/docs/src/components/ScssDocs.tsx

Copy file name to clipboard
+30Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { FC } from 'react'
2+
import Highlight, { defaultProps } from 'prism-react-renderer'
3+
4+
const ScssDocs: FC = ({ file, capture }: { file?: string; capture?: string }) => {
5+
const _file = file
6+
const captureStart = `scss-docs-start ${capture}`
7+
const captureEnd = `scss-docs-end ${capture}`
8+
const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
9+
const code = re.exec(_file)
10+
11+
return (
12+
<Highlight {...defaultProps} code={code[1]} language="scss">
13+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
14+
<pre className={className} style={style}>
15+
{tokens.map((line, i) => (
16+
<div {...getLineProps({ line, key: i })}>
17+
{line.map((token, key) => (
18+
<span {...getTokenProps({ token, key })} />
19+
))}
20+
</div>
21+
))}
22+
</pre>
23+
)}
24+
</Highlight>
25+
)
26+
}
27+
28+
ScssDocs.displayName = 'ScssDocs'
29+
30+
export default ScssDocs

‎packages/docs/src/components/index.ts

Copy file name to clipboardExpand all lines: packages/docs/src/components/index.ts
+2-1Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ import CodeBlock from './CodeBlock'
33
import Example from './Example'
44
import Footer from './Footer'
55
import Header from './Header'
6+
import ScssDocs from './ScssDocs'
67
import Seo from './Seo'
78
import Sidebar from './Sidebar'
89
import { SidebarNav } from './SidebarNav'
910
import Toc from './Toc'
1011

11-
export { Ads, CodeBlock, Example, Footer, Header, Seo, Sidebar, SidebarNav, Toc }
12+
export { Ads, CodeBlock, Example, Footer, Header, ScssDocs, Seo, Sidebar, SidebarNav, Toc }

‎packages/docs/src/nav.tsx

Copy file name to clipboardExpand all lines: packages/docs/src/nav.tsx
+23-4Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -228,14 +228,14 @@ const nav = [
228228
name: 'Modal',
229229
to: '/components/modal/',
230230
},
231-
{
232-
name: 'Navs & Tabs',
233-
to: '/components/navs-tabs/',
234-
},
235231
{
236232
name: 'Navbar',
237233
to: '/components/navbar/',
238234
},
235+
{
236+
name: 'Navs & Tabs',
237+
to: '/components/navs-tabs/',
238+
},
239239
{
240240
name: 'Offcanvas',
241241
to: '/components/offcanvas/',
@@ -303,6 +303,25 @@ const nav = [
303303
},
304304
],
305305
},
306+
{
307+
name: 'Templates',
308+
to: '/templates/',
309+
icon: (
310+
<CIcon
311+
customClassName="nav-icon text-primary"
312+
icon={[
313+
'512 512',
314+
'<path fill="var(--ci-primary-color, currentColor)" d="M472,232H424V120a24.028,24.028,0,0,0-24-24H40a24.028,24.028,0,0,0-24,24V366a24.028,24.028,0,0,0,24,24H212v50H152v32H304V440H244V390h92v58a24.027,24.027,0,0,0,24,24H472a24.027,24.027,0,0,0,24-24V256A24.027,24.027,0,0,0,472,232ZM336,256V358H48V128H392V232H360A24.027,24.027,0,0,0,336,256ZM464,440H368V264h96Z" class="ci-primary"/>',
315+
]}
316+
width={64}
317+
height={64}
318+
/>
319+
),
320+
badge: {
321+
color: 'success',
322+
text: 'New',
323+
},
324+
},
306325
]
307326

308327
export default nav

‎packages/docs/src/styles/_ads.scss

Copy file name to clipboard
+25-54Lines changed: 25 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,32 @@
1-
2-
#carbonads * {
3-
margin: initial;
4-
padding: initial;
5-
}
61
#carbonads {
7-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell,
8-
'Helvetica Neue', Helvetica, Arial, sans-serif;
9-
}
10-
#carbonads {
11-
display: flex;
12-
max-width: 330px;
13-
background-color: hsl(0, 0%, 98%);
14-
box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.1);
15-
z-index: 100;
16-
}
17-
#carbonads a {
18-
color: inherit;
19-
text-decoration: none;
20-
}
21-
#carbonads a:hover {
22-
color: inherit;
23-
}
24-
#carbonads span {
25-
position: relative;
2+
position: static;
263
display: block;
4+
max-width: 400px;
5+
padding: 15px 15px 15px 160px;
6+
margin: 2rem 0;
277
overflow: hidden;
28-
}
29-
#carbonads .carbon-wrap {
30-
display: flex;
31-
}
32-
#carbonads .carbon-img {
33-
display: block;
34-
margin: 0;
35-
line-height: 1;
36-
}
37-
#carbonads .carbon-img img {
38-
display: block;
39-
}
40-
#carbonads .carbon-text {
41-
font-size: 13px;
42-
padding: 10px;
43-
margin-bottom: 16px;
44-
line-height: 1.5;
8+
@include font-size(.8125rem);
9+
line-height: 1.4;
4510
text-align: left;
11+
background-color: $gray-100;
12+
13+
a {
14+
color: $gray-800;
15+
text-decoration: none;
16+
}
17+
18+
@include media-breakpoint-up(sm) {
19+
@include border-radius(.5rem);
20+
}
21+
}
22+
23+
.carbon-img {
24+
float: left;
25+
margin-left: -145px;
4626
}
47-
#carbonads .carbon-poweredby {
27+
28+
.carbon-poweredby {
4829
display: block;
49-
padding: 6px 8px;
50-
background: #f1f1f2;
51-
text-align: center;
52-
text-transform: uppercase;
53-
letter-spacing: 0.5px;
54-
font-weight: 600;
55-
font-size: 8px;
56-
line-height: 1;
57-
border-top-left-radius: 3px;
58-
position: absolute;
59-
bottom: 0;
60-
right: 0;
30+
margin-top: .75rem;
31+
color: $gray-700 !important;
6132
}

‎packages/docs/src/styles/_prism.scss

Copy file name to clipboardExpand all lines: packages/docs/src/styles/_prism.scss
+5-1Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,11 @@ pre[class*='language-'] {
3333
pre[class*='language-'] {
3434
padding: 1em;
3535
margin: 0.5em 0;
36-
overflow: auto;
36+
}
37+
38+
pre[class*='language-']:not(.language-sass) {
39+
overflow: scroll;
40+
max-height: 500px;
3741
}
3842

3943
:not(pre) > code[class*='language-'],

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.