컴포넌트
Highlight

Highlight

Highlight 컴포넌트는 화면의 특정 영역을 강조해서 보여줄 때 사용해요.

  • 하이라이팅될 아이템

    • 사용법

    형태

    Highlight 컴포넌트는 강조하고 싶은 영역을 children으로 감싸는 형태로 사용할 수 있어요. Highlight 컴포넌트가 열리면 강조한 영역을 제외한 화면 전체가 어두워져요.

    <Highlight open>
  <div>하이라이팅될 아이템</div>
</Highlight>

    강조하고 싶은 영역에 padding 적용하기

    Highlight 컴포넌트는 강조하고 싶은 영역에 padding을 적용할 수 있어요.

  • 하이라이팅될 아이템
    • <Highlight padding={10}>
  <div>하이라이팅될 아이템</div>
</Highlight>

    메시지 표시

    Highlight 컴포넌트에 강조 영역을 설명할 메시지를 표시할 수 있어요.

  • 하이라이팅될 아이템
    • <Highlight message="하이라이트 메시지" messageXAlignment="center">
  <div>하이라이팅될 아이템</div>
</Highlight>

    메시지 정렬과 색상 조정하기

    메시지의 가로/세로 정렬 방식과 색상을 조정할 수 있어요. 이때, 세로 정렬을 변경하면 화살표 아이콘의 위치가 세로 정렬 값에 따라 따라 달라지지만, 가로 정렬을 변경해도 화살표 아이콘의 위치는 항상 중앙으로 고정돼요.

    정렬 값을 설정하지 않으면 화면 너비와 강조 영역의 너비를 비교해서 결정해요.

  • 하이라이팅될 아이템
    • <Highlight
  message="하이라이트 메시지가 많이 긴 경우, 정렬 방식을 변경해서 표시할 수 있어요."
  messageXAlignment="right"
  messageYAlignment="bottom"
  messageColor="pink"
>
  <div>하이라이팅될 아이템</div>
</Highlight>

    앱브릿지와 함께 사용하기

    토스 앱 환경 내에서 앱브릿지로 네이티브 Highlight 컴포넌트를 호출할 수 있어요. 앱 내 특정 화면이나 단계에서 사용자의 주목을 유도하는 데 유용해요. 자세한 내용은 앱브릿지 문서(showHighlight)를 참고해주세요.

    인터페이스

    HighlightProps

    속성기본값타입
    open*
    -
    false|true
    강조 영역을 표시할지 여부예요. `true`로 설정하면 강조된 영역을 보여주고, `false`로 설정하면 강조가 해제돼요.
    padding
    0
    number
    강조할 영역 내부의 패딩 크기를 설정해요. 단위는 `px`이에요. 예를 들어, `padding={10}`으로 설정하면 강조 영역 내부에 10px의 여백이 생겨요.
    delay
    0
    number
    강조할 영역이 표시되기 전 지연 시간을 설정해요. 초 단위를 사용해요. 예를 들어, `delay={2}`로 설정하면 2초 후에 강조 영역이 나타나요.
    highlighterClassname
    -
    string
    강조할 영역 외부에 추가 스타일링을 위해 `className`을 설정해요.
    message
    -
    string|(props: { color?: string; style: React.CSSProperties; }) => React.ReactElement<any, string | React.JSXElementConstructor<any>>
    강조할 영역 외부에 표시할 설명 메시지에요. 문자열을 직접 전달하거나, `color`와 `style` 속성을 갖는 함수를 전달할 수 있어요. 예를 들어, 함수를 사용해 동적 메시지 스타일링이 가능해요.
    messageColor
    colors.white
    string
    강조할 메시지의 색상이에요. 색상 코드를 문자열로 지정해요. 기본값은 `colors.white`예요.
    messageXAlignment
    -
    "left"|"center"|"right"
    강조할 메시지의 가로 정렬 방식이에요. 기본값은 화면 너비와 강조 영역의 너비를 비교해서 자동으로 결정돼요.
    messageYAlignment
    -
    "top"|"bottom"
    강조할 메시지의 세로 정렬 방식이에요. 기본값은 화면 높이와 강조 영역의 높이를 비교해서 자동으로 결정돼요.
    onClick
    -
    () => void
    강조할 영역 외부를 클릭했을 때 실행되는 함수예요.
    onExited
    -
    () => void
    강조 애니메이션이 종료되었을 때 실행되는 함수예요. 애니메이션이 끝난 후 실행할 추가 작업이 있을 때 사용할 수 있어요.
    Grid ListIcon Button