web-dev-qa-db-fra.com

Qu'est-ce que AppBar vs ToolBar?

Tous les exemples de matériel-ui montrent la barre d'outils dans Appbar. Pourquoi pas juste Appbar? Quelle est la différence entre les deux?

https://material.io/design/components/ n'a pas un composant Toolbar, seulement "App bars: top" .

https://material.io/develop/web/components/toolbar/ dit "Le composant et les styles MDCToolbar existants seront supprimés dans une future version"

La barre d'outils Material-UI disparaîtra-t-elle finalement?

reactjsmaterial-uimaterial-components
12
Melissa

Je regardais les propriétés CSS par défaut produites par chaque composant. Le but principal de Barre d'outils est d'afficher ses enfants avec un affichage en ligne (les éléments sont placés les uns à côté des autres), quelque chose Appbar ne fait pas. Le composant AppBar utilise display: flex et flex-direction: column, cela signifie que les descendants directs sont empilés les uns sur les autres. D'autre part la barre d'outils utilise également display: flex, mais ne définit pas flex-direction , ce qui signifie qu'il utilise sa valeur par défaut: row. Cela étant dit, le composant Button utilise display: inline-block. C'est la raison pour laquelle les éléments sont placés côte à côte à l'intérieur des composants de la barre d'outils .

Disons, par exemple, que nous avons une Appbar avec une Barre d'outils avec deux boutons en tant qu'enfants:

<AppBar>
    <Toolbar>
        <Button variant="outlined" color="inherit" >
            Button 1
        </Button>
        <Button variant="outlined" color="inherit">
            Button 2
        </Button>
    </Toolbar>
</AppBar>

Le résultat de ce code est affiché ici

Mais, si nous supprimons la barre d'outils et plaçons le bouton directement sous le composant AppBar :

<AppBar>
    <Button variant="outlined" color="inherit" >
        Button 1
    </Button>
    <Button variant="outlined" color="inherit">
        Button 2
    </Button>
</AppBar>

le résultat sera très différent (affiché ici ), car maintenant les boutons sont des descendants directs du composant AppBar et ainsi, ils seront empilés les uns sur les autres.

Comme vous le voyez, AppBar et Barre d'outils ont des objectifs différents. C'est pourquoi je pense que la barre d'outils ne disparaîtra jamais.

16
Josué Cortina