web-dev-qa-db-ja.com

AppBarとToolBarとは何ですか？

すべてのmaterial-uiの例は、Appbar内のツールバーを示しています。なぜAppbarだけではないのですか？ 2つの違いは何ですか？

https://material.io/design/components/ にはがありませんにはツールバーコンポーネントがあり、「アプリバー：上部」のみです。

https://material.io/develop/web/components/toolbar/ は、「既存のMDCToolbarコンポーネントとスタイルは将来のリリースで削除される」と述べています

では、material-ui Toolbarは最終的にはなくなるのですか？

reactjsmaterial-uimaterial-components
19
Melissa

各コンポーネントによって生成されるデフォルトのCSSプロパティを見ていました。 Toolbarの主な目的は、子をインライン表示で表示することです（要素が隣り合って配置されます）、何かAppbarは機能しません。 AppBarコンポーネントは、display：flexおよびflex-direction：columnを使用します。つまり、直接の子孫は互いの上に積み重ねられます。一方、ツールバーはdisplay：flexも使用しますが、flex-directionは設定しません。 、つまり、デフォルト値rowを使用します。つまり、Buttonコンポーネントはdisplay：inline-blockを使用します。これが、要素がToolbarコンポーネント内で隣り合って配置される理由です。

たとえば、子として2つのButtonを持つAppbarとToolbarがあるとします。

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

このコードの結果が表示されます ここ

ただし、Toolbarを削除してButton sをAppBarコンポーネントの直下に配置すると、次のようになります。

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

ボタンはAppBarコンポーネントの直接の子孫になり、互いの上に積み重ねられるため、結果は大きく異なります（ here を表示）。

ご覧のとおり、AppBarとToolbarは目的が異なります。それが、私がToolbarが消えることはないと思う理由です。

25
Josué Cortina