Skip to content

Commit c9e6456

Browse files
TechQueryTechQuery
committed
[add] Offcanvas example
[add] basic document of Collapse component
1 parent 8a294ca commit c9e6456

File tree

7 files changed

+276
-14
lines changed

7 files changed

+276
-14
lines changed

‎document/source/components/Collapse.mdx‎

Lines changed: 62 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,75 @@
11
---
22
layout: docs
33
title: Collapse
4-
description: Toggle the visibility of content across your project.
4+
description: Toggle the visibility of content across your project with our Web components.
55
group: Components
66
toc: true
77
---
88

9+
import { Fragment } from 'web-cell';
910
import { AccordionList } from 'boot-cell/source/Content/Accordion';
11+
import { Button } from 'boot-cell/source/Form/Button';
1012

1113
import { Example } from '../../../source/component/Example';
1214

15+
## How it works
16+
17+
The `<collapse-box />` component is used to show and hide content.
18+
Collapsing an element will animate the `height` from its current value to `0`.
19+
20+
In addition, `<collapse-box />` uses [`ResizeObserver`][1] to detect **Content resizing**, so a polyfill may be required:
21+
22+
```HTML
23+
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=ResizeObserver"></script>
24+
```
25+
26+
## Example
27+
28+
<Example>
29+
<Button
30+
onClick={({ currentTarget }) => {
31+
const box = currentTarget.nextElementSibling;
32+
box.open = !box.open;
33+
}}
34+
>
35+
WebCell
36+
</Button>
37+
<collapse-box
38+
onOpen={({ type }) => console.log(type)}
39+
onClose={({ type }) => console.log(type)}
40+
>
41+
Web Components engine based on JSX &amp; TypeScript
42+
</collapse-box>
43+
</Example>
44+
45+
```TSX
46+
import { render, createCell, Fragment } from 'web-cell';
47+
import 'boot-cell/source/Content/Collapse';
48+
import { Button } from 'boot-cell/source/Form/Button';
49+
50+
render(
51+
<Fragment>
52+
<Button
53+
onClick={({ currentTarget }) => {
54+
const box = currentTarget.nextElementSibling;
55+
box.open = !box.open;
56+
}}
57+
>
58+
WebCell
59+
</Button>
60+
<collapse-box
61+
onOpen={({ type }) => console.log(type)}
62+
onClose={({ type }) => console.log(type)}
63+
>
64+
Web Components engine based on JSX &amp; TypeScript
65+
</collapse-box>
66+
</Fragment>
67+
);
68+
```
69+
1370
## Accordion example
1471

15-
Using the [card](components/card) component, you can extend the default collapse behavior to create an accordion.
72+
Using the [card][2] component, you can extend the default collapse behavior to create an accordion.
1673

