Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[AppBar] Prominent variant

See original GitHub issue

This is not a v0.x issue.
I have searched the issues of this repository and believe that this is not a duplicate.

Hello,

it would be great to have the prominent variant for the AppBar component. It’s nice on desktop!

Examples 🌈

You can find an example in the official Material Components Web library : https://material-components.github.io/material-components-web-catalog/#/component/top-app-bar/prominent

You can also look at the specs : https://material.io/design/components/app-bars-top.html#anatomy

Issue Analytics

State:
Created 5 years ago
Reactions:8
Comments:11 (9 by maintainers)

Top GitHub Comments

2reactions

mbrookescommented, Oct 10, 2019

for extra pints

You sure you aren’t British? 🍻 😆

I’m not in love with 'prominent dense' though.

For other components we have the dense prop. (See; https://material-ui.com/customization/density/). That would avoid the need for compound variants such as “prominent dense”.

0reactions

burtyishcommented, Oct 16, 2019

Between the breaking change, and the need to style the children, I wonder if for now a demo in the docs based on your example would be the better option?

@mbrookes you got it. See my PR for docs above.

Top Results From Across the Web

[AppBar] Prominent variant #14246 - mui/material-ui - GitHub

@mbrookes a use case I've encountered recently is having an app bar with quite long page title and icons/buttons on it, on a...

App Bar React component - Material UI - MUI

The App Bar displays information and actions relating to the current screen. The top App bar provides content and actions related to the...

App bars: top - Material Design

Prominent top app bars can be used for longer titles, to house imagery, or to provide a stronger presence to the top app...

v-app-bar API - Vuetify

name type default #absolute boolean false #app boolean false #bottom boolean false

App Bar | React Native Material

The App Bar displays information and actions relating to the current screen. import React from "react"; import { AppBar } from "rn-material"; const...