Highlight experimental

검색어와 일치하는 텍스트를 <mark> 로 강조하는 유틸리티입니다. odbd-highlight recipe 로 마크 색을 입힙니다.

ark highlight

검색어

오디비디 디자인 시스템은 React 와 Svelte 래퍼를 한 단위로 움직여요.

<script lang="ts">
  import { Highlight } from '@odbd/svelte/highlight'

  let query = $state('디자인')
  const text = '오디비디 디자인 시스템은 React 와 Svelte 래퍼를 한 단위로 움직여요.'
</script>

<div style="display: grid; gap: 0.75rem; max-width: 30rem;">
  <label style="display: grid; gap: 0.25rem;">
    검색어
    <input class="odbd-input" data-size="md" bind:value={query} />
  </label>
  <p>
    <Highlight {text} {query} ignoreCase />
  </p>
</div>

Import

Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.

import * as Highlight from '@odbd/svelte/highlight'

import { Highlight } from '@odbd/react/highlight'