Skip to content

Commit 8a294ca

Browse files
TechQueryTechQuery
committed
[add] 5 extra component & 2 experimental modes
1 parent aea06ed commit 8a294ca

File tree

10 files changed

+396
-9
lines changed

10 files changed

+396
-9
lines changed

‎document/source/components/Calender.mdx‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
---
2+
layout: docs
3+
title: Calendar
4+
description:
5+
group: Components
6+
---
7+
8+
import { CalendarView } from 'boot-cell/source/Extra/Calendar';
9+
import { formatDate } from 'web-utility/source/date';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
This component is built on the top of [`<Table />`][1] & [`<IconButton />`][2], so [FontAwesome v5][3] is required:
14+
15+
```HTML
16+
<link
17+
rel="stylesheet"
18+
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"
19+
/>
20+
```
21+
22+
## Default calendar
23+
24+
<Example>
25+
<CalendarView date={new Date(1989, 5, 4)} />
26+
</Example>
27+
28+
```TSX
29+
import { render, createCell } from 'web-cell';
30+
import { CalendarView } from 'boot-cell/source/Extra/Calendar';
31+
32+
render(
33+
<CalendarView date={new Date(1989, 5, 4)} />
34+
);
35+
```
36+
37+
## Custom Date captions
38+
39+
<Example>
40+
<CalendarView
41+
date={new Date(1989, 5, 4)}
42+
dateTemplate="YYYY 年 MM 月"
43+
weekDays={['一', '二', '三', '四', '五', '六', '七']}
44+
/>
45+
</Example>
46+
47+
```TSX
48+
import { render, createCell } from 'web-cell';
49+
import { CalendarView } from 'boot-cell/source/Extra/Calendar';
50+
51+
render(
52+
<CalendarView
53+
date={new Date(1989, 5, 4)}
54+
dateTemplate="YYYY 年 MM 月"
55+
weekDays={['一', '二', '三', '四', '五', '六', '七']}
56+
/>
57+
);
58+
```
59+
60+
## Custom Date cell
61+
62+
<Example>
63+
<CalendarView
64+
date={new Date(1989, 5, 4)}
65+
dateTemplate="YYYY 年 MM 月"
66+
weekDays={['一', '二', '三', '四', '五', '六', '七']}
67+
renderCell={date => (
68+
<a
69+
className="stretched-link"
70+
style={{ color: 'inherit' }}
71+
target="_blank"
72+
href={
73+
'https://zh.wikipedia.org/wiki/' +
74+
formatDate(date, 'M月D日')
75+
}
76+
>
77+
{date.getDate()}
78+
</a>
79+
)}
80+
/>
81+
</Example>
82+
83+
```TSX
84+
import { render, createCell } from 'web-cell';
85+
import { CalendarView } from 'boot-cell/source/Extra/Calendar';
86+
import { formatDate } from 'web-utility/source/date';
87+
88+
render(
89+
<CalendarView
90+
date={new Date(1989, 5, 4)}
91+
dateTemplate="YYYY 年 MM 月"
92+
weekDays={['一', '二', '三', '四', '五', '六', '七']}
93+
renderCell={date => (
94+
<a
95+
className="stretched-link"
96+
style={{ color: 'inherit' }}
97+
target="_blank"
98+
href={
99+
'https://zh.wikipedia.org/wiki/' +
100+
formatDate(date, 'M月D日')
101+
}
102+
>
103+
{date.getDate()}
104+
</a>
105+
)}
106+
/>
107+
);
108+
```
109+
110+
[1]: components/table
111+
[2]: components/icon
112+
[3]: https://fontawesome.com/

‎document/source/components/CountDown.mdx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
layout: docs
3+
title: CountDown
4+
description:
5+
group: Components
6+
---
7+
8+
import { CountDown } from 'boot-cell/source/Extra/CountDown';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
<Example>
13+
<CountDown endTime={new Date(new Date().getFullYear() + 1, 5, 4)} />
14+
</Example>
15+
16+
```TSX
17+
import { render, createCell } from 'web-cell';
18+
import { CountDown } from 'boot-cell/source/Extra/CountDown';
19+
20+
render(
21+
<CountDown endTime={new Date(new Date().getFullYear() + 1, 5, 4)} />
22+
);
23+
```

