머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.

버튼

버튼 스타일은 <a>、<button> 또는 <input> 요소에 사용할 수 있습니다.

버튼 안의 영어 알파벳은 모두 대문자로 바뀝니다.

호출 방식

버튼 컴포넌트는 순수 CSS로 작성되었으며, HTML 코드만 작성하면 바로 적용됩니다.

스타일

플랫 버튼

<a>, <button> 또는 <input> 요소에 .mdui-btn 클래스를 추가하면 플랫 버튼 스타일을 얻을 수 있습니다.

예시

<button class="mdui-btn">Button</button>
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-color-theme-accent mdui-ripple">button</button>

플로팅 버튼

플랫 버튼에 .mdui-btn-raised 클래스를 추가하면 버튼에 입체감(플로팅 효과)을 줄 수 있습니다.

예시

<button class="mdui-btn mdui-btn-raised">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-raised mdui-ripple mdui-color-theme-accent">Button</button>

아이콘 버튼

플랫 버튼에 .mdui-btn-icon 클래스를 추가하면 아이콘 버튼으로 변경할 수 있습니다.

예시

<button class="mdui-btn mdui-btn-icon">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn mdui-btn-icon mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

밀집형 버튼

밀집형 버튼은 일반 버튼보다 약간 작으며 마우스와 키보드가 주요 입력 방식인 환경에 적합합니다. 일반 버튼에 .mdui-btn-dense 클래스를 추가하기만 하면 됩니다.

예시

<button class="mdui-btn mdui-btn-dense mdui-color-theme-accent mdui-ripple">button</button>
<button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple">Button</button>
<button class="mdui-btn mdui-btn-icon mdui-btn-dense mdui-color-theme-accent mdui-ripple">
  <i class="mdui-icon material-icons">add</i>
</button>

비활성 상태

버튼에 disabled 속성을 추가하여 버튼을 비활성화합니다.

예시

<button class="mdui-btn" disabled>disabled</button>
<button class="mdui-btn mdui-btn-raised" disabled>disabled</button>
<button class="mdui-btn mdui-btn-icon" disabled>
  <i class="mdui-icon material-icons">add</i>
</button>

블록 레벨 요소

버튼에 .mdui-btn-block 클래스를 추가하면 부모 요소의 100% 너비로 늘어나며 블록(block) 레벨 요소로 변경됩니다.

예시

<div class="mdui-row-xs-2">
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
  <div class="mdui-col">
    <button class="mdui-btn mdui-btn-block mdui-color-theme-accent mdui-ripple">block</button>
  </div>
</div>

버튼 그룹

여러 버튼을 .mdui-btn-group 버튼 그룹 컨테이너 안에 넣으면 버튼 그룹이 됩니다. 버튼에 .mdui-btn-active 클래스를 추가하면 해당 버튼이 선택된 상태임을 나타냅니다.

예시

<div class="mdui-btn-group">
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_left</i>
  </button>
  <button type="button" class="mdui-btn mdui-btn-active">
    <i class="mdui-icon material-icons">format_align_center</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_right</i>
  </button>
  <button type="button" class="mdui-btn">
    <i class="mdui-icon material-icons">format_align_justify</i>
  </button>
</div>

CSS 클래스 목록

클래스 이름	설명
`.mdui-btn`	버튼을 정의합니다.
`.mdui-btn-raised`	플로팅 버튼을 정의합니다.
`.mdui-btn-icon`	아이콘 버튼을 정의합니다.
`.mdui-btn-block`	버튼을 블록 레벨 요소로 설정합니다.
`.mdui-btn-group`	버튼 그룹의 컨테이너입니다.
`.mdui-btn-active`	버튼 그룹 내의 버튼이 선택된 상태입니다.

리플 효과

플로팅 액션 버튼

버튼