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
Sign up
Appearance settings

Commit 76f027c

Browse files
committed
docs: improve responsive design
1 parent b8e5cb6 commit 76f027c

File tree

6 files changed

+95
-34
lines changed

6 files changed

+95
-34
lines changed

‎packages/docs/content/components/modal/index.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ route: /components/modal/
66
other_frameworks: modal
77
---
88

9+
## Introduction to Modal Component
10+
11+
A modal component is a fundamental part of modern UI design, providing a focused dialog that appears above the main content to capture user attention. In React applications, modal components are used to display important information, collect user input through form elements, or prompt users to take specific actions. When a modal is active, it typically prevents interaction with the rest of the page, ensuring users complete or dismiss the modal dialog before returning to the main UI. This approach helps manage user focus and streamlines workflows, making modal dialogs an essential tool for improving user experience. Modal components can display a variety of elements, such as text, forms, or notifications, and their appearance and behavior can be customized through React props to fit the needs of your application.
12+
913
## How to use React Modal Component?
1014

1115
### Static modal component example
@@ -46,9 +50,11 @@ Below is a static react modal component example (meaning its `position` and `dis
4650
</CModal>
4751
```
4852

53+
You can also create a custom modal component in React, allowing you to pass props such as `visible` and `onClose` for greater flexibility and reusability.
54+
4955
### Live demo
5056

51-
Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page.
57+
Toggle a working React modal component demo by clicking the button below. It will slide down and fade in from the top of the page. Integrating modal components is a common practice in modern web apps to improve user interaction and workflow.
5258

5359
<ExampleSnippet component="ModalLiveDemoExample" componentName="React Modal" />
5460

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

Lines changed: 65 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { forwardRef } from 'react'
22
import { DocSearch } from '@docsearch/react'
33

4-
import CIcon from '@coreui/icons-react'
4+
import CIcon,{CIconSvg} from '@coreui/icons-react'
55
import {
66
cibGithub,
77
cibOpenCollective,
@@ -12,6 +12,7 @@ import {
1212
cilMoon,
1313
cilContrast,
1414
cilHandshake,
15+
cilExternalLink,
1516
} from '@coreui/icons'
1617

1718
import {
@@ -21,12 +22,14 @@ import {
2122
CDropdownMenu,
2223
CDropdownToggle,
2324
CHeader,
25+
CHeaderBrand,
2426
CHeaderNav,
2527
CHeaderToggler,
2628
CNavItem,
2729
useColorModes,
2830
} from '@coreui/react'
2931
import { AppContext } from './../AppContext'
32+
import { Link } from 'gatsby'
3033

3134
const Header = forwardRef<HTMLDivElement>(({}, ref) => {
3235
const { colorMode, setColorMode } = useColorModes('coreui-react-docs-theme')
@@ -44,37 +47,78 @@ const Header = forwardRef<HTMLDivElement>(({}, ref) => {
4447
>
4548
<CIcon icon={cilMenu} size="lg" />
4649
</CHeaderToggler>
47-
<DocSearch
48-
appId="JIOZIZPLMM"
49-
indexName="coreui-react"
50-
apiKey="6e3f7692d2589d042bb40426b75df1b7"
51-
/>
52-
<CHeaderNav className="ms-auto" role={undefined}>
50+
<CHeaderBrand
51+
as={Link}
52+
className="d-lg-none"
53+
to="/"
54+
aria-label="Go to CoreUI for React.js documentation"
55+
>
56+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 102 116" height="32">
57+
<g fill="var(--cui-body-color, currentColor)" fillRule="nonzero">
58+
<path d="M96 25.091 57 2.574a12 12 0 0 0-12 0L6 25.091a12.034 12.034 0 0 0-6 10.392v45.034a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V35.483a12.034 12.034 0 0 0-6-10.392Zm-2 55.426a4 4 0 0 1-2 3.464l-39 22.516a4 4 0 0 1-4 0L10 83.981a4 4 0 0 1-2-3.464V35.483a4 4 0 0 1 2-3.464L49 9.502a4 4 0 0 1 4 0L92 32.02a4 4 0 0 1 2 3.464v45.034Z"></path>
59+
<path d="M74.022 71.038h-2.866a4 4 0 0 0-1.925.493L51.95 81.017 32 69.498V46.521l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.711a2 2 0 0 0-1.04-1.755L55.793 27.985a8.04 8.04 0 0 0-7.843.09L28 39.593a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.518a8.042 8.042 0 0 0 7.843.088l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z"></path>
60+
</g>
61+
</svg>
62+
</CHeaderBrand>
63+
<CHeaderNav className="me-auto d-none d-xl-flex" role={undefined}>
64+
<CNavItem href="https://coreui.io/pricing/?framework=react&src=react-docs&cta=coreui-header-pricing">
65+
Pricing
66+
</CNavItem>
67+
<CNavItem
68+
href="https://coreui.requestshub.com/p/coreui-for-reactjs/roadmap"
69+
target="blank"
70+
rel="noopener noreferrer"
71+
>
72+
Roadmap
73+
<CIcon icon={cilExternalLink} className="ms-2" size="sm" />
74+
</CNavItem>
75+
</CHeaderNav>
76+
<div className="docs-search ms-auto">
77+
<DocSearch
78+
appId="JIOZIZPLMM"
79+
indexName="coreui-react"
80+
apiKey="6e3f7692d2589d042bb40426b75df1b7"
81+
/>
82+
</div>
83+
<CHeaderNav className="ms-2 d-none d-sm-flex" role={undefined}>
5384
<CNavItem
5485
href="https://github.com/coreui/coreui-react/"
5586
aria-label="Visit our GitHub"
87+
target="_blank"
88+
rel="noopener"
5689
>
5790
<CIcon icon={cibGithub} size="xl" />
5891
</CNavItem>
59-
<CNavItem href="https://twitter.com/core_ui" aria-label="Visit our Twitter">
60-
<CIcon icon={cibTwitter} size="xl" />
92+
<CNavItem
93+
href="https://x.com/core_ui"
94+
aria-label="Visit our Twitter"
95+
target="_blank"
96+
rel="noopener"
97+
>
98+
<CIconSvg size="xl">
99+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 271">
100+
<path d="M236 0h46L181 115l118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123L-1.1 0h94.9l65.5 86.6zm-16.1 244h25.5L80.4 26H53z"></path>
101+
</svg>
102+
</CIconSvg>
61103
</CNavItem>
62104
<CNavItem
63-
href="https://opencollective.com/coreui"
64-
aria-label="Visit our OpenCollective"
105+
href="https://discord.gg/pQRWe5XdGm"
106+
aria-label="Visit our Discord"
107+
target="_blank"
108+
rel="noopener"
65109
>
66-
<CIcon icon={cibOpenCollective} size="xl" />
110+
<CIconSvg size="xl">
111+
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
112+
<path d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"></path>
113+
</svg>
114+
</CIconSvg>
67115
</CNavItem>
68116
<li className="nav-item py-2 py-lg-1">
69117
<div className="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"></div>
70118
<hr className="d-lg-none my-2 text-white-50" />
71119
</li>
72120
<CDropdown placement="bottom-end" variant="nav-item">
73-
<CDropdownToggle
74-
color="link"
75-
caret={false}
76-
aria-label="Light/Dark mode switch"
77-
>
121+
<CDropdownToggle color="link" caret={false} aria-label="Light/Dark mode switch">
78122
{colorMode === 'dark' ? (
79123
<CIcon icon={cilMoon} size="xl" />
80124
) : colorMode === 'auto' ? (
@@ -119,27 +163,19 @@ const Header = forwardRef<HTMLDivElement>(({}, ref) => {
119163
</li>
120164
</CHeaderNav>
121165
<CButton
122-
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
123-
color="primary"
124-
href="https://coreui.io/react/docs/getting-started/introduction/"
125-
variant="outline"
126-
>
127-
<CIcon className="me-2" icon={cilCloudDownload} /> Download
128-
</CButton>
129-
<CButton
130-
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
166+
className="d-lg-inline-block ms-md-3"
131167
color="primary"
132168
href="https://coreui.io/about/services/?docs=coreui-header-button"
133169
variant="outline"
134170
>
135-
<CIcon className="me-2" icon={cilHandshake} /> Hire Us
171+
<CIcon className="me-xxl-2 d-none d-xxl-inline" icon={cilHandshake} /> Hire Us
136172
</CButton>
137173
<CButton
138-
className="d-lg-inline-block my-2 my-md-0 ms-md-3"
174+
className="d-lg-inline-block ms-md-3"
139175
color="primary"
140176
href="https://coreui.io/pricing/?framework=react&docs=coreui-header-button"
141177
>
142-
Get CoreUI PRO
178+
Get CoreUI PRO<spanclassName="d-none d-xxl-inline"> all-access</span> →
143179
</CButton>
144180
</CHeader>
145181
)}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
@use "@coreui/coreui/scss/variables" as *;
2+
3+
.docs-header {
4+
--#{$prefix}header-bg: #{var(--cui-body-bg)};
5+
6+
.header-brand {
7+
color: var(--cui-body-color);
8+
}
9+
}

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020

2121
ul {
2222
padding-left: 0;
23+
margin-bottom: 0;
2324
list-style: none;
2425

2526
ul {
@@ -50,7 +51,7 @@
5051
display: flex;
5152
align-items: center;
5253

53-
@include media-breakpoint-down(lg) {
54+
@include media-breakpoint-down(sm) {
5455
justify-content: space-between;
5556
width: 100%;
5657
}

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,7 @@
5959
--docsearch-searchbox-background: #{rgba($black, .1)};
6060
--docsearch-searchbox-focus-background: #{rgba($black, .25)};
6161

62-
min-width: 200px;
63-
min-height: 38px;
62+
margin: 0;
6463
font-family: $input-font-family;
6564
font-weight: $input-font-weight;
6665
line-height: $input-line-height;
@@ -92,12 +91,21 @@
9291
background-color: $form-file-button-hover-bg;
9392
}
9493

94+
@include media-breakpoint-down(md) {
95+
&,
96+
&:hover,
97+
&:focus {
98+
background: transparent;
99+
border: 0;
100+
box-shadow: none;
101+
}
102+
}
103+
95104
.DocSearch-Search-Icon {
96105
opacity: .65;
97106
}
98107
}
99108

100-
101109
.DocSearch-Button-Keys {
102110
min-width: 0;
103111
padding: 0 .25rem;

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@forward "component-examples";
1414
@forward "component-sub-nav";
1515
@forward "footer";
16+
@forward "header";
1617
@forward "layout";
1718
@forward "prism";
1819
@forward "scrolling";

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /