galaxy-uniapp-mcp-server
Version:
Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成
89 lines • 9.97 kB
JSON
{
"id": "TanimMahbub_white-fly-43",
"name": "white-fly-43",
"category": "tooltips",
"author": "TanimMahbub",
"description": "white-fly-43 组件 (simple, tooltip, icon, black, animation, interactive)",
"tags": [
"simple",
"tooltip",
"icon",
"black",
"animation",
"interactive"
],
"original": {
"html": "<div class=\"wrapper\">\n <div>\n <a href=\"#\" data-tooltip-content=\"Github\" class=\"data-tooltip\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-github\" viewBox=\"0 0 16 16\">\n <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8\"></path>\n </svg>\n </a>\n <p>Tooltip using HTML custom data attribute & CSS content property</p>\n </div>\n\n <div>\n <a href=\"#\" class=\"span-tooltip\">\n <i>\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-github\" viewBox=\"0 0 16 16\">\n <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8\"></path>\n </svg>\n </i>\n <span>Github</span>\n </a>\n <p>Tooltip using span tag</p>\n </div>\n</div>",
"css": "/* From Uiverse.io by TanimMahbub - Tags: simple, tooltip, icon, black */\n.wrapper {\n display: flex;\n gap: 10px;\n font-family: monospace;\n}\n\n.wrapper > div {\n text-align: center;\n}\n\n.wrapper > div + div {\n border-inline-start: 1px solid #d6cfcf;\n padding-inline-start: 15px;\n}\n\n.wrapper > div > p {\n margin-top: 15px;\n max-width: 200px;\n}\n\n.wrapper a {\n display: inline-flex;\n width: 50px;\n height: 50px;\n border-radius: 100%;\n justify-content: center;\n align-items: center;\n background-color: #191919;\n color: #d5ad72;\n position: relative;\n}\n\n.data-tooltip::before,\n.data-tooltip::after {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n transform: translateY(5px);\n transition: all 0.2s ease;\n}\n\n.data-tooltip::before {\n content: attr(data-tooltip-content);\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: calc(100% + 5px);\n}\n\n.data-tooltip::after {\n content: \"\";\n border-top: 5px solid #191919;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n bottom: calc(100% + 1px);\n}\n\n.data-tooltip:hover::before,\n.data-tooltip:hover::after {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.span-tooltip > i {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span-tooltip > span {\n position: absolute;\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 3px 10px;\n border-radius: 4px;\n bottom: 100%;\n visibility: hidden;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.span-tooltip > span::before {\n position: absolute;\n content: \"\";\n width: 10px;\n height: 10px;\n border-radius: 3px;\n background-color: inherit;\n transform: rotate(45deg);\n top: calc(100% - 6px);\n left: 40%;\n}\n\n.span-tooltip > i:hover + span {\n visibility: visible;\n opacity: 1;\n bottom: calc(100% + 6px);\n}",
"file_path": "/mnt/persist/workspace/Tooltips/TanimMahbub_white-fly-43.html"
},
"uniapp": {
"template": "<view class=\"wrapper\"></view>\n <view></view>\n <navigator href=\"#\" data-tooltip-content=\"Github\" class=\"data-tooltip\"></navigator>\n <view xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-github\" viewBox=\"0 0 16 16\"></view>\n <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8\"></path>\n </svg>\n </a>\n <text>Tooltip using HTML custom data attribute & CSS content property</text>\n </div>\n\n <view></view>\n <navigator href=\"#\" class=\"span-tooltip\"></navigator>\n <i>\n <view xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"currentColor\" class=\"bi bi-github\" viewBox=\"0 0 16 16\"></view>\n <path d=\"M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8\"></path>\n </svg>\n </i>\n <text>Github</text>\n </a>\n <text>Tooltip using span tag</text>\n </div>\n</div>",
"script": "export default {\n name: 'GalaxyWhiteFly43',\n props: {\n // 根据组件类型动态生成props\n },\n data() {\n return {\n // 组件状态\n };\n },\n methods: {\n // 组件方法\n }\n}",
"style": "\n/* From Uiverse.io by TanimMahbub - Tags: simple, tooltip, icon, black */\n.wrapper {\n display: flex;\n gap: 20rpx;\n font-family: monospace;\n}\n\n.wrapper > div {\n text-align: center;\n}\n\n.wrapper > div + div {\n border-inline-start: 2rpx solid #d6cfcf;\n padding-inline-start: 30rpx;\n}\n\n.wrapper > div > p {\n margin-top: 30rpx;\n max-width: 400rpx;\n}\n\n.wrapper a {\n display: inline-flex;\n width: 100rpx;\n height: 100rpx;\n border-radius: 100%;\n justify-content: center;\n align-items: center;\n background-color: #191919;\n color: #d5ad72;\n position: relative;\n}\n\n.data-tooltip::before,\n.data-tooltip::after {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n transform: translateY(10rpx);\n transition: all 0.2s ease;\n}\n\n.data-tooltip::before {\n content: attr(data-tooltip-content);\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 6rpx 20rpx;\n border-radius: 8rpx;\n bottom: calc(100% + 10rpx);\n}\n\n.data-tooltip::after {\n content: \"\";\n border-top: 10rpx solid #191919;\n border-left: 10rpx solid transparent;\n border-right: 10rpx solid transparent;\n bottom: calc(100% + 2rpx);\n}\n\n.data-tooltip:hover::before,\n.data-tooltip:hover::after {\n visibility: visible;\n opacity: 1;\n transform: translateY(0);\n}\n\n.span-tooltip > i {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.span-tooltip > span {\n position: absolute;\n width: fit-content;\n font-size: small;\n font-weight: 600;\n background-color: inherit;\n padding: 6rpx 20rpx;\n border-radius: 8rpx;\n bottom: 100%;\n visibility: hidden;\n opacity: 0;\n transition: all 0.2s ease;\n}\n\n.span-tooltip > span::before {\n position: absolute;\n content: \"\";\n width: 20rpx;\n height: 20rpx;\n border-radius: 6rpx;\n background-color: inherit;\n transform: rotate(45deg);\n top: calc(100% - 12rpx);\n left: 40%;\n}\n\n.span-tooltip > i:hover + span {\n visibility: visible;\n opacity: 1;\n bottom: calc(100% + 12rpx);\n}\n\n",
"component_name": "GalaxyWhiteFly43"
},
"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": "是否禁用"
}
],
"events": [],
"slots": [
{
"name": "",
"description": "",
"props": []
}
],
"compatibility": {
"h5": {
"supported": true,
"issues": [],
"alternatives": []
},
"mp-weixin": {
"supported": true,
"issues": [],
"alternatives": []
},
"mp-alipay": {
"supported": true,
"issues": [],
"alternatives": []
},
"app-plus": {
"supported": true,
"issues": [],
"alternatives": []
}
},
"performance": {
"complexity": "high",
"bundle_size": 3792,
"render_cost": "high",
"memory_usage": "high"
},
"dependencies": [],
"examples": [
{
"title": "",
"description": "",
"code": ""
}
],
"created_at": "2025-07-31T07:55:38.585Z",
"updated_at": "2025-07-31T07:55:38.585Z"
}