Skip to content

Commit 3bb91fe

Browse files
zZHorizonZzzZHorizonZz
committed
feat(top-app-bar): Move topappbar component
1 parent 10d7953 commit 3bb91fe

30 files changed

Lines changed: 930 additions & 0 deletions

‎all.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,5 +104,9 @@ export * from './tabs/secondary-tab.js';
104104
export * from './tabs/tabs.js';
105105
export * from './textfield/filled-text-field.js';
106106
export * from './textfield/outlined-text-field.js';
107+
export * from './topappbar/center-aligned-top-app-bar.js';
108+
export * from './topappbar/large-top-app-bar.js';
109+
export * from './topappbar/medium-top-app-bar.js';
110+
export * from './topappbar/small-top-app-bar.js';
107111
// go/keep-sorted end
108112
// LINT.ThenChange(:imports)

‎docs/components/images/topappbar/theming.png‎

5.55 KB
Loading

‎docs/components/top-app-bar.md‎

Lines changed: 385 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,385 @@
1+
<!-- catalog-only-start --><!-- ---
2+
name: Top App Bar
3+
dirname: topappbar
4+
-----><!-- catalog-only-end -->
5+
6+
<catalog-component-header>
7+
<catalog-component-header-title slot="title">
8+
9+
# Top App Bar
10+
11+
<!-- no-catalog-start -->
12+
13+
<!--*
14+
# Document freshness: For more information, see go/fresh-source.
15+
freshness: { owner: 'maicol07' reviewed: '2025-04-27' }
16+
tag: 'docType:reference'
17+
*-->
18+
19+
<!-- go/md-button -->
20+
21+
<!-- [TOC] -->
22+
23+
<!-- external-only-start -->
24+
**This documentation is fully rendered on the
25+
[Material Web Additions catalog](https://material-web-additions.maicol07.it/components/top-app-bar/).**
26+
<!-- external-only-end -->
27+
28+
<!-- no-catalog-end -->
29+
30+
[Top app bars](https://m3.material.io/components/top-app-bar) display navigation, actions, and text at the top of a screen.
31+
32+
</catalog-component-header-title>
33+
34+
<img
35+
class="hero"
36+
alt="A phone showing a saved podcasts screen with a small top app bar with the left arrow leading icon and three trailing icons: attachment, calendar and more."
37+
src="https://lh3.googleusercontent.com/gET6z1juQKqCuAykihEyJGjGMAQa6rHiwaRHjcIUYGjl4pU37Od1a36TyUBK2GwMMTtSGpZen3Eongv6eBwMi1QC11LzeaXcW-NhC-CrCAU1VsbkyMM=w1200">
38+
39+
</catalog-component-header>
40+
41+
* [Design article](https://m3.material.io/components/top-app-bar) <!-- {.external} -->
42+
* [API Documentation](#api)
43+
* [Source code](https://github.com/maicol07/material-web-additions/tree/main/top-app-bar)
44+
<!-- {.external} -->
45+
46+
<!-- catalog-only-start -->
47+
48+
<!--
49+
50+
## Interactive Demo
51+
52+
{% playgroundexample dirname=dirname %}
53+
54+
-->
55+
56+
<!-- catalog-only-end -->
57+
58+
## Types
59+
60+
<!-- no-catalog-start -->
61+
62+
![Top app bar types](https://firebasestorage.googleapis.com/v0/b/design-spec/o/projects%2Fgoogle-material-3%2Fimages%2Flz77955k-1.png?alt=media&token=7bc97a43-321a-4d2c-a232-9a5e5ae1463b "Center-aligned, small, medium and large top app bar types.")
63+
64+
<!-- no-catalog-end -->
65+
<!-- catalog-only-start -->
66+
67+
<!--
68+
69+
<div class="figure-wrapper">
70+
<figure
71+
class="types-image"
72+
style="justify-content:center;"
73+
title="Center-aligned, small, medium and large top app bar types."
74+
aria-label="The 4 types of top app bars">
75+
<style>
76+
.types-image .wrapper,
77+
.types-image .wrapper > * {
78+
display: flex;
79+
padding: 8px;
80+
flex-wrap: wrap;
81+
justify-content: center;
82+
}
83+
.types-image .wrapper > * {
84+
flex-direction: row;
85+
align-items: center;
86+
padding-inline: 16px;
87+
}
88+
.types-image span {
89+
display: inline-flex;
90+
background-color: var(--md-sys-color-inverse-surface);
91+
color: var(--md-sys-color-inverse-on-surface);
92+
padding: 8px;
93+
margin-block-start: 8px;
94+
width: 24px;
95+
height: 24px;
96+
border-radius: 50%;
97+
justify-content: center;
98+
align-items: center;
99+
}
100+
</style>
101+
<div class="wrapper">
102+
<div>
103+
<md-center-aligned-top-app-bar>
104+
<md-icon-button slot="start"><md-icon>menu</md-icon></md-icon-button>
105+
<div>Title Large</div>
106+
<md-icon-button slot="end"><md-icon>account_circle</md-icon></md-icon-button>
107+
</md-center-aligned-top-app-bar>
108+
<span>1</span>
109+
</div>
110+
<div>
111+
<md-small-top-app-bar>
112+
<md-icon-button slot="start"><md-icon>arrow_back</md-icon></md-icon-button>
113+
<div>Title Large</div>
114+
<div slot="end">
115+
<md-icon-button><md-icon>attach_file</md-icon></md-icon-button>
116+
<md-icon-button><md-icon>event</md-icon></md-icon-button>
117+
<md-icon-button><md-icon>more_vert</md-icon></md-icon-button>
118+
</div>
119+
</md-small-top-app-bar>
120+
<span>2</span>
121+
</div>
122+
<div>
123+
<md-medium-top-app-bar>
124+
<md-icon-button slot="start"><md-icon>arrow_back</md-icon></md-icon-button>
125+
<div>Headline Small</div>
126+
<div slot="end">
127+
<md-icon-button><md-icon>attach_file</md-icon></md-icon-button>
128+
<md-icon-button><md-icon>event</md-icon></md-icon-button>
129+
<md-icon-button><md-icon>more_vert</md-icon></md-icon-button>
130+
</div>
131+
</md-medium-top-app-bar>
132+
<span>3</span>
133+
</div>
134+
<div>
135+
<md-large-top-app-bar>
136+
<md-icon-button slot="start"><md-icon>arrow_back</md-icon></md-icon-button>
137+
<div>Headline Small</div><div slot="end">
138+
<md-icon-button><md-icon>attach_file</md-icon></md-icon-button>
139+
<md-icon-button><md-icon>event</md-icon></md-icon-button>
140+
<md-icon-button><md-icon>more_vert</md-icon></md-icon-button>
141+
</div>
142+
</md-large-top-app-bar>
143+
<span>4</span>
144+
</div>
145+
</div>
146+
</figure>
147+
</div>
148+
149+
-->
150+
151+
<!-- catalog-only-end -->
152+
153+
1. [Center-aligned](#center-aligned)
154+
2. [Small](#small)
155+
3. [Medium](#medium)
156+
4. [Large](#large)
157+
158+
## Usage
159+
160+
### Center-aligned
161+
A center-aligned top app bar is a top app bar with the title centered.
162+
163+
```html
164+
<md-center-aligned-top-app-bar>
165+
<md-icon-button slot="start">
166+
<md-icon>menu</md-icon>
167+
</md-icon-button>
168+
<div>Title Large</div>
169+
<md-icon-button slot="end">
170+
<md-icon>account_circle</md-icon>
171+
</md-icon-button>
172+
</md-center-aligned-top-app-bar>
173+
```
174+
175+
### Small
176+
A small top app bar is a top app bar with a title and up to 3 trailing icons.
177+
178+
```html
179+
<md-small-top-app-bar>
180+
<md-icon-button slot="start">
181+
<md-icon>arrow_back</md-icon>
182+
</md-icon-button>
183+
<div>Title Large</div>
184+
<div slot="end">
185+
<md-icon-button>
186+
<md-icon>attach_file</md-icon>
187+
</md-icon-button>
188+
<md-icon-button>
189+
<md-icon>event</md-icon>
190+
</md-icon-button>
191+
<md-icon-button>
192+
<md-icon>more_vert</md-icon>
193+
</md-icon-button>
194+
</div>
195+
</md-small-top-app-bar>
196+
```
197+
198+
### Medium
199+
A medium top app bar is a top app bar with a title and up to 3 trailing icons.
200+
201+
```html
202+
<md-medium-top-app-bar>
203+
<md-icon-button slot="start">
204+
<md-icon>arrow_back</md-icon>
205+
</md-icon-button>
206+
<div>Headline Small</div>
207+
<div slot="end">
208+
<md-icon-button>
209+
<md-icon>attach_file</md-icon>
210+
</md-icon-button>
211+
<md-icon-button>
212+
<md-icon>event</md-icon>
213+
</md-icon-button>
214+
<md-icon-button>
215+
<md-icon>more_vert</md-icon>
216+
</md-icon-button>
217+
</div>
218+
</md-medium-top-app-bar>
219+
```
220+
221+
### Large
222+
A large top app bar is a top app bar with an headline and up to 3 trailing icons.
223+
224+
```html
225+
<md-medium-top-app-bar>
226+
<md-icon-button slot="start">
227+
<md-icon>arrow_back</md-icon>
228+
</md-icon-button>
229+
<div>Headline Small</div>
230+
<div slot="end">
231+
<md-icon-button>
232+
<md-icon>attach_file</md-icon>
233+
</md-icon-button>
234+
<md-icon-button>
235+
<md-icon>event</md-icon>
236+
</md-icon-button>
237+
<md-icon-button>
238+
<md-icon>more_vert</md-icon>
239+
</md-icon-button>
240+
</div>
241+
</md-medium-top-app-bar>
242+
```
243+
244+
## Theming
245+
246+
Top app bars supports [Material theming](https://material-web.dev/theming/material-theming/) and can be customized
247+
in terms of color, typography, and shape.
248+
249+
### Tokens
250+
| Token | Default value |
251+
|------------------------------------------|------------------------------|
252+
| `--md-$type-top-app-bar-container-color` | `--md-sys-color-surface` |
253+
| `--md-$type-top-app-bar-container-shape` | `--md-sys-shape-corner-none` |
254+
255+
* [All tokens](https://github.com/maicol07/material-web-additions/blob/main/tokens/_md-comp-top-app-bar-small.scss)
256+
<!-- {.external} -->
257+
258+
### Example
259+
260+
<!-- no-catalog-start -->
261+
262+
![Image of a small top app bar with a different theme applied](images/top-app-bar/theming.png "Small top app bar theming example.")
263+
264+
<!-- no-catalog-end -->
265+
<!-- catalog-only-start -->
266+
267+
<!--
268+
269+
<div class="figure-wrapper">
270+
<figure
271+
style="justify-content:center;align-items:center;"
272+
class="styled-example"
273+
title="Top app bar theming example."
274+
aria-label="A small top app bar with a different theme applied">
275+
<style>
276+
.styled-example {
277+
--md-small-top-app-bar-container-shape: 8px;
278+
--md-small-top-app-bar-container-color: red;
279+
}
280+
</style>
281+
<md-small-top-app-bar>
282+
<md-icon-button slot="start">
283+
<md-icon>arrow_back</md-icon>
284+
</md-icon-button>
285+
<div>Headline Small</div>
286+
<div slot="end">
287+
<md-icon-button>
288+
<md-icon>attach_file</md-icon>
289+
</md-icon-button>
290+
<md-icon-button>
291+
<md-icon>event</md-icon>
292+
</md-icon-button>
293+
<md-icon-button>
294+
<md-icon>more_vert</md-icon>
295+
</md-icon-button>
296+
</div>
297+
</md-small-top-app-bar>
298+
</figure>
299+
</div>
300+
301+
-->
302+
303+
<!-- catalog-only-end -->
304+
305+
```html
306+
<style>
307+
.styled-example {
308+
--md-small-top-app-bar-container-shape: 8px;
309+
--md-small-top-app-bar-container-color: red;
310+
}
311+
</style>
312+
313+
<md-small-top-app-bar class="styled-example">
314+
<md-icon-button slot="start">
315+
<md-icon>arrow_back</md-icon>
316+
</md-icon-button>
317+
<div>Headline Small</div>
318+
<div slot="end">
319+
<md-icon-button>
320+
<md-icon>attach_file</md-icon>
321+
</md-icon-button>
322+
<md-icon-button>
323+
<md-icon>event</md-icon>
324+
</md-icon-button>
325+
<md-icon-button>
326+
<md-icon>more_vert</md-icon>
327+
</md-icon-button>
328+
</div>
329+
</md-small-top-app-bar>
330+
```
331+
332+
<!-- auto-generated API docs start -->
333+
334+
## API
335+
336+
337+
### MdCenterAlignedTopAppBar <code>&lt;md-center-aligned-top-app-bar&gt;</code>
338+
339+
#### Properties
340+
341+
<!-- mdformat off(autogenerated might break rendering in catalog) -->
342+
343+
Property | Attribute | Type | Default | Description
344+
--- | --- | --- | --- | ---
345+
`sticky` | `sticky` | `boolean` | `false` | Whether the top app bar is sticky.
346+
347+
<!-- mdformat on(autogenerated might break rendering in catalog) -->
348+
349+
### MdLargeTopAppBar <code>&lt;md-large-top-app-bar&gt;</code>
350+
351+
#### Properties
352+
353+
<!-- mdformat off(autogenerated might break rendering in catalog) -->
354+
355+
Property | Attribute | Type | Default | Description
356+
--- | --- | --- | --- | ---
357+
`sticky` | `sticky` | `boolean` | `false` | Whether the top app bar is sticky.
358+
359+
<!-- mdformat on(autogenerated might break rendering in catalog) -->
360+
361+
### MdMediumTopAppBar <code>&lt;md-medium-top-app-bar&gt;</code>
362+
363+
#### Properties
364+
365+
<!-- mdformat off(autogenerated might break rendering in catalog) -->
366+
367+
Property | Attribute | Type | Default | Description
368+
--- | --- | --- | --- | ---
369+
`sticky` | `sticky` | `boolean` | `false` | Whether the top app bar is sticky.
370+
371+
<!-- mdformat on(autogenerated might break rendering in catalog) -->
372+
373+
### MdSmallTopAppBar <code>&lt;md-small-top-app-bar&gt;</code>
374+
375+
#### Properties
376+
377+
<!-- mdformat off(autogenerated might break rendering in catalog) -->
378+
379+
Property | Attribute | Type | Default | Description
380+
--- | --- | --- | --- | ---
381+
`sticky` | `sticky` | `boolean` | `false` | Whether the top app bar is sticky.
382+
383+
<!-- mdformat on(autogenerated might break rendering in catalog) -->
384+
385+
<!-- auto-generated API docs end -->

0 commit comments

Comments
 (0)