diff --git a/docs/content/component/help-bubble/helpbubble-options-closetrigger.png b/docs/content/component/help-bubble/helpbubble-options-closetrigger.png new file mode 100644 index 000000000..3eff4bb7d Binary files /dev/null and b/docs/content/component/help-bubble/helpbubble-options-closetrigger.png differ diff --git a/docs/content/component/help-bubble/helpbubble-options-modal.png b/docs/content/component/help-bubble/helpbubble-options-modal.png new file mode 100644 index 000000000..dd30126f6 Binary files /dev/null and b/docs/content/component/help-bubble/helpbubble-options-modal.png differ diff --git a/docs/content/component/help-bubble/helpbubble-options-offset.png b/docs/content/component/help-bubble/helpbubble-options-offset.png new file mode 100644 index 000000000..ec3e83976 Binary files /dev/null and b/docs/content/component/help-bubble/helpbubble-options-offset.png differ diff --git a/docs/content/component/help-bubble/helpbubble-options-placement.png b/docs/content/component/help-bubble/helpbubble-options-placement.png new file mode 100644 index 000000000..c79c9345a Binary files /dev/null and b/docs/content/component/help-bubble/helpbubble-options-placement.png differ diff --git a/docs/content/component/help-bubble/usage.mdx b/docs/content/component/help-bubble/usage.mdx index 7dd15d6da..def22d472 100644 --- a/docs/content/component/help-bubble/usage.mdx +++ b/docs/content/component/help-bubble/usage.mdx @@ -4,7 +4,7 @@ slug: /component/help-bubble/usage ## 구조도 -![menu FAB usage anatomy](./anatomy.png) +![help bubble usage anatomy](./anatomy.png) 1. Trigger 2. Anchor @@ -16,6 +16,59 @@ slug: /component/help-bubble/usage ## 옵션 + + + ![helpbubble options text](./helpbubble-options-placement.png) + + + Placement + + Help Bubble은 Trigger를 기준으로 위치를 지정합니다. 다양한 Placement + 옵션을 적절히 배치하여, 유저가 최대한 편리하게 정보를 이해하고 접근할 수 + 있도록 도와줍니다. + + + + + + + ![helpbubble options offset](./helpbubble-options-offset.png) + + + Offset + + Offset은 Help Bubble과 Trigger 사이의 거리 값입니다. 기본값은 8입니다. + + + + + + + ![helpbubble options modal](./helpbubble-options-modal.png) + + + Modal + + Modal 옵션은 Backdrop 여부에 따라 제공합니다. 유저의 화면을 일시적으로 + 멈춘 뒤 전달해야 하는 중요한 정보인 경우에 해당 옵션을 사용합니다. + + + + + + + ![helpbubble options closetrigger](./helpbubble-options-closetrigger.png) + + + Close Trigger + + Help Bubble은 Close trigger를 가질 수 있습니다. 유저가 Help Bubble의 + 내용을 모두 읽었거나, 더 이상 필요하지 않을 때 Close trigger를 통해 닫을 + 수 있습니다. + + + + ### 옵션 테이블 | 속성 | 값 | 기본값 |