near_me
시작하기
keyboard_arrow_downwidgets
컴포넌트
keyboard_arrow_downlocal_mall
리소스
keyboard_arrow_down머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.
리플 효과
리플 효과를 추가하면 요소를 클릭할 때 밖으로 퍼져 나가는 물결 모양의 효과가 발생합니다.
호출 방식
.mdui-ripple 클래스를 추가하는 것만으로 적용됩니다.
예시
<button class="mdui-btn mdui-ripple">button</button>
<button class="mdui-btn mdui-ripple mdui-color-blue">button</button>img, input 등 자식 요소를 포함할 수 없는 태그에 리플 효과를 사용하려면 부모 요소에 .mdui-ripple을 추가해야 합니다.
예시
<div class="mdui-ripple">
<img class="mdui-img-fluid" data-src="holder.js/100px250"/>
</div>리플 색상 지정
기본 리플은 어두운 배경입니다. .mdui-color-[color]를 통해 배경색을 지정하거나 페이지가 다크 테마인 경우 리플은 기본적으로 흰색입니다.
.mdui-ripple-[color] 클래스를 추가하여 리플 색상을 지정할 수 있습니다.
예시
<button class="mdui-btn mdui-ripple mdui-ripple-black mdui-color-yellow">black</button>
<button class="mdui-btn mdui-ripple mdui-ripple-white mdui-color-blue">white</button>
<button class="mdui-btn mdui-ripple mdui-ripple-red">red</button>
<button class="mdui-btn mdui-ripple mdui-ripple-blue">blue</button>