near_me
시작하기
keyboard_arrow_downwidgets
컴포넌트
keyboard_arrow_downlocal_mall
리소스
keyboard_arrow_down머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.
툴바
툴바는 텍스트, 링크, 버튼, 아이콘 버튼 등의 요소를 포함할 수 있는 수평으로 배열된 컴포넌트의 집합입니다.
호출 방식
툴바 컴포넌트는 순수 CSS로 작성되었으며, HTML 코드를 작성하는 것만으로 바로 적용됩니다.
색상
기본 배경은 투명하며, .mdui-color-[color] 클래스를 추가하여 배경색을 설정할 수 있습니다.
스타일
기본 스타일
툴바에 배치할 수 있는 요소:
- 텍스트:
<span>Title</span> - 링크:
<a href="#">Link</a> - 버튼:
<a href="#" class="mdui-btn">button</a> - 아이콘 버튼:
<a href="#" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a> - 아이콘:
<i class="mdui-icon material-icons">menu</i>
<div class="mdui-toolbar-spacer"></div>를 추가하면 해당 요소 양쪽의 콘텐츠를 양 끝으로 밀어냅니다.
예시
<div class="mdui-toolbar">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>예시
<div class="mdui-toolbar mdui-color-theme">
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">menu</i>
</a>
<span class="mdui-typo-title">Title</span>
<div class="mdui-toolbar-spacer"></div>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">search</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">refresh</i>
</a>
<a href="javascript:;" class="mdui-btn mdui-btn-icon">
<i class="mdui-icon material-icons">more_vert</i>
</a>
</div>