init

xhs-mini-demos/component-case/icon/icon.css

@@ -0,0 +1,39 @@
+.container {
+  display: block;
+}
+
+.icon-container {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 15px;
+}
+
+.icon-box{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 25%;
+  padding: 10px 0;
+}
+
+.icon-box-text{
+  word-break: break-all;
+  padding: 0 5px;
+}
+.icon-box-title{
+  font-size: 17px;
+}
+.icon-box-desc{
+  margin-top: 6px;
+  font-size: 13px;
+  color: #888;
+}
+
+.icon-small-wrp{
+  margin-right: 28px;
+  width: 93px;
+  height: 93px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

xhs-mini-demos/component-case/icon/icon.js

@@ -0,0 +1,62 @@
+const __templateJs = require("./templates.js");
+const __mergePageOptions = require("../../util/mergePageOptions.js");
+Page(__mergePageOptions({
+  onShareAppMessage() {
+    return {
+      title: 'icon',
+      path: 'page/component/pages/icon/icon'
+    };
+  },
+  data: {
+    color: 'red',
+    size: 30,
+    type: 'success',
+    iconList: [{
+      type: 'success',
+      title: '成功',
+      text: 'success',
+      description: '用于表示操作顺利完成<'
+    }, {
+      type: 'info',
+      text: 'info'
+    }, {
+      type: 'warn'
+    }, {
+      type: 'waiting'
+    }, {
+      type: 'success_no_circle'
+    }, {
+      type: 'circle'
+    }, {
+      type: 'download'
+    }, {
+      type: 'info_circle'
+    }, {
+      type: 'cancel'
+    }, {
+      type: 'search'
+    }],
+    iconSize: ['40', '34', '30', '24', '20', '18', '16']
+  },
+  changeType({
+    detail
+  }) {
+    this.setData({
+      type: detail.value
+    });
+  },
+  changeColor({
+    detail
+  }) {
+    this.setData({
+      color: detail.value
+    });
+  },
+  changeSize({
+    detail
+  }) {
+    this.setData({
+      size: detail.value
+    });
+  }
+}, __templateJs));

xhs-mini-demos/component-case/icon/icon.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "图标",
+    "usingComponents": {
+        "showbox": "../../common/component/showbox/index",
+        "box": "../../common/component/container/index"
+    }
+}

xhs-mini-demos/component-case/icon/icon.xhsml

@@ -0,0 +1,25 @@
+<view class="container">
+  <showbox title="标志性图标">
+    <view class="icon-container">
+      <view class="icon-box" xhs:for="{{iconList}}">
+        <icon class="icon-box-img" type="{{item.type}}" size="20"></icon>
+        <view class="icon-box-text">
+          {{item.text ?? item.type}}
+        </view>
+      </view>
+    </view>
+  </showbox>
+
+  <showbox title="自定义icon的大小">
+    <view class="icon-container">
+      <view class="icon-box" xhs:for="{{iconSize}}">
+        <icon class="icon-box-img" type="success" size="{{item}}"></icon>
+        <view class="icon-box-text">
+          {{item + 'px'}}
+        </view>
+      </view>
+    </view>
+  </showbox>
+</view>
+
+<include src="templates.xhsml" />

xhs-mini-demos/component-case/icon/templates.js

@@ -0,0 +1,29 @@
+/** 以下内容为自动生成，请勿手动修改 */
+
+module.exports = {
+  data: {
+    page_data_0: `success`,
+
+    page_data_1: `23`,
+
+    page_data_2: 1024,
+
+    page_data_3: ``,
+  },
+
+  page_fun_0(e) {
+    this.setData("page_data_0", e.detail.value);
+  },
+
+  page_fun_1(e) {
+    this.setData("page_data_1", e.detail.value);
+  },
+
+  page_fun_2(e) {
+    this.setData("page_data_2", e.detail.value);
+  },
+
+  page_fun_3(e) {
+    this.setData("page_data_3", e.detail.value);
+  },
+};

xhs-mini-demos/component-case/icon/templates.xhsml

@@ -0,0 +1,75 @@
+<!-- 以下内容为自动生成，请勿手动修改 -->
+
+<view class="container">
+  <showbox title="icon演示">
+    <box>
+      <view class="_ui-space">
+        <view>
+          <icon
+            type="{{page_data_0}}"
+            size="{{page_data_1}}"
+            view-box="{{page_data_2}}"
+            color="{{page_data_3}}"
+          >
+          </icon>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>type</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_0}}"
+              placeholder="type"
+              type="text"
+              bindinput="page_fun_0"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>size</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_1}}"
+              placeholder="size"
+              type="text"
+              bindinput="page_fun_1"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>viewBox</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_2}}"
+              placeholder="viewBox"
+              type="text"
+              bindinput="page_fun_2"
+            />
+          </view>
+        </view>
+
+        <view class="_dflex">
+          <view style="flex: 4" class="_dflex _ai_center"
+            ><text>color</text></view
+          >
+          <view style="flex: 6" class="_ui-input">
+            <input
+              value="{{page_data_3}}"
+              placeholder="color"
+              type="text"
+              bindinput="page_fun_3"
+            />
+          </view>
+        </view>
+      </view>
+    </box>
+  </showbox>
+</view>