UNPKG

galaxy-uniapp-mcp-server

Version:

Galaxy组件库到UniApp组件转换MCP服务器 - 支持跨平台组件转换、兼容性分析和项目集成

89 lines 9.97 kB
{ "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 &amp; 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 &amp; 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" }