‎document/source/components/FormField.mdx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -885,6 +885,23 @@ We hide the default file `<input>` via `opacity` and instead style the `<label>`
885885
The button is generated and positioned with `::after`.
886886
Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content.
887887

888+
### Floating label
889+
890+
`labelFloat` mode is imported from [Floating labels][10] of Bootstrap.
891+
892+
<Example>
893+
<FormField labelFloat placeholder="Account" />
894+
</Example>
895+
896+
```TSX
897+
import { render, createCell } from 'web-cell';
898+
import { FormField } from 'boot-cell/source/Form/FormField';
899+
900+
render(
901+
<FormField labelFloat placeholder="Account" />
902+
);
903+
```
904+
888905
[1]: https://getbootstrap.com/docs/4.5/content/reboot/#forms
889906
[2]: https://getbootstrap.com/docs/4.5/utilities/spacing/
890907
[3]: https://getbootstrap.com/docs/4.5/utilities/flex/
@@ -894,3 +911,4 @@ Lastly, we declare a `width` and `height` on the `<input>` for proper spacing fo
894911
[7]: https://www.w3.org/TR/html5/sec-forms.html#the-constraint-validation-api
895912
[8]: #Browser-defaults
896913
[9]: https://github.com/iconic/open-iconic
914+
[10]: https://getbootstrap.com/docs/4.5/examples/floating-labels/

‎document/source/components/MarkdownEditor.mdx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
layout: docs
3+
title: Markdown Editor
4+
description:
5+
group: Components
6+
---
7+
8+
import { MarkdownEditor } from 'boot-cell/source/Form/MarkdownEditor';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
This component is built on the top of [MarkdownIME][1], these dependencies below should be installed:
13+
14+
```Shell
15+
npm install markdown-ime marked turndown turndown-plugin-gfm
16+
```
17+
18+
<Example>
19+
<MarkdownEditor value="# WebCell" />
20+
</Example>
21+
22+
```TSX
23+
import { render, createCell } from 'web-cell';
24+
import { MarkdownEditor } from 'boot-cell/source/Form/MarkdownEditor';
25+
26+
render(
27+
<MarkdownEditor value="# WebCell" />
28+
);
29+
```
30+
31+
[1]: https://laobubu.net/MarkdownIME/

‎document/source/components/Nav.mdx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ description: Documentation and examples for how to use Bootstrap’s included na
55
group: Components
66
---
77

8+
import { Fragment } from 'web-cell';
89
import { Nav } from 'boot-cell/source/Navigator/Nav';
10+
import { Badge } from 'boot-cell/source/Reminder/Badge';
911

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

