你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。
如何自定义沉浸式阅读器按钮
本文演示了如何自定义启动沉浸式阅读器的按钮，以满足应用程序的需求。
添加沉浸式阅读器按钮
沉浸式阅读器 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 属性。 默认语言为英语。
<div class='immersive-reader-button' data-locale='fr-FR'></div>
自定义图标大小
若要配置沉浸式阅读器图标的大小，请使用 data-icon-px-size 属性。 这会设置图标的大小（以像素为单位）。 默认大小为 20 像素。
<div class='immersive-reader-button' data-icon-px-size='50'></div>