{
  "id": "barisdogansutcu_quiet-mayfly-12",
  "name": "quiet-mayfly-12",
  "category": "buttons",
  "author": "barisdogansutcu",
  "description": "quiet-mayfly-12 组件 (icon, button, css icon, animation, interactive)",
  "tags": [
    "icon",
    "button",
    "css icon",
    "animation",
    "interactive"
  ],
  "original": {
    "html": "<div class=\"icons\">\n  <div class=\"title\">\n    <span>O</span>\n    <span>N</span>\n    <span>L</span>\n    <span>Y</span>\n    <span>C</span>\n    <span>S</span>\n    <span>S</span>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"activity\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n      <span class=\"line-4\"></span>\n      <span class=\"line-5\"></span>\n    </button>\n    <div class=\"text\">Activity</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"airplay\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n    </button>\n    <div class=\"text\">AirPlay</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"alert-circle\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n    </button>\n    <div class=\"text\">Alert</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"alert-octagon\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n      <span class=\"line-4\"></span>\n      <div class=\"center\">\n        <span class=\"line-5\"></span>\n        <span class=\"line-6\"></span>\n      </div>\n    </button>\n    <div class=\"text\">Alert</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"center-text\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n      <span class=\"line-4\"></span>\n    </button>\n    <div class=\"text\">Text Center</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"justify-text\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n      <span class=\"line-4\"></span>\n    </button>\n    <div class=\"text\">Text Justify</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"left-text\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n      <span class=\"line-4\"></span>\n    </button>\n    <div class=\"text\">Text Left</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"right-text\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n      <span class=\"line-4\"></span>\n    </button>\n    <div class=\"text\">Text Right</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"left-arrow\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n    </button>\n    <div class=\"text\">Left Arrow</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"right-arrow\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n    </button>\n    <div class=\"text\">Right Arrow</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"bottom-arrow\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n    </button>\n    <div class=\"text\">Bottom Arrow</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"top-arrow\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n    </button>\n    <div class=\"text\">Top Arrow</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"battery-empty\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n    </button>\n    <div class=\"text\">Battery</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"battery-charge\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n      <span class=\"line-4\"></span>\n    </button>\n    <div class=\"text\">Battery C.</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"battery\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n    </button>\n    <div class=\"text\">Battery 50%</div>\n  </div>\n  <div class=\"icon-box\">\n    <button class=\"battery-full\">\n      <span class=\"line-1\"></span>\n      <span class=\"line-2\"></span>\n      <span class=\"line-3\"></span>\n    </button>\n    <div class=\"text\">Battery Full</div>\n  </div>\n</div>",
    "css": "/* From Uiverse.io by barisdogansutcu  - Tags: icon, button, css icon */\n.text {\n  font-size: 5px;\n  position: absolute;\n  top: 3px;\n  color: #2f363d;\n  opacity: 0;\n}\n.icons {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  place-content: center;\n  gap: 5px;\n}\n.title {\n  grid-column-start: 1;\n  grid-column-end: 5;\n  text-align: center;\n  font-weight: 100;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.title span {\n  text-shadow: 1px 1px #ffffff;\n}\n.icon-box:hover {\n  transform: scale(2);\n  z-index: 9;\n}\n.icon-box {\n  background-color: #ffffff;\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n  border-radius: 5px;\n  transition: all 0.2s ease;\n  position: relative;\n}\n.icon-box:hover .text {\n  opacity: 1;\n}\n.icon-box:hover button {\n  margin-top: 5px;\n}\nbutton {\n  background-color: transparent;\n  z-index: 0;\n  margin-top: 0px;\n}\n.activity {\n  position: relative;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  cursor: pointer;\n}\n.activity .line-1 {\n  display: inline-flex;\n  width: 8px;\n  height: 2px;\n  border-radius: 50px;\n  background-color: #2f363d;\n}\n.activity .line-2 {\n  display: inline-flex;\n  width: 9px;\n  height: 2px;\n  border-radius: 50px;\n  background-color: #2f363d;\n  transform: rotate(-75deg);\n  margin-top: -8px;\n  margin-left: -4px;\n}\n.activity .line-3 {\n  display: inline-flex;\n  width: 16px;\n  height: 2px;\n  border-radius: 50px;\n  background-color: #2f363d;\n  transform: rotate(70deg);\n  margin-top: -3px;\n  margin-left: -9px;\n}\n.activity .line-4 {\n  display: inline-flex;\n  width: 8px;\n  height: 2px;\n  border-radius: 50px;\n  background-color: #2f363d;\n  transform: rotate(-70deg);\n  margin-top: 6px;\n  margin-left: -8px;\n}\n.activity .line-5 {\n  display: inline-flex;\n  width: 8px;\n  height: 2px;\n  border-radius: 50px;\n  background-color: #2f363d;\n  margin-top: 0px;\n  margin-left: -3px;\n}\n/* ----- */\n.airplay {\n  position: relative;\n  width: 30px;\n  height: 30px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  cursor: pointer;\n}\n.airplay .line-1 {\n  width: 20px;\n  height: 14px;\n  background-color: white;\n  border-radius: 2px;\n  box-shadow: 0px 0px 0px 2px #2f363d;\n}\n.airplay .line-2 {\n  width: 0;\n  height: 0;\n  border: 6px solid transparent;\n  border-top: 0;\n  border-bottom: 6px solid #2f363d;\n  position: absolute;\n  margin-top: 16px;\n  background-color: #ffffff;\n  border-radius: 100% 100% 0 0;\n}\n/* ----- */\n.alert-circle {\n  width: 20px;\n  height: 20px;\n  background-color: #ffffff;\n  border-radius: 100%;\n  border: solid 2px #2f363d;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 1px;\n  cursor: pointer;\n}\n.alert-circle .line-1 {\n  width: 2px;\n  height: 6px;\n  background-color: #2f363d;\n  border-radius: 50px;\n}\n.alert-circle .line-2 {\n  width: 2px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 50px;\n}\n/* ----- */\n.alert-triangle {\n  width: 20px;\n  height: 20px;\n  background-color: #ffffff;\n  border-radius: 100%;\n  border: solid 2px #2f363d;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 1px;\n  cursor: pointer;\n}\n.alert-triangle .line-1 {\n  width: 2px;\n  height: 6px;\n  background-color: #2f363d;\n  border-radius: 50px;\n}\n.alert-triangle .line-2 {\n  width: 2px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 50px;\n}\n/* ----- */\n.alert-octagon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  position: relative;\n  cursor: pointer;\n}\n.alert-octagon .line-1 {\n  width: 20px;\n  height: 8px;\n  background-color: #fff;\n  border-left: solid 2px #2f363d;\n  border-right: solid 2px #2f363d;\n}\n.alert-octagon .line-2 {\n  width: 8px;\n  height: 20px;\n  position: absolute;\n  transform: rotate(0deg);\n  background-color: #fff;\n  border-top: solid 2px #2f363d;\n  border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .line-3 {\n  width: 8px;\n  height: 20px;\n  position: absolute;\n  transform: rotate(45deg);\n  background-color: #fff;\n  border-top: solid 2px #2f363d;\n  border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .line-4 {\n  width: 8px;\n  height: 20px;\n  position: absolute;\n  transform: rotate(-45deg);\n  background-color: #fff;\n  border-top: solid 2px #2f363d;\n  border-bottom: solid 2px #2f363d;\n}\n.alert-octagon .center {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 100%;\n  height: 100%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 1px;\n}\n.alert-octagon .center .line-5 {\n  display: flex;\n  width: 2px;\n  height: 6px;\n  background-color: #2f363d;\n  border-radius: 50px;\n}\n.alert-octagon .center .line-6 {\n  display: flex;\n  width: 2px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 50px;\n}\n/* ----- */\n.center-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 2px;\n  width: 18px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n}\n.center-text .line-1 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.center-text .line-2 {\n  width: 12px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.center-text .line-3 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.center-text .line-4 {\n  width: 12px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n/* ------ */\n.justify-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 2px;\n  width: 18px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n}\n.justify-text .line-1 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.justify-text .line-2 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.justify-text .line-3 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.justify-text .line-4 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n/* ----- */\n.left-text {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  flex-direction: column;\n  gap: 2px;\n  width: 18px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n}\n.left-text .line-1 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.left-text .line-2 {\n  width: 12px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.left-text .line-3 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.left-text .line-4 {\n  width: 12px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n/* ----- */\n.right-text {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: column;\n  gap: 2px;\n  width: 18px;\n  height: 24px;\n  border: none;\n  cursor: pointer;\n}\n.right-text .line-1 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.right-text .line-2 {\n  width: 12px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.right-text .line-3 {\n  width: 18px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n.right-text .line-4 {\n  width: 12px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n}\n/* ----- */\n.left-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 10px;\n  height: 10px;\n  border: none;\n  position: relative;\n  transform: rotate(-135deg);\n  cursor: pointer;\n  margin-left: -2px;\n}\n.left-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.left-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.left-arrow .line-1:after {\n  content: \"\";\n  width: 2px;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.left-arrow .line-2 {\n  width: 14px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.right-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 10px;\n  height: 10px;\n  border: none;\n  position: relative;\n  transform: rotate(45deg);\n  cursor: pointer;\n  margin-left: 2px;\n}\n.right-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.right-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.right-arrow .line-1:after {\n  content: \"\";\n  width: 2px;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.right-arrow .line-2 {\n  width: 14px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.bottom-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 10px;\n  height: 10px;\n  border: none;\n  position: relative;\n  transform: rotate(135deg);\n  cursor: pointer;\n  margin-top: 2px;\n}\n.bottom-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.bottom-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.bottom-arrow .line-1:after {\n  content: \"\";\n  width: 2px;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.bottom-arrow .line-2 {\n  width: 14px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.top-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 10px;\n  height: 10px;\n  border: none;\n  position: relative;\n  transform: rotate(-45deg);\n  cursor: pointer;\n  margin-top: -2px;\n}\n.top-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.top-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.top-arrow .line-1:after {\n  content: \"\";\n  width: 2px;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 50px;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.top-arrow .line-2 {\n  width: 14px;\n  height: 2px;\n  background-color: #2f363d;\n  border-radius: 5px;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.battery-empty {\n  position: relative;\n  display: flex;\n  border: none;\n  cursor: pointer;\n}\n.battery-empty .line-1 {\n  box-sizing: border-box;\n  width: 20px;\n  height: 12px;\n  border: 2px solid #2f363d;\n  border-radius: 3px;\n}\n.battery-empty .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 4px;\n  height: 6px;\n  right: -2px;\n  top: 3px;\n  background-color: #2f363d;\n}\n/* ----- */\n.battery-charge {\n  position: relative;\n  display: flex;\n  border: none;\n  cursor: pointer;\n}\n.battery-charge .line-1 {\n  box-sizing: border-box;\n  width: 20px;\n  height: 12px;\n  border: 2px solid #2f363d;\n  border-radius: 3px;\n}\n.battery-charge .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 4px;\n  height: 6px;\n  right: -2px;\n  top: 3px;\n  background-color: #2f363d;\n}\n.battery-charge .line-3 {\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  width: 0;\n  height: 0;\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-bottom: 4px solid #2f363d;\n  left: 9px;\n  top: 2px;\n  transform: rotate(30deg);\n}\n.battery-charge .line-4 {\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  width: 0;\n  height: 0;\n  border-left: 1px solid transparent;\n  border-right: 1px solid transparent;\n  border-top: 5px solid #2f363d;\n  right: 10px;\n  bottom: 2px;\n  transform: rotate(30deg);\n}\n/* ----- */\n.battery {\n  position: relative;\n  display: flex;\n  border: none;\n  cursor: pointer;\n}\n.battery .line-1 {\n  box-sizing: border-box;\n  width: 20px;\n  height: 12px;\n  border: 2px solid #2f363d;\n  border-radius: 3px;\n}\n.battery .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 4px;\n  height: 6px;\n  right: -2px;\n  top: 3px;\n  background-color: #2f363d;\n}\n.battery .line-3 {\n  background-color: #2f363d;\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  height: 6px;\n  width: 40%;\n  border-radius: 1px;\n  top: 3px;\n  left: 3px;\n}\n/* ----- */\n.battery-full {\n  position: relative;\n  display: flex;\n  border: none;\n  cursor: pointer;\n}\n.battery-full .line-1 {\n  box-sizing: border-box;\n  width: 20px;\n  height: 12px;\n  border: 2px solid #2f363d;\n  border-radius: 3px;\n}\n.battery-full .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 3px;\n  width: 4px;\n  height: 6px;\n  right: -2px;\n  top: 3px;\n  background-color: #2f363d;\n}\n.battery-full .line-3 {\n  background-color: #2f363d;\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  height: 6px;\n  width: calc(100% - 6px);\n  border-radius: 1px;\n  top: 3px;\n  left: 3px;\n}",
    "file_path": "/mnt/persist/workspace/Buttons/barisdogansutcu_quiet-mayfly-12.html"
  },
  "uniapp": {
    "template": "<view class=\"icons\"></view>\n  <view class=\"title\"></view>\n    <text>O</text>\n    <text>N</text>\n    <text>L</text>\n    <text>Y</text>\n    <text>C</text>\n    <text>S</text>\n    <text>S</text>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"activity\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n      <text class=\"line-4\"></text>\n      <text class=\"line-5\"></text>\n    </button>\n    <view class=\"text\">Activity</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"airplay\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n    </button>\n    <view class=\"text\">AirPlay</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"alert-circle\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n    </button>\n    <view class=\"text\">Alert</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"alert-octagon\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n      <text class=\"line-4\"></text>\n      <view class=\"center\"></view>\n        <text class=\"line-5\"></text>\n        <text class=\"line-6\"></text>\n      </div>\n    </button>\n    <view class=\"text\">Alert</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"center-text\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n      <text class=\"line-4\"></text>\n    </button>\n    <view class=\"text\">Text Center</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"justify-text\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n      <text class=\"line-4\"></text>\n    </button>\n    <view class=\"text\">Text Justify</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"left-text\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n      <text class=\"line-4\"></text>\n    </button>\n    <view class=\"text\">Text Left</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"right-text\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n      <text class=\"line-4\"></text>\n    </button>\n    <view class=\"text\">Text Right</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"left-arrow\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n    </button>\n    <view class=\"text\">Left Arrow</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"right-arrow\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n    </button>\n    <view class=\"text\">Right Arrow</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"bottom-arrow\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n    </button>\n    <view class=\"text\">Bottom Arrow</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"top-arrow\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n    </button>\n    <view class=\"text\">Top Arrow</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"battery-empty\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n    </button>\n    <view class=\"text\">Battery</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"battery-charge\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n      <text class=\"line-4\"></text>\n    </button>\n    <view class=\"text\">Battery C.</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"battery\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n    </button>\n    <view class=\"text\">Battery 50%</view>\n  </div>\n  <view class=\"icon-box\"></view>\n    <button class=\"battery-full\"></button>\n      <text class=\"line-1\"></text>\n      <text class=\"line-2\"></text>\n      <text class=\"line-3\"></text>\n    </button>\n    <view class=\"text\">Battery Full</view>\n  </div>\n</div>",
    "script": "export default {\n  name: 'GalaxyQuietMayfly12',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by barisdogansutcu  - Tags: icon, button, css icon */\n.text {\n  font-size: 10rpx;\n  position: absolute;\n  top: 6rpx;\n  color: #2f363d;\n  opacity: 0;\n}\n.icons {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  place-content: center;\n  gap: 10rpx;\n}\n.title {\n  grid-column-start: 1;\n  grid-column-end: 5;\n  text-align: center;\n  font-weight: 100;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.title span {\n  /* #ifdef H5 */\n  text-shadow: 2rpx 2rpx #ffffff;\n  /* #endif */\n}\n.icon-box:hover {\n  transform: scale(2);\n  z-index: 9;\n}\n.icon-box {\n  background-color: #ffffff;\n  width: 80rpx;\n  height: 80rpx;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: rgba(99, 99, 99, 0.2) 0rpx 4rpx 16rpx 0rpx;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n  border-radius: 10rpx;\n  transition: all 0.2s ease;\n  position: relative;\n}\n.icon-box:hover .text {\n  opacity: 1;\n}\n.icon-box:hover button {\n  margin-top: 10rpx;\n}\nbutton {\n  background-color: transparent;\n  z-index: 0;\n  margin-top: 0rpx;\n}\n.activity {\n  position: relative;\n  width: 60rpx;\n  height: 60rpx;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.activity .line-1 {\n  display: inline-flex;\n  width: 16rpx;\n  height: 4rpx;\n  border-radius: 100rpx;\n  background-color: #2f363d;\n}\n.activity .line-2 {\n  display: inline-flex;\n  width: 18rpx;\n  height: 4rpx;\n  border-radius: 100rpx;\n  background-color: #2f363d;\n  transform: rotate(-75deg);\n  margin-top: -16rpx;\n  margin-left: -8rpx;\n}\n.activity .line-3 {\n  display: inline-flex;\n  width: 32rpx;\n  height: 4rpx;\n  border-radius: 100rpx;\n  background-color: #2f363d;\n  transform: rotate(70deg);\n  margin-top: -6rpx;\n  margin-left: -18rpx;\n}\n.activity .line-4 {\n  display: inline-flex;\n  width: 16rpx;\n  height: 4rpx;\n  border-radius: 100rpx;\n  background-color: #2f363d;\n  transform: rotate(-70deg);\n  margin-top: 12rpx;\n  margin-left: -16rpx;\n}\n.activity .line-5 {\n  display: inline-flex;\n  width: 16rpx;\n  height: 4rpx;\n  border-radius: 100rpx;\n  background-color: #2f363d;\n  margin-top: 0rpx;\n  margin-left: -6rpx;\n}\n/* ----- */\n.airplay {\n  position: relative;\n  width: 60rpx;\n  height: 60rpx;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.airplay .line-1 {\n  width: 40rpx;\n  height: 28rpx;\n  background-color: white;\n  border-radius: 4rpx;\n  /* #ifdef H5 */\n  /* #ifdef H5 */\n  box-shadow: 0rpx 0rpx 0rpx 4rpx #2f363d;\n  /* #endif */\n  /* #ifdef MP */\n  border: 1rpx solid rgba(0,0,0,0.1);\n  /* #endif */\n  /* #endif */\n}\n.airplay .line-2 {\n  width: 0;\n  height: 0;\n  border: 12rpx solid transparent;\n  border-top: 0;\n  border-bottom: 12rpx solid #2f363d;\n  position: absolute;\n  margin-top: 32rpx;\n  background-color: #ffffff;\n  border-radius: 100% 100% 0 0;\n}\n/* ----- */\n.alert-circle {\n  width: 40rpx;\n  height: 40rpx;\n  background-color: #ffffff;\n  border-radius: 100%;\n  border: solid 4rpx #2f363d;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 2rpx;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.alert-circle .line-1 {\n  width: 4rpx;\n  height: 12rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n}\n.alert-circle .line-2 {\n  width: 4rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n}\n/* ----- */\n.alert-triangle {\n  width: 40rpx;\n  height: 40rpx;\n  background-color: #ffffff;\n  border-radius: 100%;\n  border: solid 4rpx #2f363d;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 2rpx;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.alert-triangle .line-1 {\n  width: 4rpx;\n  height: 12rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n}\n.alert-triangle .line-2 {\n  width: 4rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n}\n/* ----- */\n.alert-octagon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: none;\n  position: relative;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.alert-octagon .line-1 {\n  width: 40rpx;\n  height: 16rpx;\n  background-color: #fff;\n  border-left: solid 4rpx #2f363d;\n  border-right: solid 4rpx #2f363d;\n}\n.alert-octagon .line-2 {\n  width: 16rpx;\n  height: 40rpx;\n  position: absolute;\n  transform: rotate(0deg);\n  background-color: #fff;\n  border-top: solid 4rpx #2f363d;\n  border-bottom: solid 4rpx #2f363d;\n}\n.alert-octagon .line-3 {\n  width: 16rpx;\n  height: 40rpx;\n  position: absolute;\n  transform: rotate(45deg);\n  background-color: #fff;\n  border-top: solid 4rpx #2f363d;\n  border-bottom: solid 4rpx #2f363d;\n}\n.alert-octagon .line-4 {\n  width: 16rpx;\n  height: 40rpx;\n  position: absolute;\n  transform: rotate(-45deg);\n  background-color: #fff;\n  border-top: solid 4rpx #2f363d;\n  border-bottom: solid 4rpx #2f363d;\n}\n.alert-octagon .center {\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 100%;\n  height: 100%;\n  transform: translate(-50%, -50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 2rpx;\n}\n.alert-octagon .center .line-5 {\n  display: flex;\n  width: 4rpx;\n  height: 12rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n}\n.alert-octagon .center .line-6 {\n  display: flex;\n  width: 4rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n}\n/* ----- */\n.center-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 4rpx;\n  width: 36rpx;\n  height: 48rpx;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.center-text .line-1 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.center-text .line-2 {\n  width: 24rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.center-text .line-3 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.center-text .line-4 {\n  width: 24rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n/* ------ */\n.justify-text {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  gap: 4rpx;\n  width: 36rpx;\n  height: 48rpx;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.justify-text .line-1 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.justify-text .line-2 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.justify-text .line-3 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.justify-text .line-4 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n/* ----- */\n.left-text {\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  flex-direction: column;\n  gap: 4rpx;\n  width: 36rpx;\n  height: 48rpx;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.left-text .line-1 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.left-text .line-2 {\n  width: 24rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.left-text .line-3 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.left-text .line-4 {\n  width: 24rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n/* ----- */\n.right-text {\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  flex-direction: column;\n  gap: 4rpx;\n  width: 36rpx;\n  height: 48rpx;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.right-text .line-1 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.right-text .line-2 {\n  width: 24rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.right-text .line-3 {\n  width: 36rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n.right-text .line-4 {\n  width: 24rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n}\n/* ----- */\n.left-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 20rpx;\n  height: 20rpx;\n  border: none;\n  position: relative;\n  transform: rotate(-135deg);\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  margin-left: -4rpx;\n}\n.left-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.left-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.left-arrow .line-1:after {\n  content: \"\";\n  width: 4rpx;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.left-arrow .line-2 {\n  width: 28rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.right-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 20rpx;\n  height: 20rpx;\n  border: none;\n  position: relative;\n  transform: rotate(45deg);\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  margin-left: 4rpx;\n}\n.right-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.right-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.right-arrow .line-1:after {\n  content: \"\";\n  width: 4rpx;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.right-arrow .line-2 {\n  width: 28rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.bottom-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 20rpx;\n  height: 20rpx;\n  border: none;\n  position: relative;\n  transform: rotate(135deg);\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  margin-top: 4rpx;\n}\n.bottom-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.bottom-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.bottom-arrow .line-1:after {\n  content: \"\";\n  width: 4rpx;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.bottom-arrow .line-2 {\n  width: 28rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.top-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: column;\n  width: 20rpx;\n  height: 20rpx;\n  border: none;\n  position: relative;\n  transform: rotate(-45deg);\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n  margin-top: -4rpx;\n}\n.top-arrow .line-1 {\n  width: 100%;\n  height: 100%;\n  background-color: #fff;\n}\n.top-arrow .line-1:before {\n  content: \"\";\n  width: 100%;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.top-arrow .line-1:after {\n  content: \"\";\n  width: 4rpx;\n  height: 100%;\n  background-color: #2f363d;\n  border-radius: 100rpx;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.top-arrow .line-2 {\n  width: 28rpx;\n  height: 4rpx;\n  background-color: #2f363d;\n  border-radius: 10rpx;\n  position: absolute;\n  transform: translate(-27%, -110%) rotate(-45deg);\n  left: 0;\n  bottom: 0;\n}\n/* ----- */\n.battery-empty {\n  position: relative;\n  display: flex;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.battery-empty .line-1 {\n  box-sizing: border-box;\n  width: 40rpx;\n  height: 24rpx;\n  border: 4rpx solid #2f363d;\n  border-radius: 6rpx;\n}\n.battery-empty .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 6rpx;\n  width: 8rpx;\n  height: 12rpx;\n  right: -4rpx;\n  top: 6rpx;\n  background-color: #2f363d;\n}\n/* ----- */\n.battery-charge {\n  position: relative;\n  display: flex;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.battery-charge .line-1 {\n  box-sizing: border-box;\n  width: 40rpx;\n  height: 24rpx;\n  border: 4rpx solid #2f363d;\n  border-radius: 6rpx;\n}\n.battery-charge .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 6rpx;\n  width: 8rpx;\n  height: 12rpx;\n  right: -4rpx;\n  top: 6rpx;\n  background-color: #2f363d;\n}\n.battery-charge .line-3 {\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  width: 0;\n  height: 0;\n  border-left: 2rpx solid transparent;\n  border-right: 2rpx solid transparent;\n  border-bottom: 8rpx solid #2f363d;\n  left: 18rpx;\n  top: 4rpx;\n  transform: rotate(30deg);\n}\n.battery-charge .line-4 {\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  width: 0;\n  height: 0;\n  border-left: 2rpx solid transparent;\n  border-right: 2rpx solid transparent;\n  border-top: 10rpx solid #2f363d;\n  right: 20rpx;\n  bottom: 4rpx;\n  transform: rotate(30deg);\n}\n/* ----- */\n.battery {\n  position: relative;\n  display: flex;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.battery .line-1 {\n  box-sizing: border-box;\n  width: 40rpx;\n  height: 24rpx;\n  border: 4rpx solid #2f363d;\n  border-radius: 6rpx;\n}\n.battery .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 6rpx;\n  width: 8rpx;\n  height: 12rpx;\n  right: -4rpx;\n  top: 6rpx;\n  background-color: #2f363d;\n}\n.battery .line-3 {\n  background-color: #2f363d;\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  height: 12rpx;\n  width: 40%;\n  border-radius: 2rpx;\n  top: 6rpx;\n  left: 6rpx;\n}\n/* ----- */\n.battery-full {\n  position: relative;\n  display: flex;\n  border: none;\n  /* #ifdef H5 */\n  cursor: pointer;\n  /* #endif */\n}\n.battery-full .line-1 {\n  box-sizing: border-box;\n  width: 40rpx;\n  height: 24rpx;\n  border: 4rpx solid #2f363d;\n  border-radius: 6rpx;\n}\n.battery-full .line-2 {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: 6rpx;\n  width: 8rpx;\n  height: 12rpx;\n  right: -4rpx;\n  top: 6rpx;\n  background-color: #2f363d;\n}\n.battery-full .line-3 {\n  background-color: #2f363d;\n  position: absolute;\n  display: flex;\n  box-sizing: border-box;\n  height: 12rpx;\n  width: calc(100% - 12rpx);\n  border-radius: 2rpx;\n  top: 6rpx;\n  left: 6rpx;\n}\n\n",
    "component_name": "GalaxyQuietMayfly12"
  },
  "platforms": {
    "h5": true,
    "mp-weixin": true,
    "mp-alipay": true,
    "mp-baidu": true,
    "mp-toutiao": true,
    "app-plus": true
  },
  "props": [
    {
      "name": "disabled",
      "type": "Boolean",
      "default": false,
      "required": false,
      "description": "是否禁用"
    },
    {
      "name": "text",
      "type": "String",
      "default": "按钮",
      "required": false,
      "description": "按钮文字"
    },
    {
      "name": "type",
      "type": "String",
      "default": "primary",
      "required": false,
      "description": "按钮类型"
    }
  ],
  "events": [
    {
      "name": "click",
      "description": "点击事件",
      "parameters": [
        "event"
      ]
    }
  ],
  "slots": [
    {
      "name": "",
      "description": "",
      "props": []
    }
  ],
  "compatibility": {
    "h5": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-weixin": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 text-shadow 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [
        "不支持 box-shadow 属性",
        "不支持 text-shadow 属性",
        "不支持 cursor 属性"
      ],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 17590,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:35.912Z",
  "updated_at": "2025-07-31T07:55:35.912Z"
}