near_me
시작하기
keyboard_arrow_downwidgets
컴포넌트
keyboard_arrow_downlocal_mall
리소스
keyboard_arrow_down머티리얼 디자인 3 및 웹 컴포넌트 기반의 새로운 mdui 2가 출시되었습니다. mdui 2 개발 문서 보기.
플로팅 액션 버튼
플로팅 액션 버튼(FAB)은 화면 위에 떠 있는 원형 아이콘으로, 서브 메뉴 토글, 표시/숨김 애니메이션 등 다양한 동작 효과를 구현할 수 있습니다.
호출 방식
- 사용자 정의 속성을 통한 호출
- JavaScript를 통한 호출
예시
<button class="mdui-fab mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-fab mdui-color-theme-accent mdui-ripple">
<i class="mdui-icon material-icons">add</i></button
>.mdui-fab-mini 클래스를 추가하면 미니 플로팅 액션 버튼이 됩니다.
예시
<button class="mdui-fab mdui-fab-mini mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button>
<button
class="mdui-fab mdui-fab-mini mdui-color-theme-accent mdui-ripple"
>
<i class="mdui-icon material-icons">add</i></button
>예시
<button
class="mdui-fab mdui-color-theme-accent mdui-ripple"
id="fab-animation"
>
<i class="mdui-icon material-icons">add</i>
</button>
<button class="mdui-btn" id="fab-animation-show">show</button>
<button class="mdui-btn" id="fab-animation-hide">hide</button>
<script>
var fab = document.getElementById('fab-animation');
document
.getElementById('fab-animation-show')
.addEventListener('click', function () {
fab.classList.remove('mdui-fab-hide');
});
document
.getElementById('fab-animation-hide')
.addEventListener('click', function () {
fab.classList.add('mdui-fab-hide');
});
</script>
오른쪽 하단에 고정
플로팅 액션 버튼에 .mdui-fab-fixed 클래스를 추가하면 버튼을 창의 오른쪽 하단에 고정할 수 있습니다.
<button class="mdui-fab mdui-fab-fixed mdui-ripple">
<i class="mdui-icon material-icons">add</i>
</button><div class="mdui-fab-wrapper" id="exampleFab">
<button class="mdui-fab mdui-ripple mdui-color-theme-accent">
<!-- 기본 표시 아이콘 -->
<i class="mdui-icon material-icons">add</i>
<!-- 단축 다이얼 메뉴가 열리기 시작할 때 이 아이콘으로 부드럽게 전환됩니다. 아이콘 전환이 필요하지 않은 경우 이 요소를 생략할 수 있습니다. -->
<i class="mdui-icon mdui-fab-opened material-icons">add</i>
</button>
<div class="mdui-fab-dial">
<button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-pink">
<i class="mdui-icon material-icons">backup</i>
</button>
<button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-red">
<i class="mdui-icon material-icons">bookmark</i>
</button>
<button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-orange">
<i class="mdui-icon material-icons">access_alarms</i>
</button>
<button class="mdui-fab mdui-fab-mini mdui-ripple mdui-color-blue">
<i class="mdui-icon material-icons">touch_app</i>
</button>
</div>
</div>사용자 정의 속성을 통한 호출
이 방식은 JavaScript 코드를 작성할 필요가 없습니다. .mdui-fab-wrapper가 포함된 요소에 mdui-fab="options"를 추가하기만 하면 플러그인이 활성화됩니다.
<div class="mdui-fab-wrapper" mdui-fab="{trigger: 'hover'}">
......
</div>JavaScript를 통한 호출
컴포넌트 인스턴스화:
// selector는 CSS 선택자, DOM 요소 또는 HTML 문자열입니다.
// options는 플러그인 매개변수이며 아래의 매개변수 목록을 참조하세요.
var inst = new mdui.Fab(selector, options);메서드
| 메서드 이름 | 설명 |
|---|---|
open() | 단축 다이얼 메뉴를 엽니다. |
close() | 단축 다이얼 메뉴를 닫습니다. |
toggle() | 단축 다이얼 메뉴의 열림 상태를 전환합니다. |
show() | 애니메이션과 함께 전체 플로팅 액션 버튼을 표시합니다. |
hide() | 애니메이션과 함께 전체 플로팅 액션 버튼을 숨깁니다. |
getState() | 현재 단축 다이얼 메뉴의 열림 상태를 반환합니다. 네 가지 상태(opening, opened, closing, closed)가 포함됩니다. |