Extended FAB(확장된 플로팅 액션 버튼)
화면에서 가장 일반적이거나 중요한 작업에 확장 FAB를 사용한다. 주요 작업을 표시하는 확장 FAB를 사용한다.
아이콘과 라벨 텍스트가 모두 포함되어 있다.
- 가장 눈에 띄는 유형의 버튼
- 일반 FAB(아이콘만 포함)가 명확하지 않을 수 있는 경우 사용
- 지속적으로 액세스해야 하는 긴 스크롤 보기가 있는 화면에서 확장 FAB를 사용
- 스크롤할 수 없는 뷰에서는 확장 FAB를 사용X, 기본 작업이 필요한 경우 대신 버튼을 사용
추가 강조
확장된 FAB는 제품의 기본 작업을 더 강조하고 명확하게 할 수도 있다. 텍스트 레이블과 아이콘을 모두 위한 공간이 있으므로 확장 FAB는 아이콘만으로는 너무 모호할 수 있는 경우 효과적일 수 있다.
아이콘만으로는 너무 모호할 수 있는 경우 확장된 FAB가 효과적일 수 있습니다.
- 확장 FAB의 아이콘과 라벨 간의 관계는 여전히 명확함.
- 기본 FAB와 마찬가지로 확장 FAB는 화면당 하나만 사용 (가장 눈에 띄는 구성 요소로서의 중요성을 방해)
- 추가적인 작업을 표시해야 하는 경우 확장 FAB를 소형 FAB와 페어링하세요.
- 확장 FAB는 일련의 작업에서 옵션으로 사용되어서는 안 됨 대신 일반 버튼사용
컨테이너
- 확장 FAB 컨테이너는 둥근 직사각형 모양
- 확장된 FAB 컨테이너의 너비는 고정되거나 유동적
- 확장된 FAB의 컨테이너 너비는 레이아웃 그리드 열에 의해 정의
아이콘
- 확장된 FAB의 아이콘은 해당 작업을 직관적으로 나타내야 함
- 왼쪽에서 오른쪽으로(LTR) 언어의 경우 cons는 텍스트 레이블 왼쪽에 배치되어야 합니다.
- 표준 FAB와 달리 확장 FAB에는 아이콘이 필요하지 않습니다.
- 확장 FAB에는 텍스트 레이블이 없는 아이콘이 있을 수 없음
라벨 텍스트
- 확장 FAB의 라벨은 해당 작업을 설명
- 더 짧은 텍스트를 선택할 수 없는 경우에만 텍스트를 자른다
- 텍스트 줄바꿈 X
- UI 읽기에 방해가 되므로 확장 FAB를 모바일 화면 상단에 배치 X
확장 FAB를 카드나 다른 컨테이너 안에 배치 X
고도 및 표면 레이어의 일관성을 방해하므로 앱 바에 FAB를 오버레이 X
확장된 FAB를 앱 바와 같은 요소를 제외한 UI의 나머지 부분 위에 배치
반응형 레이아웃
공간이 제한되면 확장 FAB를 표준 FAB로 전환할 수 있다.
예를 들어, 창 크기가 확장된 창 크기에서 소형 또는 중간 창 크기 클래스로 조정되거나 탐색 창이 열리는 경우 이런 일이 발생할 수 있다.
컴팩트 또는 중간 창 크기에서 확장 FAB는 화면 하단에 배치되어야 하며, 중앙 정렬되거나 화면 끝 가장자리에 정렬다(RTL 언어의 경우 오른쪽 정렬, LTR 언어의 경우 왼쪽 정렬).
확장된 창 크기에서는 확장된 FAB가 화면 오른쪽 하단이나 탐색 창 내에 나타나야 한다.
- 더 큰 창에서는 확장된 FAB를 LTR 및 RTL 언어 모두에서 오른쪽 정렬
- 더 큰 창에서는 확장된 FAB가 탐색 창 상단에 있을 수 있음
작은 창에서는 확장된 FAB를 중앙 정렬할 수 있습니다.
- 작은 창에서는 확장 FAB를 RTL 언어의 경우 오른쪽 정렬하거나 LTR 언어의 경우 왼쪽 정렬
- 하단 앱 바 위에 확장된 FAB를 사용 X (공간차지가 큼)
- 공간이 제한되면 확장 FAB가 표준 FAB로 전환
동작
-등장
확장된 FAB 표면은 입력 및 종료 전환 패턴을 사용하여 화면에 나타날 때 확장된다.
확장된 FAB는 어떤 형태로든 확장 및 적응 가능
-확장
확장된 FAB는 컨테이너 변환 전환 패턴을 사용하여 모든 모양으로 확장하고 조정할 수 있다. 여기에는 앱 구조의 일부만 가려지게 또는 전체 화면
-변형
확장된 FAB는 스크롤 시 접히고 뷰 하단에 도달하면 확장된다.
확장된 FAB는 스크롤하는 동안 축소 및 확장되고, 페이지 하단에 도달하면 확장된다.
- FAB는 확장된 FAB로 전환
- FAB 모양이 원형에서 알약 모양으로 변경
- FAB 아이콘이 왼쪽으로 이동
- FAB 텍스트 라벨이 안보여짐
