更新版本号及文档

Author: yinLiangDream

docs/.vuepress/public/card-title.md

@@ -0,0 +1,14 @@
+```jsx
+<ClCard
+  title={{
+    text: "我是标题",
+    textColor: "white",
+    align: "center",
+    size: 'xlarge',
+    fontWeight: 'bold'
+  }}
+  bgColor="gradualPink"
+>
+  标题可以传入 ClText 组件的任何属性，可以设置标题大小，颜色，颜色等
+</ClCard>
+```

docs/.vuepress/public/dataKeyMap.json

@@ -36,7 +36,8 @@
     { "key": "card", "value": "卡片模式" },
     { "key": "full", "value": "全铺模式" },
     { "key": "color", "value": "颜色" },
-    { "key": "active", "value": "激活" }
+    { "key": "active", "value": "激活" },
+    { "key": "title", "value": "标题" }
   ],
   "checkbox": [
     { "key": "type", "value": "类型" },

docs/.vuepress/public/timeline-timeline.md

@@ -1,27 +1,39 @@
 
 ```jsx
-<ClTimeline times={[
-  {
-    node: '2019'
-  }, {
-    content: ['我是内容，默认背景']
-  }, {
-    content: ['我是内容，有背景'],
-    bgColor: 'light-blue'
-  }, {
-    content: ['我是里程碑，我有图标'],
-    title: '2019 年到啦',
-    time: '2019-01-01',
-    bgColor: 'light-red',
-    icon: 'emoji'
-  }, {
-    node: '2018'
-  }, {
-    content: ['我是里程碑，我有图标，我图标有颜色', '我有多行内容'],
-    bgColor: 'red',
-    icon: 'emoji',
-    iconColor: 'red'
-  }
-]}
+<ClTimeline
+  times={[
+    {
+      node: "2019"
+    },
+    {
+      content: ["我是内容，默认背景"]
+    },
+    {
+      content: ["我是内容，有背景"],
+      bgColor: "light-blue"
+    },
+    {
+      content: ["我是里程碑，我有图标"],
+      title: "2019 年到啦",
+      time: "2019-01-01",
+      bgColor: "light-red",
+      icon: "emoji"
+    },
+    {
+      node: "2018"
+    },
+    {
+      content: ["我是里程碑，我有图标，我图标有颜色", "我有多行内容"],
+      bgColor: "red",
+      icon: "emoji",
+      iconColor: "red"
+    }
+  ]}
+  onClick={(index) => {
+    Taro.showToast({
+      icon: 'none',
+      title: `您点击了第${index + 1}个节点`
+    })
+  }}
 />
 ```

docs/layout/card.md

@@ -12,10 +12,11 @@ import { ClCard } from "mp-colorui";
 
 ### Card 参数
 
-| 参数    | 说明               | 类型    | 可选值                         | 默认值   |
-| ------- | ------------------ | ------- | ------------------------------ | -------- |
-| type    | _卡片组件类型选择_ | string  | _`card`_,_`full`_              | _`card`_ |
-| bgColor | _卡片背景色设置_   | string  | 参考文档 [默认色](/home/color) | -        |
-| shadow  | _卡片阴影设置_     | boolean | -                              | _`true`_ |
+| 参数    | 说明               | 类型    | 可选值                           | 默认值   |
+| ------- | ------------------ | ------- | -------------------------------- | -------- |
+| type    | _卡片组件类型选择_ | string  | _`card`_,_`full`_                | _`card`_ |
+| bgColor | _卡片背景色设置_   | string  | 参考文档 [默认色](/home/color)   | -        |
+| shadow  | _卡片阴影设置_     | boolean | -                                | _`true`_ |
+| title   | _卡片标题_         | Text    | 参考文档 [Text 组件](/base/text) | _`{}`_     |
 
 <FloatPhone url="https://yinliangdream.github.io/mp-colorui-h5-demo/#/pages/components/card/index" />

docs/view/timeline.md

@@ -28,4 +28,10 @@ import { ClTimeline } from "mp-colorui";
 | node      | _节点(若存在则会忽略其他属性)_ | string   | -                                                  | -      |
 | time      | 时间（右上角内容）             | string   | -                                                  | -      |
 
+### Timeline 事件
+
+| 事件名称 | 说明     | 返回参数          |
+| -------- | -------- | ----------------- |
+| onClick  | 点击事件 | index(第几个标签) |
+
 <FloatPhone url="https://yinliangdream.github.io/mp-colorui-h5-demo/#/pages/components/timeline/index" />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mp-colorui",
-  "version": "0.5.6",
+  "version": "0.5.7",
   "description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（支持小程序端和H5端）",
   "keywords": [
     "taro",

src/pages/index/index.js

@@ -29,31 +29,17 @@ import ClAvatar from "../../components/avatar";
 
 console.log(Taro);
 export default function Index() {
-  const muti = [["水果", "蔬菜"], ["苹果", "桃子", "葡萄", "火龙果", "西瓜"]];
-  const [single, setSingle] = useState([]);
-  const [value, setValue] = useState(0);
-  useEffect(() => {
-    setTimeout(() => {
-      setSingle(["苹果", "桃子", "葡萄", "火龙果", "西瓜"]);
-    }, 1000);
-    setTimeout(() => {
-      setValue(3);
-    }, 2000);
-  }, []);
   return (
     <View>
-      <ClNoticeBar
-        text="我是文字我很长啊啊啊啊啊啊啊啊啊啊啊啊啊我是文字我很长啊啊啊啊啊啊啊啊啊啊啊啊啊"
-        single
-        marquee
-        showMore
-        close
-      />
-      <View style={{ width: pxTransform(300) }}>
-        <ClText cut align="left">
-          泰国、新加坡、印度尼西亚~{" "}
-        </ClText>
-      </View>
+      <ClCard
+        title={{
+          text: "阿里巴巴",
+          textColor: "cyan",
+          size: "large"
+        }}
+      >
+        我是内容太打了我是内容太打了我是内容太打了我是内容太打了我是内容太打了我是内容太打了
+      </ClCard>
     </View>
   );
 }