@@ -281,3 +283,59 @@ render(
281283
/>
282284
);
283285
```
286+
287+
## Scrollable nav
288+
289+
`scrollable` mode is imported from [Offcanvas example][1] of Bootstrap.
290+
291+
<Example>
292+
<Nav
293+
scrollable
294+
list={[
295+
{ title: 'Dashboard' },
296+
{
297+
title: (
298+
<Fragment>
299+
Friends{' '}
300+
<Badge pill kind="light" className="align-text-bottom">
301+
27
302+
</Badge>
303+
</Fragment>
304+
)
305+
},
306+
{ title: 'Explore' },
307+
{ title: 'Suggestions' },
308+
...[1, 2, 3, 4, 5, 6, 7, 8].map(() => ({ title: 'Link' }))
309+
]}
310+
/>
311+
</Example>
312+
313+
```TSX
314+
import { render, createCell, Fragment } from 'web-cell';
315+
import { Nav } from 'boot-cell/source/Navigator/Nav';
316+
import { Badge } from 'boot-cell/source/Reminder/Badge';
317+
318+
render(
319+
<Nav
320+
scrollable
321+
list={[
322+
{ title: 'Dashboard' },
323+
{
324+
title: (
325+
<Fragment>
326+
Friends{' '}
327+
<Badge pill kind="light" className="align-text-bottom">
328+
27
329+
</Badge>
330+
</Fragment>
331+
)
332+
},
333+
{ title: 'Explore' },
334+
{ title: 'Suggestions' },
335+
...[1, 2, 3, 4, 5, 6, 7, 8].map(() => ({ title: 'Link' }))
336+
]}
337+
/>
338+
);
339+
```
340+
341+
[1]: https://getbootstrap.com/docs/4.5/examples/offcanvas/

‎document/source/components/ShareBar.mdx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: docs
3+
title: Share Bar
4+
description:
5+
group: Components
6+
---
7+
8+
import { ShareBar } from 'boot-cell/source/Extra/ShareBar';
9+
10+
import { Example } from '../../../source/component/Example';
11+
12+
This component is built on the top of [`<BGIcon />`][1], [`@nuintun/qrcode`][2] & [Web Share API][3],
13+
these dependencies below should be installed:
14+
15+
```HTML
16+
<link
17+
rel="stylesheet"
18+
href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"
19+
/>
20+
<script src="https://cdn.jsdelivr.net/npm/share-api-polyfill@1.0.13/dist/share-min.js"></script>
21+
```
22+
23+
```Shell
24+
npm install @nuintun/qrcode
25+
```
26+
27+
## Default targets
28+
29+
<Example>
30+
<ShareBar />
31+
</Example>
32+
33+
```TSX
34+
import { render, createCell } from 'web-cell';
35+
import { ShareBar } from 'boot-cell/source/Extra/ShareBar';
36+
37+
render(
38+
<ShareBar />
39+
);
40+
```
41+
42+
## Custom ordered targets
43+
44+
<Example>
45+
<ShareBar targets={['Twitter', 'Douban', 'QQ']} />
46+
</Example>
47+
48+
```TSX
49+
import { render, createCell } from 'web-cell';
50+
import { ShareBar } from 'boot-cell/source/Extra/ShareBar';
51+
52+
render(
53+
<ShareBar targets={['Twitter', 'Douban', 'QQ']} />
54+
);
55+
```
56+
57+
## Vertical bar
58+
59+
<Example>
60+
<ShareBar direction="column" />
61+
</Example>
62+
63+
```TSX
64+
import { render, createCell } from 'web-cell';
65+
import { ShareBar } from 'boot-cell/source/Extra/ShareBar';
66+
67+
render(
68+
<ShareBar direction="column" />
69+
);
70+
```
71+
72+
[1]: components/icon
73+
[2]: https://nuintun.github.io/qrcode/
74+
[3]: https://w3c.github.io/web-share/

‎document/source/components/SplitView.mdx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
layout: docs
3+
title: SplitView
4+
description:
5+
group: Components
6+
---
7+
8+
import { SplitView } from 'boot-cell/source/Content/SplitView';
9+
import { Embed } from 'boot-cell/source/Content/Embed';
10+
11+
import { Example } from '../../../source/component/Example';
12+
13+
This component is built on the top of [Iterator Observer][1], the dependency below should be installed:
14+
15+
```Shell
16+
npm install iterable-observer
17+
```
18+
19+
<Example>
20+
<SplitView>
21+
<Embed
22+
is="iframe"
23+
className="vh-100"
24+
src="https://web-cell.dev/WebCell/"
25+
/>
26+
<Embed
27+
is="iframe"
28+
className="vh-100"
29+
src="https://web-cell.dev/BootCell/"
30+
/>
31+
</SplitView>
32+
</Example>
33+
34+
```TSX
35+
import { render, createCell } from 'web-cell';
36+
import { SplitView } from 'boot-cell/source/Content/SplitView';
37+
import { Embed } from 'boot-cell/source/Content/Embed';
38+
39+
render(
40+
<SplitView>
41+
<Embed
42+
is="iframe"
43+
className="vh-100"
44+
src="https://web-cell.dev/WebCell/"
45+
/>
46+
<Embed
47+
is="iframe"
48+
className="vh-100"
49+
src="https://web-cell.dev/BootCell/"
50+
/>
51+
</SplitView>
52+
);
53+
```
54+
55+
[1]: https://github.com/EasyWebApp/iterable-observer

0 commit comments

Comments
 (0)