AppBar vs ToolBar가 뭐죠?

AppBar vs ToolBar가 뭐죠?

모든 material-ui 예제는 Appbar 내부에 툴바를 표시합니다.앱바 뿐만이 아니라그 둘의 차이는 무엇입니까?

https://material.io/design/components/에는 툴바 컴포넌트가 없습니다.단, "App bars: top"만 있습니다.

https://material.io/develop/web/components/toolbar/에서는 "기존 MDCToolbar 컴포넌트와 스타일은 향후 릴리즈에서 삭제될 예정입니다."

그럼 머티리얼 UI 툴바는 결국 없어질까요?

각 컴포넌트에서 생성되는 기본 CSS 속성을 확인했습니다.툴바의 주된 목적은 앱바가 할 수 없는 인라인 디스플레이(요소가 서로 옆에 배치됨)로 자녀를 표시하는 것입니다.AppBar 컴포넌트는 디스플레이: flex 및 flex-direction: 열을 사용합니다.이것은 직계 하위가 서로 겹쳐져 있음을 의미합니다.한편, 툴바는 표시: flex를 사용하지만 flex-direction을 설정하지 않습니다.이것은 기본값인 row를 사용한다는 것을 의미합니다.즉, Button 컴포넌트는 display: inline-block을 사용합니다.이것이 툴바 컴포넌트 내에서 요소가 서로 옆에 배치되는 이유입니다.

예를 들어 어린이용 두 개의 버튼이 있는 툴바가 있는 Appbar가 있다고 가정해 보겠습니다.

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

이 코드의 결과는 다음과 같습니다.

그러나 툴바를 삭제하고 AppBar 컴포넌트 바로 아래에 버튼을 배치하면 다음과 같습니다.

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

결과는 아래와 같이 매우 다를 것입니다. 왜냐하면 이제 버튼은 AppBar 컴포넌트의 직계 하위이므로 서로 겹쳐 쌓이게 됩니다.

보시는 바와 같이 AppBar와 Toolbar의 용도는 다릅니다.그래서 툴바는 절대 사라지지 않을 거라고 생각해요.

AppBar는 문서를 구성하는 데 사용됩니다.페이지 제목과 네비게이션 링크 등 태그 안에 넣을 내용을 입력합니다.F12 키를 눌러 페이지를 검사하면 AppBar가 만든<header>태그 -> AppBar를 사용하여 페이지 소개 및 네비게이션 콘텐츠를 넣을 수 있습니다.

도구 모음을 실제 도구 벨트로 시각화할 수 있습니다.가상 세계에서는 툴 대신 아이콘과 버튼을 배치합니다.제조원이 벨트에 붙이는 것과 같이 툴바에 브랜드명을 추가할 수도 있습니다.-> 툴바는 요소를 수평선상에 배치할 수 있는 래퍼입니다.

AppBar는 툴바 없이 사용할 수 있으며 툴바를 AppBar 내부에 배치할 필요가 없습니다. , 「」를 실행하는 합니다.<AppBar><Toolbar>...</Toolbar></AppBar>페이지 중앙에 있는 바를 아이콘으로 표시하고 싶다면 AppBar가 없는 툴바가 좋습니다.

언급URL : https://stackoverflow.com/questions/52653103/what-is-appbar-vs-toolbar