@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/component/x5web-view.md

@@ -0,0 +1,100 @@
+---
+title: X5webView
+lang: zh-CN
+---
+
+# X5webView
+
+:::demo ## 基础用法
+
+component/x5-web-view/basic
+
+:::
+
+## API
+
+### Events
+
+| Name                    | Description             | Type                                                                |
+| ----------------------- | ------------------------| ------------------------------------------------------------------- |
+| onCanGoBack             | 是否可以后退               | ^[Function]`(can: boolean) => void`         |
+| onCanGoForward          | 是否可以前进               | ^[Function]`(can: boolean) => void`                               |
+| onCanGoBackOrForward    | 是否可以前进或后退          | ^[Function]`(can: boolean) => void`           |
+| onPageStarted           | 页面加载开始               | ^[Function]`(url: string) => void`                               |
+| onPageFinished          | 页面加载结束               | ^[Function]`(url: string) => void`                               |
+| onLoadResource          | 页面加载资源               | ^[Function]`(url: string) => void`                               |
+| onReceivedSslError      | 接收到Ssl错误              | ^[Function]`(event: QTX5WebViewEvent) => void`                |
+| onReceivedError         | 接收到错误                 | ^[Function]`(errorCode: number, description: string, failingUrl: string) => void`               |
+| shouldOverrideUrlLoading| 是否对UrlLoading进行拦截    | ^[Function]`(url: string) => void`               |
+| onJs2Vue                | js向vue发送事件            | ^[Function]`(value: string) => void`               |
+
+### Exposes
+
+| Name                             | Description                 | Type                                           |
+| -------------------------------- | --------------------------- | -----------------------------------------------|
+| loadUrl             |  [参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)         | ^[Function]`(url: string) => void`   |
+| evaluateJavascript             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => Promise<string \| undefined \| null>`   |
+| canGoBack             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| goBack             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| canGoForward             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| goForward             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| canGoBackOrForward             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(steps: number) => void`   |
+| goBackOrForward             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(steps: number) => void`   |
+| onResume             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| onPause             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| pauseTimers             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| resumeTimers             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`() => void`   |
+| destroy             | [参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)          | ^[Function]`() => void`   |
+| setJavaScriptEnabled             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setPluginState             | [参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)          | ^[Function]`(value: number) => void`   |
+| setJavaScriptCanOpenWindowsAutomatically             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setUseWideViewPort             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setLoadWithOverviewMode             | [参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)          | ^[Function]`(value: boolean) => void`   |
+| setSupportZoom             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setBuiltInZoomControls             | [参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)          | ^[Function]`(value: boolean) => void`   |
+| setDisplayZoomControls             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setAllowFileAccess             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setDomStorageEnabled             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setDatabaseEnabled             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setAppCacheEnabled             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setAppCachePath             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setMediaPlaybackRequiresUserGesture             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setStandardFontFamily             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setFixedFontFamily             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setSansSerifFontFamily             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setSerifFontFamily             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setCursiveFontFamily             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setFantasyFontFamily             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setTextZoom             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setMinimumFontSize             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setDefaultFontSize             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setLayoutAlgorithm             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setLoadsImagesAutomatically             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setDefaultTextEncodingName             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setNeedInitialFocus             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setGeolocationEnabled             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setBlockNetworkLoads             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setSupportMultipleWindows             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setAppCacheMaxSize             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setRenderPriority             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setCacheMode             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setAllowContentAccess             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setEnableSmoothTransition             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setSaveFormData             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setSavePassword             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setTextSize             | [参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)          | ^[Function]`(value: number) => void`   |
+| setDefaultZoom             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setLightTouchEnabled             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setMinimumLogicalFontSize             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setDefaultFixedFontSize             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setBlockNetworkImage             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setAllowUniversalAccessFromFileURLs             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setAllowFileAccessFromFileURLs             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setDatabasePath             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setGeolocationDatabasePath             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setUserAgentString             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: string) => void`   |
+| setMixedContentMode             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setOffscreenPreRaster             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setSafeBrowsingEnabled             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: boolean) => void`   |
+| setForceDark             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |
+| setDisabledActionModeMenuItems             |[参考WebView手册](https://developer.android.com/reference/android/webkit/WebView)           | ^[Function]`(value: number) => void`   |

package/rules/.docs/zh-CN/cooperation/index.md

@@ -0,0 +1,6 @@
+---
+page: true
+lang: zh-CN
+---
+
+<Cooperation />

package/rules/.docs/zh-CN/css/color/gradient.md

@@ -0,0 +1,111 @@
+---
+title: Gradient
+lang: zh-CN
+---
+
+# Gradient 渐变颜色
+
+::: warning 注意：背景颜色必须设置透明 Gradient 才会生效
+
+`background-color: transparent;`
+:::
+
+## 数据结构
+
+```ts
+export interface QTGradient {
+  type?: QTGradientType
+  shape?: QTGradientShape
+  orientation?: QTGradientOrientation
+  colors: Array<string>
+  gradientRadius?: number
+  cornerRadius?: number
+  cornerRadii4?: Array<number>
+  cornerRadii8?: Array<number>
+}
+
+export enum QTGradientOrientation {
+  QT_GRADIENT_ORIENTATION_TOP_BOTTOM = 0,
+  QT_GRADIENT_ORIENTATION_TR_BL = 1,
+  QT_GRADIENT_ORIENTATION_RIGHT_LEFT = 2,
+  QT_GRADIENT_ORIENTATION_BR_TL = 3,
+  QT_GRADIENT_ORIENTATION_BOTTOM_TOP = 4,
+  QT_GRADIENT_ORIENTATION_BL_TR = 5,
+  QT_GRADIENT_ORIENTATION_LEFT_RIGHT = 6,
+  QT_GRADIENT_ORIENTATION_TL_BR = 7,
+}
+
+export enum QTGradientShape {
+  QT_GRADIENT_SHAPE_RECTANGLE = 0,
+  QT_GRADIENT_SHAPE_OVAL = 1,
+  QT_GRADIENT_SHAPE_LINE = 2,
+  QT_GRADIENT_SHAPE_RING = 3,
+}
+
+export enum QTGradientType {
+  QT_GRADIENT_TYPE_LINEAR_GRADIENT = 0,
+  QT_GRADIENT_TYPE_RADIAL_GRADIENT = 1,
+  QT_GRADIENT_TYPE_SWEEP_GRADIENT = 2,
+}
+
+```
+
+## 基础用法
+
+<img src="/css/gradient/basic.jpg" />
+
+:::demo
+
+css/gradient/basic
+
+:::
+
+## Type
+
+<img src="/css/gradient/type.jpg" />
+
+:::demo
+
+css/gradient/type
+
+:::
+
+## Shape
+
+<img src="/css/gradient/shape.jpg" />
+
+:::demo
+
+css/gradient/shape
+
+:::
+
+## Orientation
+
+<img src="/css/gradient/orientation.jpg" />
+
+:::demo
+
+css/gradient/orientation
+
+:::
+
+## CornerRadius
+
+<img src="/css/gradient/corner-radius.jpg" />
+
+:::demo
+
+css/gradient/corner-radius
+
+:::
+
+## CornerRadii4
+
+<img src="/css/gradient/corner-radii4.jpg" />
+
+:::demo
+
+css/gradient/corner-radii4
+
+:::

package/rules/.docs/zh-CN/css/color/hsl.md

@@ -0,0 +1,11 @@
+---
+title: HSL
+lang: zh-CN
+---
+
+# HSL
+
+支持 `hsl()` and `hsla()`
+
+* `'hsl(360, 100%, 100%)'`
+* `'hsla(360, 100%, 100%, 1.0)'`

package/rules/.docs/zh-CN/css/color/name.md

@@ -0,0 +1,151 @@
+---
+title: ColorName
+lang: zh-CN
+---
+
+# 颜色名称
+
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f0f8ff">aliceblue (#f0f8ff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #faebd7">antiquewhite (#faebd7)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #00ffff">aqua (#00ffff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #7fffd4">aquamarine (#7fffd4)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f0ffff">azure (#f0ffff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f5f5dc">beige (#f5f5dc)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffe4c4">bisque (#ffe4c4)</div>
+* <div style="width: 250px; padding: 6px; color: white; background-color: #000000">black (#000000)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffebcd">blanchedalmond (#ffebcd)</div>
+* <div style="width: 250px; padding: 6px; color: white; background-color: #0000ff">blue (#0000ff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #8a2be2">blueviolet (#8a2be2)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #a52a2a">brown (#a52a2a)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #deb887">burlywood (#deb887)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #5f9ea0">cadetblue (#5f9ea0)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #7fff00">chartreuse (#7fff00)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #d2691e">chocolate (#d2691e)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff7f50">coral (#ff7f50)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #6495ed">cornflowerblue (#6495ed)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fff8dc">cornsilk (#fff8dc)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #dc143c">crimson (#dc143c)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #00ffff">cyan (#00ffff)</div>
+* <div style="width: 250px; padding: 6px; color: white; background-color: #00008b">darkblue (#00008b)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #008b8b">darkcyan (#008b8b)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #b8860b">darkgoldenrod (#b8860b)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #a9a9a9">darkgray (#a9a9a9)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #006400">darkgreen (#006400)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #a9a9a9">darkgrey (#a9a9a9)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #bdb76b">darkkhaki (#bdb76b)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #8b008b">darkmagenta (#8b008b)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #556b2f">darkolivegreen (#556b2f)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff8c00">darkorange (#ff8c00)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #9932cc">darkorchid (#9932cc)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #8b0000">darkred (#8b0000)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #e9967a">darksalmon (#e9967a)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #8fbc8f">darkseagreen (#8fbc8f)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #483d8b">darkslateblue (#483d8b)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #2f4f4f">darkslategrey (#2f4f4f)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #00ced1">darkturquoise (#00ced1)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #9400d3">darkviolet (#9400d3)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff1493">deeppink (#ff1493)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #00bfff">deepskyblue (#00bfff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #696969">dimgray (#696969)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #1e90ff">dodgerblue (#1e90ff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #b22222">firebrick (#b22222)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fffaf0">floralwhite (#fffaf0)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #228b22">forestgreen (#228b22)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff00ff">fuchsia (#ff00ff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #dcdcdc">gainsboro (#dcdcdc)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f8f8ff">ghostwhite (#f8f8ff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffd700">gold (#ffd700)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #daa520">goldenrod (#daa520)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #808080">gray (#808080)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #008000">green (#008000)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #adff2f">greenyellow (#adff2f)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #808080">grey (#808080)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f0fff0">honeydew (#f0fff0)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff69b4">hotpink (#ff69b4)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #cd5c5c">indianred (#cd5c5c)</div>
+* <div style="width: 250px; padding: 6px; color: white; background-color: #4b0082">indigo (#4b0082)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fffff0">ivory (#fffff0)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f0e68c">khaki (#f0e68c)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #e6e6fa">lavender (#e6e6fa)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fff0f5">lavenderblush (#fff0f5)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #7cfc00">lawngreen (#7cfc00)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fffacd">lemonchiffon (#fffacd)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #add8e6">lightblue (#add8e6)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f08080">lightcoral (#f08080)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #e0ffff">lightcyan (#e0ffff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fafad2">lightgoldenrodyellow (#fafad2)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #d3d3d3">lightgray (#d3d3d3)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #90ee90">lightgreen (#90ee90)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #d3d3d3">lightgrey (#d3d3d3)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffb6c1">lightpink (#ffb6c1)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffa07a">lightsalmon (#ffa07a)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #20b2aa">lightseagreen (#20b2aa)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #87cefa">lightskyblue (#87cefa)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #778899">lightslategrey (#778899)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #b0c4de">lightsteelblue (#b0c4de)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffffe0">lightyellow (#ffffe0)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #00ff00">lime (#00ff00)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #32cd32">limegreen (#32cd32)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #faf0e6">linen (#faf0e6)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff00ff">magenta (#ff00ff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #800000">maroon (#800000)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #66cdaa">mediumaquamarine (#66cdaa)</div>
+* <div style="width: 250px; padding: 6px; color: white; background-color: #0000cd">mediumblue (#0000cd)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ba55d3">mediumorchid (#ba55d3)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #9370db">mediumpurple (#9370db)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #3cb371">mediumseagreen (#3cb371)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #7b68ee">mediumslateblue (#7b68ee)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #00fa9a">mediumspringgreen (#00fa9a)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #48d1cc">mediumturquoise (#48d1cc)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #c71585">mediumvioletred (#c71585)</div>
+* <div style="width: 250px; padding: 6px; color: white; background-color: #191970">midnightblue (#191970)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f5fffa">mintcream (#f5fffa)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffe4e1">mistyrose (#ffe4e1)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffe4b5">moccasin (#ffe4b5)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffdead">navajowhite (#ffdead)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #000080">navy (#000080)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fdf5e6">oldlace (#fdf5e6)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #808000">olive (#808000)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #6b8e23">olivedrab (#6b8e23)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffa500">orange (#ffa500)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff4500">orangered (#ff4500)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #da70d6">orchid (#da70d6)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #eee8aa">palegoldenrod (#eee8aa)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #98fb98">palegreen (#98fb98)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #afeeee">paleturquoise (#afeeee)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #db7093">palevioletred (#db7093)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffefd5">papayawhip (#ffefd5)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffdab9">peachpuff (#ffdab9)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #cd853f">peru (#cd853f)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffc0cb">pink (#ffc0cb)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #dda0dd">plum (#dda0dd)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #b0e0e6">powderblue (#b0e0e6)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #800080">purple (#800080)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #663399">rebeccapurple (#663399)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff0000">red (#ff0000)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #bc8f8f">rosybrown (#bc8f8f)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #4169e1">royalblue (#4169e1)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #8b4513">saddlebrown (#8b4513)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fa8072">salmon (#fa8072)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f4a460">sandybrown (#f4a460)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #2e8b57">seagreen (#2e8b57)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fff5ee">seashell (#fff5ee)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #a0522d">sienna (#a0522d)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #c0c0c0">silver (#c0c0c0)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #87ceeb">skyblue (#87ceeb)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #6a5acd">slateblue (#6a5acd)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #708090">slategray (#708090)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #fffafa">snow (#fffafa)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #00ff7f">springgreen (#00ff7f)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #4682b4">steelblue (#4682b4)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #d2b48c">tan (#d2b48c)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #008080">teal (#008080)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #d8bfd8">thistle (#d8bfd8)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ff6347">tomato (#ff6347)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #40e0d0">turquoise (#40e0d0)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ee82ee">violet (#ee82ee)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f5deb3">wheat (#f5deb3)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffffff">white (#ffffff)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #f5f5f5">whitesmoke (#f5f5f5)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #ffff00">yellow (#ffff00)</div>
+* <div style="width: 250px; padding: 6px; color: black; background-color: #9acd32">yellowgreen (#9acd32)</div>

package/rules/.docs/zh-CN/css/color/rgb.md

@@ -0,0 +1,16 @@
+---
+title: RGB
+lang: zh-CN
+---
+
+# RGB
+
+支持 `rgb()` and `rgba()`。
+
+* `'#f0f'` (#rgb)
+* `'#ff00ff'` (#rrggbb)
+* `'rgb(255, 0, 255)'`
+* `'#f0ff'` (#rgba)
+* `'#ff00ff00'` (#rrggbbaa)
+* `'rgba(255, 255, 255, 1.0)'`
+

package/rules/.docs/zh-CN/css/color/transparent.md

@@ -0,0 +1,9 @@
+---
+title: Transparent
+lang: zh-CN
+---
+
+# 透明
+
+* `rgba(0, 0, 0, 0)`
+* `'transparent'`

package/rules/.docs/zh-CN/css/layout/align-items.md

@@ -0,0 +1,13 @@
+---
+title: AlignItems
+lang: zh-CN
+---
+
+# alignItems
+
+`alignItems`决定了子元素在次轴方向的排列方式（此样式设置在父元素上）。例如若子元素本来是沿着竖直方向排列的（即主轴竖直，次轴水平），则 `alignItems` 决定了它们在水平方向的排列方式。此样式和 CSS
+中的 `alignItems` 表现一致，默认值为 `stretch`。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| alignItems         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/align-items) | ^[enum]`'flex-start' \| 'flex-end' \| 'center' \| 'stretch'\| 'baseline'`| `stretch` |

package/rules/.docs/zh-CN/css/layout/align-self.md

@@ -0,0 +1,12 @@
+---
+title: AlignSelf
+lang: zh-CN
+---
+
+# alignSelf
+
+`alignSelf`决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的 `alignItems` 的值。其表现和 CSS 上的 `align-self` 一致，默认值为 `auto`。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| alignSelf         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/align-self) | ^[enum]`'auto' \| 'flex-start' \| 'flex-end' \| 'center' \| 'stretch' \| 'baseline'`|  `auto` |

package/rules/.docs/zh-CN/css/layout/background-position-x.md

@@ -0,0 +1,12 @@
+---
+title: BackgroundPositionX
+lang: zh-CN
+---
+
+# backgroundPositionX
+
+`backgroundPositionX` 指定背景图片的初始位置的横轴X坐标。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| backgroundPositionX         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position) | ^[number]| - |

package/rules/.docs/zh-CN/css/layout/background-position-y.md

@@ -0,0 +1,12 @@
+---
+title: BackgroundPositionY
+lang: zh-CN
+---
+
+# backgroundPositionY
+
+`backgroundPositionY` 指定背景图片的初始位置的竖轴Y坐标。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| backgroundPositionY         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/background-position) | ^[number]| - |

package/rules/.docs/zh-CN/css/layout/background-size.md

@@ -0,0 +1,12 @@
+---
+title: BackgroundSize
+lang: zh-CN
+---
+
+# backgroundSize
+
+`backgroundSize` 设置背景图片大小。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| backgroundSize         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size) | ^[enum]`'cover' \| 'contain'`| - |

package/rules/.docs/zh-CN/css/layout/collapsable.md

@@ -0,0 +1,13 @@
+---
+title: Collapsable
+lang: zh-CN
+---
+
+# collapsable
+
+Android 里如果一个 `View` 只用于布局它的子组件，则它可能会为了优化而从原生布局树中移除，因此该节点 DOM 的引用会丢失 `（比如调用 measureInAppWindow 无法获取到大小和位置信息）`。
+把此属性设为 `false` 可以禁用这个优化，以确保对应视图在原生结构中存在。`(也可作为 View 的 Attribute 属性设置)`， 默认值为 `true`。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| collapsable         |- | ^[enum]`'false' \| 'true'`|  `true`|

package/rules/.docs/zh-CN/css/layout/display.md

@@ -0,0 +1,12 @@
+---
+title: Display
+lang: zh-CN
+---
+
+# display
+
+QuickTVUI 默认采用 Flex 布局。同时，因为仅支持 Flex 布局，所以不需要手写 `display: flex` 即可使用。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| display         |- | ^[enum]`'flex'`| `flex`|

package/rules/.docs/zh-CN/css/layout/flex-basis.md

@@ -0,0 +1,12 @@
+---
+title: FlexBasis
+lang: zh-CN
+---
+
+# flexBasis
+
+`flex-basis` 指定了 flex 元素在主轴方向上的初始大小。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| flexBasis         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-basis) | ^[number]| - |

package/rules/.docs/zh-CN/css/layout/flex-direction.md

@@ -0,0 +1,15 @@
+---
+title: FlexDirection
+lang: zh-CN
+---
+
+# flexDirection
+
+***QuickTVUI 默认值为 `column`***
+
+`flexDirection` 决定了容器的子元素的排列方向：`row` 代表水平排列, `column` 代表垂直排列。其他两个参数是反向排列。 它跟 css 的 flex-direction 定义一样，但 Web CSS
+是默认值为 `row`，而 QuickTVUI 默认值为 `column`。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| flexDirection         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction) | ^[enum]`'row' \| 'row-reverse' \| 'column' \| 'column-reverse'`|`column` |

package/rules/.docs/zh-CN/css/layout/flex-grow.md

@@ -0,0 +1,15 @@
+---
+title: FlexGrow
+lang: zh-CN
+---
+
+# flexGrow
+
+`flexGrow` 定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。
+
+如果所有伸缩项目的 `flex-grow` 设置了 `1`，那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了 `flex-grow` 值为 `2`
+，那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。 默认值为 `0`
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| flexGrow         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow) | ^[number]| - |

package/rules/.docs/zh-CN/css/layout/flex-shrink.md

@@ -0,0 +1,12 @@
+---
+title: FlexShrink
+lang: zh-CN
+---
+
+# flexShrink
+
+`flexShrink` 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。Web CSS 是默认值为 `1`，QuickTVUI 中默认值为 `0`。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| flexShrink         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-shrink) | ^[number]| `0` |

package/rules/.docs/zh-CN/css/layout/flex-wrap.md

@@ -0,0 +1,12 @@
+---
+title: FlexWrap
+lang: zh-CN
+---
+
+# flexWrap
+
+`flexWrap` 定义了子元素如何在接触到父容器底部时执行换行的行为。默认值为 `nowrap`。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| flexWrap         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap) | ^[enum]`'wrap' \| 'nowrap'`| `nowrap`|

package/rules/.docs/zh-CN/css/layout/flex.md

@@ -0,0 +1,12 @@
+---
+title: Flex
+lang: zh-CN
+---
+
+# flex
+
+在 QuickTVUI 中 flex 的表现和 CSS 有些区别。 flex 在 QuickTVUI 中只能为整数值。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| flex         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/flex) | ^[number]| - |

package/rules/.docs/zh-CN/css/layout/height.md

@@ -0,0 +1,12 @@
+---
+title: Height
+lang: zh-CN
+---
+
+# height
+
+`height` 定义了容器的高度，单位为 px。
+
+| Name               | Description      | Type                         | Default |
+|--------------------|------------------|------------------------------| ------- |
+| height         |[MDN 文档](http://developer.mozilla.org/zh-CN/docs/Web/CSS/height) | ^[number]| - |