compose-preview Material 3 Design Kit

App bars

8 of 34 components implemented · Open in Figma

Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets
Configuration=Small-centered, Elevation=Flat — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#CenterTopAppBar Configuration=Search, Elevation=Flat — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/Search.kt#AppBarWithSearchSticker Configuration=Small-image, Elevation=Flat — no code behind this Configuration=Small, Elevation=Flat — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#SmallTopAppBar Configuration=Medium, Elevation=Flat — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#MediumTopAppBarSticker Configuration=Large, Elevation=Flat — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#LargeTopAppBarSticker Configuration=Small-centered, Elevation=On-scroll — no code behind this Configuration=Search, Elevation=On-scroll — no code behind this Configuration=Small-image, Elevation=On-scroll — no code behind this Configuration=Small, Elevation=On-scroll — no code behind this Configuration=Medium, Elevation=On-scroll — no code behind this Configuration=Large, Elevation=On-scroll — no code behind this Alignment=Left aligned — no code behind this Alignment=Centered — no code behind this Alignment=Left aligned — no code behind this Alignment=Centered — no code behind this Size=Small, Alignment=Centered — no code behind this Size=Small, Alignment=Left — no code behind this Size=Medium, Alignment=Centered — no code behind this Size=Medium, Alignment=Left — no code behind this Size=Large, Alignment=Centered — no code behind this Size=Large, Alignment=Left — no code behind this size=Image — no code behind this size=Monogram — no code behind this Elevation=Surface container, Configuration=Center-aligned — no code behind this Elevation=Surface container, Configuration=Small — no code behind this Elevation=Surface container high, Configuration=Center-aligned — no code behind this Elevation=Surface container high, Configuration=Small — no code behind this Elevation=Surface container highest, Configuration=Center-aligned — no code behind this Elevation=Surface container highest, Configuration=Small — no code behind this Icons=4 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/BottomAppBars.kt#BottomAppBarSticker Icons=3 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/BottomAppBars.kt#BottomAppBarSticker Icons=2 — catalog/src/main/kotlin/ee/schimke/m3catalog/sections/BottomAppBars.kt#BottomAppBarSticker Icons=1 — no code behind this
8 of 34 components implemented
Configuration=Small-centered, Elevation=Flatcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#CenterTopAppBar Configuration=Search, Elevation=Flatcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/Search.kt#AppBarWithSearchSticker Configuration=Small-image, Elevation=Flatno code behind this Configuration=Small, Elevation=Flatcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#SmallTopAppBar Configuration=Medium, Elevation=Flatcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#MediumTopAppBarSticker Configuration=Large, Elevation=Flatcatalog/src/main/kotlin/ee/schimke/m3catalog/sections/TopAppBars.kt#LargeTopAppBarSticker Configuration=Small-centered, Elevation=On-scrollno code behind this Configuration=Search, Elevation=On-scrollno code behind this Configuration=Small-image, Elevation=On-scrollno code behind this Configuration=Small, Elevation=On-scrollno code behind this Configuration=Medium, Elevation=On-scrollno code behind this Configuration=Large, Elevation=On-scrollno code behind this Alignment=Left alignedno code behind this Alignment=Centeredno code behind this Alignment=Left alignedno code behind this Alignment=Centeredno code behind this Size=Small, Alignment=Centeredno code behind this Size=Small, Alignment=Leftno code behind this Size=Medium, Alignment=Centeredno code behind this Size=Medium, Alignment=Leftno code behind this Size=Large, Alignment=Centeredno code behind this Size=Large, Alignment=Leftno code behind this size=Imageno code behind this size=Monogramno code behind this Elevation=Surface container, Configuration=Center-alignedno code behind this Elevation=Surface container, Configuration=Smallno code behind this Elevation=Surface container high, Configuration=Center-alignedno code behind this Elevation=Surface container high, Configuration=Smallno code behind this Elevation=Surface container highest, Configuration=Center-alignedno code behind this Elevation=Surface container highest, Configuration=Smallno code behind this Icons=4catalog/src/main/kotlin/ee/schimke/m3catalog/sections/BottomAppBars.kt#BottomAppBarSticker Icons=3catalog/src/main/kotlin/ee/schimke/m3catalog/sections/BottomAppBars.kt#BottomAppBarSticker Icons=2catalog/src/main/kotlin/ee/schimke/m3catalog/sections/BottomAppBars.kt#BottomAppBarSticker Icons=1no code behind this