Skip to content

Commit 179d5d4

Browse files
hperrinhperrin
committed
docs: improve banner demo
1 parent 3096ffc commit 179d5d4

File tree

3 files changed

+91
-51
lines changed

3 files changed

+91
-51
lines changed

‎site/src/routes/demo/banner/_General.svelte

Lines changed: 14 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@
1111
<Checkbox bind:checked={mobileStacked} />
1212
<span slot="label">Mobile Stacked</span>
1313
</FormField>
14-
<FormField>
15-
<Checkbox bind:checked={icon} />
16-
<span slot="label">Icon</span>
17-
</FormField>
1814
</div>
1915

2016
<pre class="status">Closed Reason: {closedReason}</pre>
@@ -27,36 +23,18 @@
2723
</Section>
2824
</Row>
2925
</TopAppBar>
30-
{#if icon}
31-
<Banner
32-
bind:open
33-
bind:centered
34-
bind:mobileStacked
35-
on:MDCBanner:closed={(event) => (closedReason = event.detail.reason)}
36-
>
37-
<Icon slot="icon" class="material-icons">favorite</Icon>
38-
<Label slot="label">This is a banner with an icon and some actions.</Label
39-
>
40-
<svelte:fragment slot="actions">
41-
<Button secondary>Secondary</Button>
42-
<Button>Primary</Button>
43-
</svelte:fragment>
44-
</Banner>
45-
{:else}
46-
<Banner
47-
bind:open
48-
bind:centered
49-
bind:mobileStacked
50-
on:MDCBanner:closed={(event) => (closedReason = event.detail.reason)}
51-
>
52-
<Label slot="label">This is a banner with no icon and some actions.</Label
53-
>
54-
<svelte:fragment slot="actions">
55-
<Button secondary>Secondary</Button>
56-
<Button>Primary</Button>
57-
</svelte:fragment>
58-
</Banner>
59-
{/if}
26+
<Banner
27+
bind:open
28+
bind:centered
29+
bind:mobileStacked
30+
on:MDCBanner:closed={(event) => (closedReason = event.detail.reason)}
31+
>
32+
<Label slot="label">This is a banner with no icon and some actions.</Label>
33+
<svelte:fragment slot="actions">
34+
<Button secondary>Secondary</Button>
35+
<Button>Primary</Button>
36+
</svelte:fragment>
37+
</Banner>
6038
<div>
6139
<img
6240
alt="Page content placeholder"
@@ -67,30 +45,15 @@
6745
</div>
6846

6947
<script>
70-
import Banner, { Label, Icon } from '@smui/banner';
48+
import Banner, { Label } from '@smui/banner';
7149
import Button from '@smui/button';
7250
import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
7351
import Checkbox from '@smui/checkbox';
7452
import FormField from '@smui/form-field';
7553
76-
let open = true;
54+
let open = false;
7755
let centered = false;
7856
let mobileStacked = true;
79-
let icon = true;
8057
8158
let closedReason = 'None yet.';
8259
</script>
83-
84-
<style>
85-
.top-app-bar-container {
86-
width: calc(100% - 24px);
87-
height: 400px;
88-
border: 1px solid
89-
var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.1));
90-
margin: 0 18px 18px 0;
91-
background-color: var(--mdc-theme-background, #fff);
92-
93-
overflow: auto;
94-
display: inline-block;
95-
}
96-
</style>

‎site/src/routes/demo/banner/_Icon.svelte

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<div>
2+
<FormField>
3+
<Checkbox bind:checked={open} />
4+
<span slot="label">Open</span>
5+
</FormField>
6+
<FormField>
7+
<Checkbox bind:checked={centered} />
8+
<span slot="label">Centered</span>
9+
</FormField>
10+
<FormField>
11+
<Checkbox bind:checked={mobileStacked} />
12+
<span slot="label">Mobile Stacked</span>
13+
</FormField>
14+
</div>
15+
16+
<pre class="status">Closed Reason: {closedReason}</pre>
17+
18+
<div class="top-app-bar-container">
19+
<TopAppBar variant="static">
20+
<Row>
21+
<Section>
22+
<Title>Top App Bar</Title>
23+
</Section>
24+
</Row>
25+
</TopAppBar>
26+
<Banner
27+
bind:open
28+
bind:centered
29+
bind:mobileStacked
30+
on:MDCBanner:closed={(event) => (closedReason = event.detail.reason)}
31+
>
32+
<Icon slot="icon" class="material-icons">favorite</Icon>
33+
<Label slot="label">This is a banner with an icon and some actions.</Label>
34+
<svelte:fragment slot="actions">
35+
<Button secondary>Secondary</Button>
36+
<Button>Primary</Button>
37+
</svelte:fragment>
38+
</Banner>
39+
<div>
40+
<img
41+
alt="Page content placeholder"
42+
src="/page-content.jpg"
43+
style="display: block; max-width: 100%; height: auto; margin: 1em auto;"
44+
/>
45+
</div>
46+
</div>
47+
48+
<script>
49+
import Banner, { Label, Icon } from '@smui/banner';
50+
import Button from '@smui/button';
51+
import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
52+
import Checkbox from '@smui/checkbox';
53+
import FormField from '@smui/form-field';
54+
55+
let open = false;
56+
let centered = false;
57+
let mobileStacked = true;
58+
59+
let closedReason = 'None yet.';
60+
</script>

‎site/src/routes/demo/banner/index.svelte

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,27 @@
1212
<Demo component="Shown above." file="banner/_Fixed.svelte" />
1313

1414
<Demo component={General} file="banner/_General.svelte">Banner options</Demo>
15+
16+
<Demo component={Icon} file="banner/_Icon.svelte">Banner with icon</Demo>
1517
</section>
1618

1719
<script>
1820
import Demo from '../../../components/Demo.svelte';
1921
import Fixed from './_Fixed.svelte';
2022
import General from './_General.svelte';
23+
import Icon from './_Icon.svelte';
2124
</script>
25+
26+
<style>
27+
* :global(.top-app-bar-container) {
28+
width: calc(100% - 24px);
29+
height: 400px;
30+
border: 1px solid
31+
var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.1));
32+
margin: 0 18px 18px 0;
33+
background-color: var(--mdc-theme-background, #fff);
34+
35+
overflow: auto;
36+
display: inline-block;
37+
}
38+
</style>

0 commit comments

Comments
 (0)