@nutui/nutui-react 1.2.3-beta.4 → 1.3.0-beta.5

package/dist/style.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.2.3-beta.4 Fri Aug 19 2022 09:34:42 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v1.3.0-beta.5 Wed Aug 24 2022 15:56:55 GMT+0800 (China Standard Time)
 * (c) 2021 @jdf2e.
 * Released under the MIT License.
 */

package/dist/styles/animation/icon.scss

@@ -0,0 +1,245 @@
+// 跳动
+@-webkit-keyframes nutJump {
+  to {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+}
+
+@keyframes nutJump {
+  to {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+}
+
+@-webkit-keyframes nutJumpOne {
+  50% {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1) translateY(0);
+  }
+}
+
+@keyframes nutJumpOne {
+  50% {
+    transform: scale3d(0.8, 1, 0.9) translateY(-10px);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1) translateY(0);
+  }
+}
+
+// 闪烁
+@-webkit-keyframes nutBlink {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes nutBlink {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+// 呼吸
+@-webkit-keyframes nutBreathe {
+  from,
+  to {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+@keyframes nutBreathe {
+  from,
+  to {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+}
+
+// 闪现
+@-webkit-keyframes nutFlash {
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+@keyframes nutFlash {
+  from,
+  50%,
+  to {
+    opacity: 1;
+  }
+
+  25%,
+  75% {
+    opacity: 0;
+  }
+}
+
+// 弹动
+@-webkit-keyframes nutBounce {
+  from,
+  20%,
+  53%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
+    transform: translate3d(0, -30px, 0) scaleY(1.1);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
+    transform: translate3d(0, -15px, 0) scaleY(1.05);
+  }
+
+  80% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
+    transform: translate3d(0, 0, 0) scaleY(0.95);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+    transform: translate3d(0, -4px, 0) scaleY(1.02);
+  }
+}
+
+@keyframes nutBounce {
+  from,
+  20%,
+  53%,
+  to {
+    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+  }
+
+  40%,
+  43% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -30px, 0) scaleY(1.1);
+    transform: translate3d(0, -30px, 0) scaleY(1.1);
+  }
+
+  70% {
+    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+    -webkit-transform: translate3d(0, -15px, 0) scaleY(1.05);
+    transform: translate3d(0, -15px, 0) scaleY(1.05);
+  }
+
+  80% {
+    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    -webkit-transform: translate3d(0, 0, 0) scaleY(0.95);
+    transform: translate3d(0, 0, 0) scaleY(0.95);
+  }
+
+  90% {
+    -webkit-transform: translate3d(0, -4px, 0) scaleY(1.02);
+    transform: translate3d(0, -4px, 0) scaleY(1.02);
+  }
+}
+
+// 抖动
+@-webkit-keyframes nutShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}
+
+@keyframes nutShake {
+  0% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  6.5% {
+    -webkit-transform: translateX(-6px) rotateY(-9deg);
+    transform: translateX(-6px) rotateY(-9deg);
+  }
+
+  18.5% {
+    -webkit-transform: translateX(5px) rotateY(7deg);
+    transform: translateX(5px) rotateY(7deg);
+  }
+
+  31.5% {
+    -webkit-transform: translateX(-3px) rotateY(-5deg);
+    transform: translateX(-3px) rotateY(-5deg);
+  }
+
+  43.5% {
+    -webkit-transform: translateX(2px) rotateY(3deg);
+    transform: translateX(2px) rotateY(3deg);
+  }
+
+  50% {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+}

package/dist/styles/animation/index.scss

@@ -4,3 +4,4 @@
 @import 'ease.scss';
 @import 'drop.scss';
 @import 'rotate.scss';
+@import 'icon.scss';

package/dist/styles/font/config.json

@@ -0,0 +1,169 @@
+{
+  "name": "nutui-icon",
+  "data": [
+    {
+      "name": "粗体 Icon",
+      "nameEn": "Bold Icon",
+      "icons": [
+        "order",
+        "refresh",
+        "add",
+        "JD",
+        "eye",
+        "dshop",
+        "my2",
+        "star",
+        "del2",
+        "more-x",
+        "comment",
+        "microphone",
+        "people",
+        "service",
+        "cart2",
+        "location2",
+        "marshalling",
+        "fabulous",
+        "s-follow",
+        "shop",
+        "jdl"
+      ]
+    },
+    {
+      "name": "细体 Icon",
+      "nameEn": "Thin Icon",
+      "icons": [
+        "ask",
+        "tips",
+        "notice",
+        "lower",
+        "top",
+        "download",
+        "dongdong",
+        "JIMI40",
+        "location",
+        "scan",
+        "addfollow",
+        "search",
+        "share",
+        "follow",
+        "del",
+        "edit",
+        "cart",
+        "home",
+        "find",
+        "category",
+        "my",
+        "footprint",
+        "link",
+        "scan2",
+        "left",
+        "close",
+        "locationg3",
+        "share",
+        "shop3",
+        "message",
+        "ask2",
+        "search2",
+        "clock",
+        "setting",
+        "refresh2",
+        "horizontal",
+        "date",
+        "photograph",
+        "more-s",
+        "play-stop",
+        "play-start",
+        "play-double-back",
+        "play-double-forward",
+        "voice",
+        "image",
+        "image-error"
+      ]
+    },
+    {
+      "name": "应用图标",
+      "nameEn": "Application Icon",
+      "icons": [
+        "arrow-up",
+        "arrow-down",
+        "arrow-up2",
+        "arrow-down2",
+        "down-arrow",
+        "joy-smile",
+        "close-little",
+        "horizontal-n",
+        "share-n",
+        "heart1",
+        "heart-fill",
+        "star-n",
+        "star-fill-n"
+      ]
+    },
+    {
+      "name": "基础图标",
+      "nameEn": "Basic Icon",
+      "icons": [
+        "uploader",
+        "mask-close",
+        "circle-close",
+        "right",
+        "arrow-right",
+        "github",
+        "screen-little",
+        "plus",
+        "minus",
+        "Check",
+        "issue",
+        "failure",
+        "success",
+        "retweet",
+        "poweroff-circle-fill",
+        "play-circle-fill",
+        "checked",
+        "checklist",
+        "check-disabled",
+        "check-normal",
+        "check-checked",
+        "loading",
+        "loading1"
+      ]
+    }
+    
+  ],
+  "style":[
+    {
+      "name": "通用动态样式",
+      "nameEn": "Universal Dynamic Style",
+      "icons": [{
+        "name":"dou-arrow-up",
+        "animation-name":"am-jump",
+        "animation-time":"am-infinite"
+      },{
+        "name":"star",
+        "animation-name":"am-blink",
+        "animation-time":"am-infinite"
+      },{
+        "name":"refresh2",
+        "animation-name":"am-rotate",
+        "animation-time":"am-infinite"
+      },{
+        "name":"heart-fill",
+        "animation-name":"am-breathe",
+        "animation-time":"am-infinite"
+      },{
+        "name":"microphone",
+        "animation-name":"am-flash",
+        "animation-time":"am-infinite"
+      },{
+        "name":"download",
+        "animation-name":"am-bounce",
+        "animation-time":"am-infinite"
+      },{
+        "name":"message",
+        "animation-name":"am-shake",
+        "animation-time":"am-infinite"
+      }
+      ]
+    }
+  ]
+}

package/dist/styles/font/demo_index.html

@@ -54,6 +54,60 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe60a;</span>
+                <div class="name">image-error</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe609;</span>
+                <div class="name">image</div>
+                <div class="code-name">&amp;#xe609;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe608;</span>
+                <div class="name">voice</div>
+                <div class="code-name">&amp;#xe608;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe604;</span>
+                <div class="name">play-stop</div>
+                <div class="code-name">&amp;#xe604;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe605;</span>
+                <div class="name">play-start</div>
+                <div class="code-name">&amp;#xe605;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe606;</span>
+                <div class="name">play-double-back</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe607;</span>
+                <div class="name">play-double-forward</div>
+                <div class="code-name">&amp;#xe607;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe603;</span>
+                <div class="name">dou-arrow-up</div>
+                <div class="code-name">&amp;#xe603;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon nutui-iconfont">&#xe614;</span>
+                <div class="name">loading2</div>
+                <div class="code-name">&amp;#xe614;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon nutui-iconfont">&#xe601;</span>
                 <div class="name">checked</div>
@@ -732,9 +786,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'nutui-iconfont';
-  src: url('iconfont.woff2?t=1620383008438') format('woff2'),
-       url('iconfont.woff?t=1620383008438') format('woff'),
-       url('iconfont.ttf?t=1620383008438') format('truetype');
+  src: url('iconfont.woff2?t=1654497552263') format('woff2'),
+       url('iconfont.woff?t=1654497552263') format('woff'),
+       url('iconfont.ttf?t=1654497552263') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -760,6 +814,87 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-image-error"></span>
+            <div class="name">
+              image-error
+            </div>
+            <div class="code-name">.nut-icon-image-error
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-image"></span>
+            <div class="name">
+              image
+            </div>
+            <div class="code-name">.nut-icon-image
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-voice"></span>
+            <div class="name">
+              voice
+            </div>
+            <div class="code-name">.nut-icon-voice
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-play-stop"></span>
+            <div class="name">
+              play-stop
+            </div>
+            <div class="code-name">.nut-icon-play-stop
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-play-start"></span>
+            <div class="name">
+              play-start
+            </div>
+            <div class="code-name">.nut-icon-play-start
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-play-double-back"></span>
+            <div class="name">
+              play-double-back
+            </div>
+            <div class="code-name">.nut-icon-play-double-back
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-play-double-forward"></span>
+            <div class="name">
+              play-double-forward
+            </div>
+            <div class="code-name">.nut-icon-play-double-forward
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-dou-arrow-up"></span>
+            <div class="name">
+              dou-arrow-up
+            </div>
+            <div class="code-name">.nut-icon-dou-arrow-up
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon nutui-iconfont nut-icon-loading1"></span>
+            <div class="name">
+              loading2
+            </div>
+            <div class="code-name">.nut-icon-loading1
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon nutui-iconfont nut-icon-checked"></span>
             <div class="name">
@@ -1777,6 +1912,78 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-image-error"></use>
+                </svg>
+                <div class="name">image-error</div>
+                <div class="code-name">#nut-icon-image-error</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-image"></use>
+                </svg>
+                <div class="name">image</div>
+                <div class="code-name">#nut-icon-image</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-voice"></use>
+                </svg>
+                <div class="name">voice</div>
+                <div class="code-name">#nut-icon-voice</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-play-stop"></use>
+                </svg>
+                <div class="name">play-stop</div>
+                <div class="code-name">#nut-icon-play-stop</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-play-start"></use>
+                </svg>
+                <div class="name">play-start</div>
+                <div class="code-name">#nut-icon-play-start</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-play-double-back"></use>
+                </svg>
+                <div class="name">play-double-back</div>
+                <div class="code-name">#nut-icon-play-double-back</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-play-double-forward"></use>
+                </svg>
+                <div class="name">play-double-forward</div>
+                <div class="code-name">#nut-icon-play-double-forward</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-dou-arrow-up"></use>
+                </svg>
+                <div class="name">dou-arrow-up</div>
+                <div class="code-name">#nut-icon-dou-arrow-up</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#nut-icon-loading1"></use>
+                </svg>
+                <div class="name">loading2</div>
+                <div class="code-name">#nut-icon-loading1</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#nut-icon-checked"></use>