🎨 update theme docs

XboxYan · Aug 16, 2019 · be66c7b · be66c7b
1 parent 6441eef
commit be66c7b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/docs/sidebar.md b/docs/sidebar.md
@@ -1,5 +1,5 @@
 * [Start](README.md)
-* [ThemeColor](themeColor.md)
+* [Theme](themeColor.md)
 * [Update](update.md)
 * **Component**
     * [xy-button](xy-button.md)

diff --git a/docs/themeColor.md b/docs/themeColor.md
@@ -1,4 +1,4 @@
-# themeColor
+# theme
 
 `xy-ui`的所有组件均可设置`themeColor`，不同于一些框架采用`less`、`sass`等预处理器， 这里采用`CSS`[自定义属性](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties)（`--themeColor`）实现。
 
@@ -18,6 +18,21 @@ xy-button{
 ```js
 document.body.style.setProperty('--themeColor','#F44336');
 ```
+
+除了主题颜色`themeColor`以外，还支持如下主题定制
+
+```css
+:root {
+    --fontColor:#333; /*文字颜色*/
+    --borderColor:#d9d9d9;/*边框颜色，按钮、输入框*/
+    --borderRadius:3px;/*圆角*/
+    --successColor:#52c41a;/*成功色*/
+    --waringColor:#faad14;/*警告色*/
+    --errorColor:#f4615c;/*错误色*/
+    --infoColor:#1890ff;/*提示色*/
+}
+```
+
 <xy-color-pane defaultvalue="#42b983" onchange="changeColor(this.value)"><xy-color-pane>
 
 实时预览（其他页面均生效）

diff --git a/docs/xy-form.md b/docs/xy-form.md
@@ -53,10 +53,14 @@
 </xy-form>
 ```
 
+如果不满足布局要求，可以采用普通的布局，更加灵活。
+
 ## 表单默认行为
 
 `xy-form`内置了以下属性，基于`html5`规范。
 
+这里的默认行为指的是，点击`submit`按钮或者回车，表单首先对表单元素进行格式校验，如果有误则会将有误的地方标识出来，全部正确后才能进行提交。
+
 ### 属性
 
 * 表单地址`action`
@@ -92,7 +96,7 @@
     </xy-form-item>
 </xy-form>
 ```
-> 该状态下仍然可用`form.validity`获取验证合法性。
+> 该状态下即使格式有误仍然可以提交，可用`form.validity`获取验证合法性。
 
 ### 方法
 

diff --git a/docs/xy-input.md b/docs/xy-input.md
@@ -209,15 +209,15 @@ input.setAttribute('value','name');
 <xy-form-item labelwidth="100" label="password">
     <xy-input name="password" id="pwd" required type="password" placeholder="password" minlength="6"></xy-input>
 </xy-form-item>
-<xy-form-item labelwidth="100" label="password align">
+<xy-form-item labelwidth="100" label="password again">
     <xy-input name="password_confirm" id="pwdAgain" required type="password" placeholder="password confirm"></xy-input>
 </xy-form-item>
 
 ```html
 <xy-form-item labelwidth="100" label="password">
     <xy-input name="password" id="pwd" required type="password" placeholder="password" minlength="6"></xy-input>
 </xy-form-item>
-<xy-form-item labelwidth="100" label="password align">
+<xy-form-item labelwidth="100" label="password again">
     <xy-input name="password_confirm" id="pwdAgain" required type="password" placeholder="password confirm"></xy-input>
 </xy-form-item>
 ```