diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/alphabet.gif b/zh-cn/application-dev/reference/arkui-ts/figures/alphabet.gif
index a868febbcb800d9d0df0d3bfcaf57c64e570eb8a..2da86c5ed051d59da53a09379d30f8e2c963948a 100644
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/alphabet.gif and b/zh-cn/application-dev/reference/arkui-ts/figures/alphabet.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
index e69e31c86d638a6563ba4fdb0fbd80b6828d71fb..01aeebc2d138ffebf1dd3303f086e69785724d08 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
@@ -139,6 +139,10 @@ struct AlphabetIndexerSample {
           .popupFont({ size: 30, weight: FontWeight.Bolder }) // 弹出框内容的字体样式
           .itemSize(28) // 每一项的尺寸大小
           .alignStyle(IndexerAlign.Left) // 弹出框在索引条右侧弹出
+          .popupSelectedColor(0x00FF00)
+          .popupUnselectedColor(0x0000FF)
+          .popupItemFont({ size: 30, style: FontStyle.Normal })
+          .popupItemBackgroundColor(0xCCCCCC)
           .onSelect((index: number) => {
             console.info(this.value[index] + ' Selected!')
           })
@@ -166,4 +170,4 @@ struct AlphabetIndexerSample {
 }
 ```
 
-![alphabet](figures/alphabet.gif)
\ No newline at end of file
+![alphabet](figures/alphabet.gif)