Skip to content

Commit ca6fad3

Browse files
TechQueryTechQuery
committed
[add] Cover example page
[add] Masthead mode of Nav component
1 parent 4be286b commit ca6fad3

File tree

9 files changed

+156
-18
lines changed

9 files changed

+156
-18
lines changed

‎document/source/components/Nav.mdx‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -214,6 +214,39 @@ render(
214214
);
215215
```
216216

217+
### Masthead
218+
219+
Take that same JSX, but use `itemMode="masthead"` instead:
220+
221+
<Example>
222+
<Nav
223+
itemMode="masthead"
224+
list={[
225+
{ title: 'Active', href: 'javascript: void;' },
226+
{ title: 'Link', href: 'javascript: void;' },
227+
{ title: 'Link', href: 'javascript: void;' },
228+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
229+
]}
230+
/>
231+
</Example>
232+
233+
```TSX
234+
import { render, createCell } from 'web-cell';
235+
import { Nav } from 'boot-cell/source/Navigator/Nav';
236+
237+
render(
238+
<Nav
239+
itemMode="masthead"
240+
list={[
241+
{ title: 'Active', href: 'javascript: void;' },
242+
{ title: 'Link', href: 'javascript: void;' },
243+
{ title: 'Link', href: 'javascript: void;' },
244+
{ title: 'Disabled', href: 'javascript: void;', disabled: true }
245+
]}
246+
/>
247+
);
248+
```
249+
217250
## Fill and justify
218251

219252
To proportionately fill all available space with your nav items, use `itemWidth="fill"`.

‎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.33",
7+
"boot-cell": "^1.0.0-rc.34",
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/Carousel/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ export class CarouselPage extends mixin<{}, CarouselPageState>() {
9595
</Fragment>
9696
))}
9797
</div>
98-
<footer class="container">
99-
<p class="float-right">
98+
<footer className="container">
99+
<p className="float-right">
100100
<a href="#top">Back to top</a>
101101
</p>
102102
<p>

‎source/page/Example/Cover.less‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.cover-container {
2+
background-color: #333;
3+
text-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.5);
4+
box-shadow: inset 0 0 5rem rgba(0, 0, 0, 0.5);
5+
& > * {
6+
max-width: 42em;
7+
}
8+
:global {
9+
/* Links */
10+
a,
11+
a:focus,
12+
a:hover {
13+
color: white;
14+
}
15+
.nav-masthead .nav-link {
16+
font-weight: 700;
17+
border-bottom-width: 4px;
18+
}
19+
/* Custom default button */
20+
.btn-secondary,
21+
.btn-secondary:hover,
22+
.btn-secondary:focus {
23+
color: #333;
24+
text-shadow: none; /* Prevent inheritance from `body` */
25+
background-color: white;
26+
border: 0.05rem solid white;
27+
}
28+
.btn-lg {
29+
padding: 0.75rem 1.25rem;
30+
font-weight: 700;
31+
}
32+
}
33+
}
34+
/*
35+
* Header
36+
*/
37+
.masthead {
38+
margin-bottom: 2rem;
39+
}

‎source/page/Example/Cover.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import { createCell } from 'web-cell';
2+
import classNames from 'classnames';
3+
import { Nav } from 'boot-cell/source/Navigator/Nav';
4+
import { Button } from 'boot-cell/source/Form/Button';
5+
6+
import style from './Cover.less';
7+
8+
export function CoverPage() {
9+
return (
10+
<div
11+
className={classNames(
12+
'd-flex',
13+
'flex-column',
14+
'vw-100',
15+
'vh-100',
16+
'p-3',
17+
'text-center',
18+
'text-white',
19+
style['cover-container']
20+
)}
21+
>
22+
<header className="masthead w-100 mx-auto mb-auto">
23+
<h3 className="masthead-brand mb-0 float-md-left">Cover</h3>
24+
<Nav
25+
className="text-white-50 float-md-right"
26+
itemMode="masthead"
27+
align="center"
28+
list={[
29+
{ title: 'Home' },
30+
{ title: 'Features' },
31+
{ title: 'Contact' }
32+
]}
33+
/>
34+
</header>
35+
36+
<main className="mx-auto py-0 px-4">
37+
<h1>Cover your page.</h1>
38+
<p className="lead">
39+
Cover is a one-page template for building simple and
40+
beautiful home pages. Download, edit the text, and add your
41+
own fullscreen background photo to make it your own.
42+
</p>
43+
44+
<Button kind="secondary" size="lg" href="#">
45+
Learn more
46+
</Button>
47+
</main>
48+
49+
<footer className="mx-auto mt-auto text-white-50">
50+
<p>
51+
Cover template for <a href=".">BootCell</a>, by{' '}
52+
<a target="_blank" href="https://twitter.com/mdo">
53+
@mdo
54+
</a>{' '}
55+
&amp;
56+
<a target="_blank" href="https://github.com/TechQuery">
57+
@TechQuery
58+
</a>
59+
.
60+
</p>
61+
</footer>
62+
</div>
63+
);
64+
}

‎source/page/Example/Offcanvas.less‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
.text-white-50 {
2-
color: rgba(255, 255, 255, 0.5);
3-
}
4-
51
.bg-purple {
62
background-color: #6f42c1;
73
}

‎source/page/Example/Offcanvas.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export function OffcanvasPage() {
7979
'align-items-center',
8080
'p-3',
8181
'my-3',
82-
style['text-white-50'],
82+
'text-white-50',
8383
style['bg-purple'],
8484
'rounded',
8585
'shadow-sm'

‎source/page/Example/Pricing/index.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -40,22 +40,24 @@ export function PricingPage() {
4040
customization.
4141
</p>
4242
</div>
43-
<div class="container">
44-
<div class="card-deck mb-3 text-center">
43+
<div className="container">
44+
<div className="card-deck mb-3 text-center">
4545
{prices.map(({ level, amount, details, action }, index) => (
4646
<Card
47-
class="mb-4 shadow-sm"
47+
className="mb-4 shadow-sm"
4848
header={
49-
<h4 class="my-0 font-weight-normal">{level}</h4>
49+
<h4 className="my-0 font-weight-normal">
50+
{level}
51+
</h4>
5052
}
5153
title={
5254
<span style={{ fontSize: '2.5rem' }}>
5355
${amount}{' '}
54-
<small class="text-muted">/ mo</small>
56+
<small className="text-muted">/ mo</small>
5557
</span>
5658
}
5759
>
58-
<ul class="list-unstyled mt-3 mb-4">
60+
<ul className="list-unstyled mt-3 mb-4">
5961
{details.map(item => (
6062
<li>{item}</li>
6163
))}
@@ -66,14 +68,14 @@ export function PricingPage() {
6668
</Card>
6769
))}
6870
</div>
69-
<footer class="pt-4 my-md-5 pt-md-5 border-top">
70-
<div class="row">
71-
<div class="col-12 col-md">
71+
<footer className="pt-4 my-md-5 pt-md-5 border-top">
72+
<div className="row">
73+
<div className="col-12 col-md">
7274
<img
7375
style={{ width: '24px' }}
7476
src="https://web-cell.dev/WebCell-0.f1ffd28b.png"
7577
/>
76-
<small class="d-block mb-3 text-muted">
78+
<small className="d-block mb-3 text-muted">
7779
© 2017-{new Date().getFullYear()}
7880
</small>
7981
</div>

‎source/page/Example/index.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ export default [
1111
paths: ['example/product'],
1212
component: async () => (await import('./Product')).ProductPage
1313
},
14+
{
15+
paths: ['example/cover'],
16+
component: async () => (await import('./Cover')).CoverPage
17+
},
1418
{
1519
paths: ['example/carousel'],
1620
component: async () => (await import('./Carousel')).CarouselPage

0 commit comments

Comments
 (0)