KRDS Vue

플로팅 버튼 Floating action button ​

플로팅 버튼은 사용자가 화면에서 가장 자주 사용하고 중요한 작업에 단일 또는 다중으로 사용한다. 페이지가 스크롤될 때에도 화면 우측 하단에 계속 표현한다.

KRDS 가이드

단일형 ​

아이콘과 레이블로 하나의 주요 작업을 보여 줍니다. href를 주면 링크, 없으면 버튼으로 렌더링하고 click 이벤트를 보냅니다. hide-label을 주면 아이콘만 보이고 레이블은 화면낭독기용으로 남습니다. 화면 오른쪽 아래에 고정되므로 예제를 별도 화면(iframe)에 띄웁니다.

새 창에서 보기
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFloatingButton } from '@krds.ui/vue'

  const count = ref(0)
</script>

<template>
  <div>
    <p>오른쪽 아래 버튼을 눌러 보세요. 누른 횟수: {{ count }}</p>
    <KrdsFloatingButton label="채팅 상담" icon="ico-faq" @click="count++" />
  </div>
</template>

확장형 ​

items를 주면 확장형이 됩니다. + 버튼을 누르면 가림막과 함께 항목이 펼쳐지고, X 버튼·가림막·Esc 키로 닫습니다. 항목을 누르면 목록을 닫고 초점을 + 버튼으로 돌려준 뒤 select 이벤트(항목, 순서, 클릭 이벤트)를 보냅니다. 같은 페이지의 대상(#id)으로 이동하는 링크는 이동한 위치에서 키보드 탐색을 이어 가도록 초점을 놓습니다. 링크 항목은 event.preventDefault()로 라우터 이동에 쓸 수 있고, external을 주면 새 창으로 엽니다.

새 창에서 보기
vue
<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFloatingButton } from '@krds.ui/vue'
  import type { KrdsFloatingButtonItem } from '@krds.ui/vue'

  const items: KrdsFloatingButtonItem[] = [
    { label: '자주 묻는 질문', icon: 'ico-faq' },
    { label: '전화 상담', icon: 'ico-call', href: 'tel:1555-6365' },
    { label: '이메일 문의', icon: 'ico-email', href: 'mailto:krds@nia.or.kr' }
  ]
  const selected = ref('')
</script>

<template>
  <div>
    <p>오른쪽 아래 + 버튼으로 항목을 펼치세요. 선택한 항목: {{ selected || '없음' }}</p>
    <KrdsFloatingButton label="상담 메뉴" :items="items" @select="item => (selected = item.label)" />
  </div>
</template>

사용 지침 ​

  • 화면 오른쪽 아래에 배치하고, 화면의 모든 요소 위에 둡니다.
  • 플로팅 버튼이 2개 이상 필요하면 확장형을 쓰고, 항목은 3개 이하로 구성합니다.
  • 확장형의 깊이는 2수준 이하로만 사용합니다.
  • 자주 쓰는 행동이 여러 개이거나 지도·캘린더처럼 제스처 조작이 많은 화면에는 쓰지 않습니다.

KrdsFloatingButton ​

Props

이름타입기본값설명
itemsKrdsFloatingButtonItem[]-확장형 항목 (지정하면 확장형, 3개 이하 권장)
hrefstring-단일형 버튼의 링크 주소
iconstring'ico-plus'단일형 버튼의 아이콘 클래스
externalbooleanfalse단일형 링크를 새 창으로 열기 ('새 창 열림' 안내 포함)
hideLabelbooleanfalse단일형 레이블을 화면에서 숨김 (아이콘만 표시, 화면낭독기는 읽음)
label (필수)string-단일형 버튼의 레이블, 확장형은 확장 버튼의 이름 (화면에는 숨김)

Events

이름인자설명
select[item: KrdsFloatingButtonItem, index: number, event: MouseEvent]확장형 항목 선택 (링크 항목은 event.preventDefault()로 라우터 이동 가능)
click[event: MouseEvent]단일형 버튼 클릭