docs(NoticeBar): add the content of css vars (#2030)

Co-authored-by: anlyyao <[email protected]>

docs/mobile/api/notice-bar.en-US.md

@@ -0,0 +1,65 @@
+---
+title: Noticebar
+description: Displays a prompt message to the user at the bottom of the navigation bar.
+spline: base
+isComponent: true
+toc: false
+---
+
+## Code Demo
+
+### 01 Component Type
+
+A text-only bulletin board
+
+{{ base }}
+
+Bulletin board with icon
+
+{{ iconDemo }}
+
+Bulletin board with closed
+
+{{ suffixIcon }}
+
+Bring the port to the bulletin board
+
+{{ event }}
+
+Custom style bulletin board
+
+{{ custom }}
+
+A bulletin board for custom content
+
+{{ customization }}
+
+### 02 Component Status
+
+The types of bulletin boards include info, warning, success, and error.
+
+{{ theme }}
+
+### 03 Scrolling Bulletin Board
+
+Scrolling bulletin boards available in horizontal and vertical
+
+{{ scrolling }}
+
+
+### CSS Variables
+
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @text-color-primary | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @text-color-placeholder | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | - 

docs/mobile/api/notice-bar.md

@@ -1,36 +1,66 @@
 ---
 title: Noticebar 公告栏
-description: 在导航栏下方，用于给用户显示提示消息
+description: 在导航栏下方，用于给用户显示提示消息。
 spline: base
 isComponent: true
 toc: false
 ---
 
-### 基础静态公告栏
+## 代码演示
+
+### 01 组件类型
+
+纯文字的公告栏
 
 {{ base }}
 
-### 带图标静态公告栏
+带图标的公告栏
 
-{{ icon }}
+{{ iconDemo }}
 
-### 带操作公告栏
+带关闭的公告栏
 
-{{ event }}
+{{ suffixIcon }}
 
-### 滚动公告栏
+带入口的公告栏
 
-{{ scrolling }}
+{{ event }}
 
-### 自定义样式
+自定样式的公告栏
 
 {{ custom }}
 
-### 不同状态的公告栏
+自定义内容的公告栏
+
+{{ customization }}
+
+### 02 组件状态
+
 公告栏类型有普通（info）、警示（warning）、成功（success）、错误（error）
 
 {{ theme }}
 
-### 多行文字消息栏
+### 03 可滚动的公告栏
 
-{{ customization }}
+可滚动公告栏有水平 (horizontal) 和垂直 (vertical)
+
+{{ scrolling }}
+
+
+
+### CSS Variables
+
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-notice-bar-error-bg-color | @error-color-1 | - 
+--td-notice-bar-error-color | @error-color-6 | - 
+--td-notice-bar-font-color | @text-color-primary | - 
+--td-notice-bar-info-bg-color | @brand-color-light | - 
+--td-notice-bar-info-color | @brand-color | - 
+--td-notice-bar-operation-font-color | @brand-color | - 
+--td-notice-bar-success-bg-color | @success-color-1 | - 
+--td-notice-bar-success-color | @success-color | - 
+--td-notice-bar-suffix-icon-color | @text-color-placeholder | - 
+--td-notice-bar-warning-bg-color | @warning-color-1 | - 
+--td-notice-bar-warning-color | @warning-color | -