몰입형 리더 단추를 사용자 지정하는 방법
이 문서에서는 애플리케이션의 요구에 맞게 몰입형 리더 시작하는 단추를 사용자 지정하는 방법을 보여 줍니다.
몰입형 리더 단추 추가
몰입형 리더 SDK는 몰입형 리더 시작하는 단추에 대한 기본 스타일을 제공합니다. 이 스타일을 사용하려면 클래스 특성을 사용합니다 immersive-reader-button .
<div class='immersive-reader-button'></div>
단추 스타일 사용자 지정
단추의 스타일을 설정하려면 특성을 사용합니다 data-button-style . 허용되는 값은 icon, text 및 iconAndText입니다. 기본값은 icon입니다.
아이콘 단추
아이콘 단추를 렌더링하려면 다음 코드를 사용합니다.
<div class='immersive-reader-button' data-button-style='icon'></div>
텍스트 단추
다음 코드를 사용하여 단추 텍스트를 렌더링합니다.
<div class='immersive-reader-button' data-button-style='text'></div>
아이콘 및 텍스트 단추
다음 코드를 사용하여 단추와 텍스트를 모두 렌더링합니다.
<div class='immersive-reader-button' data-button-style='iconAndText'></div>
단추 텍스트 사용자 지정
단추에 대한 언어 및 대체 텍스트를 구성하려면 특성을 사용합니다 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>