How to customize the Immersive Reader button
This article demonstrates how to customize the button that launches the Immersive Reader, to fit the needs of your application.
Add the Immersive Reader button
The Immersive Reader SDK provides default styling for the button that launches the Immersive Reader. To enable this styling, use the immersive-reader-button
class attribute.
<div class='immersive-reader-button'></div>
Customize the button style
To set the style of the button, use the data-button-style
attribute. The allowed values are icon
, text
, and iconAndText
. The default value is icon
.
Icon button
Use the following code to render the icon button.
<div class='immersive-reader-button' data-button-style='icon'></div>
Text button
Use the following code to render the button text.
<div class='immersive-reader-button' data-button-style='text'></div>
Icon and text button
Use the following code to render both the button and the text.
<div class='immersive-reader-button' data-button-style='iconAndText'></div>
Customize the button text
To configure the language and the alt text for the button, use the data-locale
attribute. The default language is English.
<div class='immersive-reader-button' data-locale='fr-FR'></div>
Customize the size of the icon
To configure the size of the Immersive Reader icon, use the data-icon-px-size
attribute. This sets the size of the icon in pixels. The default size is 20 px.
<div class='immersive-reader-button' data-icon-px-size='50'></div>
Next step
Phản hồi
https://aka.ms/ContentUserFeedback.
Sắp ra mắt: Trong năm 2024, chúng tôi sẽ dần gỡ bỏ Sự cố với GitHub dưới dạng cơ chế phản hồi cho nội dung và thay thế bằng hệ thống phản hồi mới. Để biết thêm thông tin, hãy xem:Gửi và xem ý kiến phản hồi dành cho