Highlight
Highlight (하이라이트)
텍스트의 일부 부분 문자열을 강조할 때 사용하는 컴포넌트예요. 검색어나 강조하고 싶은 단어를 하이라이트 처리할 때 유용해요.
출처: 문서
본문
사용법 (Usage)
import { Highlight } from "@chakra-ui/react"
<Highlight query="Hello">Hello World</Highlight>
예제 (Examples)
여러 개 (Multiple)
query prop에 문자열 배열을 넘겨서 여러 부분 문자열을 강조할 수 있어요.
| 예제 (highlight-multiple) |
커스텀 스타일 (Custom Style)
styles prop을 사용해서 강조된 텍스트의 스타일을 커스터마이즈할 수 있어요.
| 예제 (highlight-with-custom-style) |
검색어 (Search Query)
highlight 컴포넌트를 사용해서 검색어 결과를 강조할 수 있어요.
| 예제 (highlight-search-query) |
물결무늬와 함께 (With Squiggle)
강조된 텍스트 주위에 커스텀 물결무늬(squiggle) 이미지를 렌더링하는 예시예요. 더 화려한 효과에 유용해요.
| 예제 (highlight-with-squiggle) |
Props
| PropTable (Highlight / Highlight) |