feat: add placeholder component
This commit is contained in:
Łukasz Holeczek
parent
65aaaa3d53
commit
b8f4bb4eee
@ -91,6 +91,11 @@ const _nav = [
|
|||||||
name: 'Pagination',
|
name: 'Pagination',
|
||||||
to: '/base/paginations',
|
to: '/base/paginations',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
component: CNavItem,
|
||||||
|
name: 'Placeholders',
|
||||||
|
to: '/base/placeholders',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
component: CNavItem,
|
component: CNavItem,
|
||||||
name: 'Popovers',
|
name: 'Popovers',
|
||||||
|
|||||||
@ -13,6 +13,7 @@ const Collapses = React.lazy(() => import('./views/base/collapses/Collapses'))
|
|||||||
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
|
const ListGroups = React.lazy(() => import('./views/base/list-groups/ListGroups'))
|
||||||
const Navs = React.lazy(() => import('./views/base/navs/Navs'))
|
const Navs = React.lazy(() => import('./views/base/navs/Navs'))
|
||||||
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
|
const Paginations = React.lazy(() => import('./views/base/paginations/Paginations'))
|
||||||
|
const Placeholders = React.lazy(() => import('./views/base/placeholders/Placeholders'))
|
||||||
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
|
const Popovers = React.lazy(() => import('./views/base/popovers/Popovers'))
|
||||||
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
|
const Progress = React.lazy(() => import('./views/base/progress/Progress'))
|
||||||
const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
|
const Spinners = React.lazy(() => import('./views/base/spinners/Spinners'))
|
||||||
@ -64,6 +65,7 @@ const routes = [
|
|||||||
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
|
{ path: '/base/list-groups', name: 'List Groups', component: ListGroups },
|
||||||
{ path: '/base/navs', name: 'Navs', component: Navs },
|
{ path: '/base/navs', name: 'Navs', component: Navs },
|
||||||
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
|
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
|
||||||
|
{ path: '/base/placeholders', name: 'Placeholders', component: Placeholders },
|
||||||
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
|
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
|
||||||
{ path: '/base/progress', name: 'Progress', component: Progress },
|
{ path: '/base/progress', name: 'Progress', component: Progress },
|
||||||
{ path: '/base/spinners', name: 'Spinners', component: Spinners },
|
{ path: '/base/spinners', name: 'Spinners', component: Spinners },
|
||||||
|
|||||||
196
src/views/base/placeholders/Placeholders.js
Normal file
196
src/views/base/placeholders/Placeholders.js
Normal file
@ -0,0 +1,196 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
CButton,
|
||||||
|
CCard,
|
||||||
|
CCardBody,
|
||||||
|
CCardHeader,
|
||||||
|
CCardImage,
|
||||||
|
CCardText,
|
||||||
|
CCardTitle,
|
||||||
|
CCol,
|
||||||
|
CPlaceholder,
|
||||||
|
CRow,
|
||||||
|
} from '@coreui/react'
|
||||||
|
import { DocsCallout, DocsExample } from 'src/components'
|
||||||
|
|
||||||
|
import ReactImg from 'src/assets/images/react.jpg'
|
||||||
|
|
||||||
|
const Placeholders = () => {
|
||||||
|
return (
|
||||||
|
<CRow>
|
||||||
|
<CCol xs={12}>
|
||||||
|
<DocsCallout name="Placeholder" href="components/placeholder" />
|
||||||
|
</CCol>
|
||||||
|
<CCol xs={12}>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Placeholder</strong>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p className="text-medium-emphasis small">
|
||||||
|
In the example below, we take a typical card component and recreate it with
|
||||||
|
placeholders applied to create a "loading card". Size and proportions are the
|
||||||
|
same between the two.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder">
|
||||||
|
<div className="d-flex justify-content-around p-3">
|
||||||
|
<CCard style={{ width: '18rem' }}>
|
||||||
|
<CCardImage orientation="top" src={ReactImg} />
|
||||||
|
<CCardBody>
|
||||||
|
<CCardTitle>Card title</CCardTitle>
|
||||||
|
<CCardText>
|
||||||
|
Some quick example text to build on the card title and make up the bulk of the
|
||||||
|
card's content.
|
||||||
|
</CCardText>
|
||||||
|
<CButton href="#">Go somewhere</CButton>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard style={{ width: '18rem' }}>
|
||||||
|
<CCardImage
|
||||||
|
component="svg"
|
||||||
|
orientation="top"
|
||||||
|
width="100%"
|
||||||
|
height="162"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
role="img"
|
||||||
|
aria-label="Placeholder"
|
||||||
|
preserveAspectRatio="xMidYMid slice"
|
||||||
|
focusable="false"
|
||||||
|
>
|
||||||
|
<title>Placeholder</title>
|
||||||
|
<rect width="100%" height="100%" fill="#868e96"></rect>
|
||||||
|
</CCardImage>
|
||||||
|
<CCardBody>
|
||||||
|
<CPlaceholder component={CCardTitle} animation="glow" xs={7}>
|
||||||
|
<CPlaceholder xs={6} />
|
||||||
|
</CPlaceholder>
|
||||||
|
<CPlaceholder component={CCardText} animation="glow">
|
||||||
|
<CPlaceholder xs={7} />
|
||||||
|
<CPlaceholder xs={4} />
|
||||||
|
<CPlaceholder xs={4} />
|
||||||
|
<CPlaceholder xs={6} />
|
||||||
|
<CPlaceholder xs={8} />
|
||||||
|
</CPlaceholder>
|
||||||
|
<CPlaceholder
|
||||||
|
component={CButton}
|
||||||
|
disabled
|
||||||
|
href="#"
|
||||||
|
tabIndex={-1}
|
||||||
|
xs={6}
|
||||||
|
></CPlaceholder>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</div>
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Placeholder</strong>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p className="text-medium-emphasis small">
|
||||||
|
Create placeholders with the <code><CPlaceholder></code> component and a grid
|
||||||
|
column propx (e.g., <code>xs={6}</code>) to set the <code>width</code>. They can
|
||||||
|
replace the text inside an element or be added as a modifier class to an existing
|
||||||
|
component.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder">
|
||||||
|
<p aria-hidden="true">
|
||||||
|
<CPlaceholder xs={6} />
|
||||||
|
</p>
|
||||||
|
<CPlaceholder
|
||||||
|
component={CButton}
|
||||||
|
aria-hidden="true"
|
||||||
|
disabled
|
||||||
|
href="#"
|
||||||
|
tabIndex={-1}
|
||||||
|
xs={4}
|
||||||
|
></CPlaceholder>
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Placeholder</strong> <small> Width</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p className="text-medium-emphasis small">
|
||||||
|
You can change the <code>width</code> through grid column classes, width utilities, or
|
||||||
|
inline styles.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#width">
|
||||||
|
<CPlaceholder xs={6} />
|
||||||
|
<CPlaceholder className="w-75" />
|
||||||
|
<CPlaceholder style={{ width: '30%' }} />
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Placeholder</strong> <small> Color</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p className="text-medium-emphasis small">
|
||||||
|
By default, the <code><CPlaceholder></code> uses <code>currentColor</code>. This
|
||||||
|
can be overridden with a custom color or utility class.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#color">
|
||||||
|
<CPlaceholder xs={12} />
|
||||||
|
|
||||||
|
<CPlaceholder color="primary" xs={12} />
|
||||||
|
<CPlaceholder color="secondary" xs={12} />
|
||||||
|
<CPlaceholder color="success" xs={12} />
|
||||||
|
<CPlaceholder color="danger" xs={12} />
|
||||||
|
<CPlaceholder color="warning" xs={12} />
|
||||||
|
<CPlaceholder color="info" xs={12} />
|
||||||
|
<CPlaceholder color="light" xs={12} />
|
||||||
|
<CPlaceholder color="dark" xs={12} />
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Placeholder</strong> <small> Sizing</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p className="text-medium-emphasis small">
|
||||||
|
The size of <code><CPlaceholder></code>s are based on the typographic style of
|
||||||
|
the parent element. Customize them with <code>size</code> prop: <code>lg</code>,{' '}
|
||||||
|
<code>sm</code>, or <code>xs</code>.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#sizing">
|
||||||
|
<CPlaceholder xs={12} size="lg" />
|
||||||
|
<CPlaceholder xs={12} />
|
||||||
|
<CPlaceholder xs={12} size="sm" />
|
||||||
|
<CPlaceholder xs={12} size="xs" />
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
<CCard className="mb-4">
|
||||||
|
<CCardHeader>
|
||||||
|
<strong>React Placeholder</strong> <small> Animation</small>
|
||||||
|
</CCardHeader>
|
||||||
|
<CCardBody>
|
||||||
|
<p className="text-medium-emphasis small">
|
||||||
|
Animate placeholders with <code>animation="glow"</code> or{' '}
|
||||||
|
<code>animation="wave"</code> to better convey the perception of something
|
||||||
|
being <em>actively</em> loaded.
|
||||||
|
</p>
|
||||||
|
<DocsExample href="components/placeholder#animation">
|
||||||
|
<CPlaceholder component="p" animation="glow">
|
||||||
|
<CPlaceholder xs={12} />
|
||||||
|
</CPlaceholder>
|
||||||
|
|
||||||
|
<CPlaceholder component="p" animation="wave">
|
||||||
|
<CPlaceholder xs={12} />
|
||||||
|
</CPlaceholder>
|
||||||
|
</DocsExample>
|
||||||
|
</CCardBody>
|
||||||
|
</CCard>
|
||||||
|
</CCol>
|
||||||
|
</CRow>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Placeholders
|
||||||
Loading…
Reference in New Issue
Block a user