몰입형 리더 단추를 사용자 지정하는 방법

이 문서에서는 애플리케이션의 요구 사항에 맞게 몰입형 리더를 시작하는 단추를 사용자 지정하는 방법을 보여줍니다.

몰입형 리더 단추 추가

몰입형 리더 SDK는 몰입형 리더를 시작하는 단추에 대한 기본 스타일을 제공합니다. immersive-reader-button 클래스 특성을 사용하여 이 스타일링을 활성화합니다.

<div class='immersive-reader-button'></div>

단추 스타일 사용자 지정

data-button-style 특성을 사용하여 단추의 스타일을 설정합니다. 허용되는 값은 icon, texticonAndText입니다. 기본값은 icon입니다.

아이콘 단추

<div class='immersive-reader-button' data-button-style='icon'></div>

그러면 다음이 렌더링됩니다.

This is the rendered Text button

텍스트 단추

<div class='immersive-reader-button' data-button-style='text'></div>

그러면 다음이 렌더링됩니다.

This is the rendered Immersive Reader button.

아이콘 및 텍스트 단추

<div class='immersive-reader-button' data-button-style='iconAndText'></div>

그러면 다음이 렌더링됩니다.

Icon button

단추 텍스트 사용자 지정

data-locale 특성을 사용하여 단추의 언어 및 대체 텍스트를 구성합니다. 기본 언어는 한국어(Korean)입니다.

<div class='immersive-reader-button' data-locale='fr-FR'></div>

아이콘 크기 사용자 지정

몰입형 리더 아이콘의 크기는 data-icon-px-size 특성을 사용하여 구성할 수 있습니다. 아이콘의 크기(픽셀 단위)를 설정합니다. 기본 크기는 20px입니다.

<div class='immersive-reader-button' data-icon-px-size='50'></div>

다음 단계