pixuireactcomponents 1.2.36 → 1.3.0

package/README.md

@@ -0,0 +1,8 @@
+# 组件库
+
+本组件库目前分为2大类：ui组件和工具组件。分别参见目录ui/和目录tools。
+具体组件说明，参见对应类别目录下的md文档
+
+## 使用说明
+
+https://gamelet.qq.com/docv2/public/d/Client-Development-Guide/PixUI-React-Components

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "pixuireactcomponents",
-    "version": "1.2.36",
+    "version": "1.3.0",
     "description": "pixui react components",
     "main": "index.js",
     "scripts": {

package/tools/tools.md

@@ -0,0 +1,22 @@
+# 工具类组件
+### 1. EventDispatcherJs.tsx
+React里可供使用的事件派发器，类似Pandora Lua里的EventDispatcher。
+
+用法主要就3个接口：
+
+* AddEventListener： 添加监听事件
+* DispatchEvent： 分发监听事件
+* RemoveEventListener： 移除监听事件
+
+### 2. Logger.tsx
+React里可供使用的对象（数组）打印器。
+
+直接console.log一个对象时，在游戏引擎中，无法打印出这个对象里的东西。而实际开发时，前后端联调时，需要方便的确认各种对象里的细节。
+
+ 用法一共3个接口，打印粒度有差异。
+
+* ObjectPrinter: 打印一个对象的内部细节，效果如下
+	![](./img/logger.png)
+	
+* ObjectPrinter2：比上一个打印的信息更多
+* HierarchyPrinter： 采样打印，对数组进行采样，能打印最多的信息

package/ui/components/slapface/Slapface.less

@@ -0,0 +1,107 @@
+.maininterface{
+    width:1200px;
+    height:682px;
+    /* width:100%;
+    height:100%; */
+    margin: auto;
+    /* padding:  0px 36px 36px 36px; */
+    /* background-color: grey; */
+    flex-direction: column;
+    position: relative;
+}
+
+.closeButton{
+    width:36px;
+    height:36px;
+    /* float: left; */
+    position: absolute;
+    // background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    right:0px;
+    top:0px;
+}
+
+@keyframes zoom{
+    from{
+        transform: scale(0)
+    }
+    80%{
+        transform: scale(1.1);
+    }
+    to{
+        transform: scale(1);
+    }
+}
+
+@keyframes zoomReverse{
+    from{
+        transform: scale(0)
+    }
+    to{
+        transform: scale(0);
+    }
+}
+
+.groupBack{
+    animation-name:zoom;
+    animation-timing-function:ease-in-out;
+    animation-iteration-count:1;
+    animation-duration: 1s;
+}
+
+.groupbackTemp{
+    animation-name:zoomReverse;
+    animation-timing-function:'';
+    animation-iteration-count:'';
+    animation-duration:'';
+}
+
+.isShowToday{
+    width:36px;
+    height:31px;
+    background-size: contain;
+    position: absolute;
+    right:0px;
+    bottom:0px;
+}
+
+.slapImage{
+    box-sizing:  content-box;
+    /* border-width: 5px;
+    border-color: black;
+    border-style: solid; */
+    position: absolute;
+    left:50%;
+    top:50%;
+    transform:translate(-50%,-50%);
+}
+.mask{
+    // background:url(images/coupon-logo.gif) no-repeat;
+    height:100px;background-color:#fff;
+    opacity:0.6;
+}
+
+@keyframes rotate_by_myself{
+    from {
+        transform: rotate(0deg);
+    }
+
+    50% {
+        transform: rotate(180deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.loading_anim{
+    animation-name: rotate_by_myself;
+    animation-duration: 1.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 50%;
+}

package/ui/ui.md

@@ -0,0 +1,2 @@
+# UI组件
+组件源码，参见components目录；对应的示例Demo，参见sample目录