near_me
시작하기
keyboard_arrow_downwidgets
컴포넌트
keyboard_arrow_downlocal_mall
리소스
keyboard_arrow_down머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.
아이콘
mdui에는 Material Icons의 932개 아이콘이 내장되어 있으며, 이 외에도 서드 파티 아이콘을 사용할 수 있습니다.
사용 예시
모든 Material Icons 아이콘 목록을 제공하며, 아이콘을 클릭하여 코드를 직접 복사할 수 있습니다.
예시
<i class="mdui-icon material-icons">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-red">check_box</i>
<i class="mdui-icon material-icons mdui-text-color-theme">check_box</i>아이콘이 플랫 버튼 또는 플로팅 액션 버튼에 사용되는 경우, 아이콘을 버튼의 왼쪽 또는 오른쪽에 배치하기 위해 mdui-icon-left 또는 mdui-icon-right 클래스를 추가해야 합니다.
예시
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-left material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow mdui-ripple">
<i class="mdui-icon mdui-icon-right material-icons">share</i> Share
</button>
<button class="mdui-btn mdui-color-yellow" disabled>
<i class="mdui-icon mdui-icon-right material-icons">share</i>
Share</button
>서드 파티 아이콘 라이브러리
서드 파티 아이콘 라이브러리를 사용하려면 먼저 해당 라이브러리의 CSS 파일을 가져와야 합니다.
그 다음 <i> 요소에 mdui-icon 클래스와 해당 아이콘 라이브러리의 클래스 이름을 추가합니다.
아래 예시는 ionicons 아이콘을 사용합니다.
예시
<link rel="stylesheet" href="ionicons.css" />
<i class="mdui-icon ion-plus-circled"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-red"></i>
<i class="mdui-icon ion-plus-circled mdui-text-color-theme"></i>
<button class="mdui-btn mdui-ripple mdui-btn-icon">
<i class="mdui-icon ion-plus-round"></i>
</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon mdui-icon-left ion-share"></i> Share
</button>
<button class="mdui-btn mdui-ripple mdui-fab mdui-color-theme-accent">
<i class="mdui-icon ion-plus-round"></i></button
>