1774
<Example>
1875
<AccordionList
@@ -62,3 +119,6 @@ render(
62119
/>
63120
);
64121
```
122+
123+
[1]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
124+
[2]: components/card

‎document/source/components/NavBar.mdx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,11 @@ Here’s what you need to know before getting started with the navbar:
2525
- Navbars are responsive by default, but you can easily modify them to change that.
2626
- Navbars are hidden by default when printing. Force them to be printed by adding `.d-print` to the `<NavBar />`. See the [display][3] utility class.
2727

28-
> The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.
28+
In addition, `<NavBar />` uses [`ResizeObserver`][4] to detect **Viewport resizing**, so a polyfill may be required:
29+
30+
```HTML
31+
<script src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=ResizeObserver"></script>
32+
```
2933

3034
Read on for an example and list of supported sub-components.
3135

@@ -610,7 +614,7 @@ render(
610614

611615
Choose from fixed to the bottom or stickied to the top (scrolls with the page until it reaches the top, then stays there).
612616

613-
Also note that **`fixed="top"` uses `position: sticky`, which [isn’t fully supported in every browser][4]**.
617+
Also note that **`fixed="top"` uses `position: sticky`, which [isn’t fully supported in every browser][5]**.
614618

615619
<Example>
616620
<NavBar className="position-static mb-4" brand="Sticky top" />
@@ -789,4 +793,5 @@ render(
789793
[1]: https://getbootstrap.com/docs/4.5/utilities/spacing/
790794
[2]: https://getbootstrap.com/docs/4.5/utilities/flex/
791795
[3]: https://getbootstrap.com/docs/4.5/utilities/display/
792-
[4]: https://caniuse.com/#feat=css-sticky
796+
[4]: https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver
797+
[5]: https://caniuse.com/#feat=css-sticky

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Re-implemented Official Document site of BootStrap & FontAwesome based on WebCell, BootCell & MarkCell",
55
"dependencies": {
66
"@nuintun/qrcode": "^2.1.1",
7-
"boot-cell": "^1.0.0-rc.28",
7+
"boot-cell": "^1.0.0-rc.29",
88
"cell-router": "^2.0.0-rc.8",
99
"classnames": "^2.2.6",
1010
"github-web-widget": "^3.0.0-beta.5",

‎source/page/Example/Offcanvas.less‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
.text-white-50 {
2+
color: rgba(255, 255, 255, 0.5);
3+
}
4+
5+
.bg-purple {
6+
background-color: #6f42c1;
7+
}
8+
9+
.lh-100 {
10+
line-height: 1;
11+
}
12+
.lh-125 {
13+
line-height: 1.25;
14+
}
15+
.lh-150 {
16+
line-height: 1.5;
17+
}
18+
19+
.logo {
20+
width: 3rem;
21+
height: 3rem;
22+
}

‎source/page/Example/Offcanvas.tsx‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
import { createCell, Fragment } from 'web-cell';
2+
import classNames from 'classnames';
3+
4+
import { NavBar } from 'boot-cell/source/Navigator/NavBar';
5+
import { Nav } from 'boot-cell/source/Navigator/Nav';
6+
import { Form } from 'boot-cell/source/Form/Form';
7+
import { Field } from 'boot-cell/source/Form/Field';
8+
import { Button } from 'boot-cell/source/Form/Button';
9+
import { Badge } from 'boot-cell/source/Reminder/Badge';
10+
import { MediaObject } from 'boot-cell/source/Content/MediaObject';
11+
12+
import style from './Offcanvas.less';
13+
14+
export function OffcanvasPage() {
15+
return (
16+
<Fragment>
17+
<NavBar
18+
offcanvas
19+
brand="Offcanvas navbar"
20+
menu={[
21+
{ title: 'Dashboard' },
22+
{ title: 'Notifications' },
23+
{ title: 'Profile' },
24+
{ title: 'Switch account' },
25+
{
26+
title: 'Settings',
27+
list: [
28+
{ title: 'Action' },
29+
{ title: 'Another action' },
30+
{ title: 'Something else here' }
31+
]
32+
}
33+
]}
34+
>
35+
<Form inline className="my-2 my-lg-0">
36+
<Field
37+
type="search"
38+
className="mr-sm-2"
39+
placeholder="Search"
40+
aria-label="Search"
41+
/>
42+
<Button
43+
type="submit"
44+
kind="success"
45+
outline
46+
className="my-2 my-sm-0"
47+
>
48+
Search
49+
</Button>
50+
</Form>
51+
</NavBar>
52+
<Nav
53+
scrollable
54+
list={[
55+
{ title: 'Dashboard' },
56+
{
57+
title: (
58+
<Fragment>
59+
Friends{' '}
60+
<Badge
61+
pill
62+
kind="light"
63+
className="align-text-bottom"
64+
>
65+
27
66+
</Badge>
67+
</Fragment>
68+
)
69+
},
70+
{ title: 'Explore' },
71+
{ title: 'Suggestions' },
72+
...Array.from(new Array(5), () => ({ title: 'Link' }))
73+
]}
74+
/>
75+
<main className="container">
76+
<div
77+
className={classNames(
78+
'd-flex',
79+
'align-items-center',
80+
'p-3',
81+
'my-3',
82+
style['text-white-50'],
83+
style['bg-purple'],
84+
'rounded',
85+
'shadow-sm'
86+
)}
87+
>
88+
<img
89+
className={classNames('mr-3', style.logo)}
90+
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
91+
/>
92+
<div className={style['lh-100']}>
93+
<h6
94+
className={classNames(
95+
'mb-0',
96+
'text-white',
97+
style['lh-100']
98+
)}
99+
>
100+
BootCell
101+
</h6>
102+
<small>Since 2019</small>
103+
</div>
104+
</div>
105+
<div class="my-3 p-3 bg-white rounded shadow-sm">
106+
<h6 class="border-bottom border-gray pb-2 mb-0">
107+
Recent updates
108+
</h6>
109+
{Array.from(new Array(3), () => (
110+
<MediaObject
111+
className="text-muted pt-3"
112+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
113+
title="WebCell"
114+
>
115+
<p
116+
className={classNames(
117+
'pb-3',
118+
'mb-0',
119+
'small',
120+
style['lh-125'],
121+
'border-bottom'
122+
)}
123+
>
124+
<strong class="d-block">@TechQuery</strong>
125+
Web Components engine based on JSX &amp;
126+
TypeScript
127+
</p>
128+
</MediaObject>
129+
))}
130+
<small className="d-block text-right mt-3">
131+
<a href="#">All updates</a>
132+
</small>
133+
</div>
134+
<div class="my-3 p-3 bg-white rounded shadow-sm">
135+
<h6 class="border-bottom border-gray pb-2 mb-0">
136+
Suggestions
137+
</h6>
138+
{Array.from(new Array(3), () => (
139+
<MediaObject
140+
className="text-muted pt-3"
141+
image="https://web-cell.dev/WebCell-0.f1ffd28b.png"
142+
title=""
143+
>
144+
<div
145+
className={classNames(
146+
'pb-3',
147+
'mb-0',
148+
'small',
149+
style['lh-125'],
150+
'border-bottom'
151+
)}
152+
>
153+
<div class="d-flex justify-content-between align-items-center w-100">
154+
<strong>Full Name</strong>
155+
<a href="#">Follow</a>
156+
</div>
157+
<span class="d-block">@username</span>
158+
</div>
159+
</MediaObject>
160+
))}
161+
<small className="d-block text-right mt-3">
162+
<a href="#">All suggestions</a>
163+
</small>
164+
</div>
165+
</main>
166+
</Fragment>
167+
);
168+
}

‎source/page/Example/index.ts‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
export default [
2-
{
3-
paths: ['example'],
4-
component: async () => (await import('./Home')).HomePage
5-
}
6-
];
1+
export default [
2+
{
3+
paths: ['example'],
4+
component: async () => (await import('./Home')).HomePage
5+
},
6+
{
7+
paths: ['example/offcanvas'],
8+
component: async () => (await import('./Offcanvas')).OffcanvasPage
9+
}
10+
];

‎source/page/index.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,13 @@ export class PageRouter extends HTMLRouter {
7575
}
7676

7777
render() {
78+
const [path_0, path_1] = history.path.split('/');
79+
7880
return (
7981
<Fragment>
80-
<NavBar brand="BootCell" menu={this.menu} />
81-
82+
{path_0 === 'example' && path_1 ? null : (
83+
<NavBar brand="BootCell" menu={this.menu} />
84+
)}
8285
<SpinnerBox cover={this.state.loading}>
8386
{super.render()}
8487
</SpinnerBox>

0 commit comments

Comments
 (0)