{"id":4521,"date":"2025-05-25T09:04:09","date_gmt":"2025-05-25T09:04:09","guid":{"rendered":"https:\/\/ingenio.vip\/?post_type=tools-pages&#038;p=4521"},"modified":"2025-05-25T09:04:13","modified_gmt":"2025-05-25T09:04:13","slug":"ui-snippet-library","status":"publish","type":"tools-pages","link":"https:\/\/ingenio.vip\/zh\/tools-pages\/ui-snippet-library\/","title":{"rendered":"UI Snippet Library"},"content":{"rendered":"<div class=\"ingenio-tool ui-snippet-library\" role=\"region\" aria-labelledby=\"ui-snippet-library-title\">\r\n  <h2 id=\"ui-snippet-library-title\">UI Component Snippet Library<\/h2>\r\n\r\n  <div class=\"snippet-controls\">\r\n    <label for=\"framework\">Framework:<\/label>\r\n    <select id=\"framework\">\r\n      <option value=\"tailwind\">Tailwind CSS<\/option>\r\n      <option value=\"bootstrap\">Bootstrap<\/option>\r\n    <\/select>\r\n  <\/div>\r\n\r\n  <div id=\"snippet-gallery\">\r\n    <!-- Snippets will be injected here -->\r\n  <\/div>\r\n<\/div>\r\n\r\n<style>\r\n  .ingenio-tool.ui-snippet-library {\r\n    max-width: 1200px;\r\n    margin: 40px auto;\r\n    padding: 25px;\r\n    background: #ffffff;\r\n    border-radius: 14px;\r\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);\r\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n    color: #222;\r\n  }\r\n\r\n  .ui-snippet-library h2 {\r\n    text-align: center;\r\n    color: #0a66c2;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .snippet-controls {\r\n    text-align: center;\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  #framework {\r\n    padding: 10px;\r\n    font-size: 1rem;\r\n    border-radius: 6px;\r\n    border: 1px solid #ccc;\r\n  }\r\n\r\n  .snippet {\r\n    border: 1px solid #ddd;\r\n    border-radius: 10px;\r\n    margin: 20px 0;\r\n    padding: 20px;\r\n    background: #f9f9f9;\r\n    position: relative;\r\n  }\r\n\r\n  .snippet pre {\r\n    background: #1e1e1e;\r\n    color: #dcdcdc;\r\n    padding: 15px;\r\n    border-radius: 8px;\r\n    overflow-x: auto;\r\n  }\r\n\r\n  .copy-btn {\r\n    position: absolute;\r\n    top: 10px;\r\n    right: 10px;\r\n    background: #0a66c2;\r\n    color: #fff;\r\n    padding: 8px 12px;\r\n    font-size: 0.9rem;\r\n    border: none;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .copy-btn:hover {\r\n    background: #084a9e;\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  document.addEventListener(\"DOMContentLoaded\", () => {\r\n    const snippets = {\r\n      tailwind: [\r\n        {\r\n          name: \"Card\",\r\n          code: `<div class=\"bg-white shadow-md rounded-lg p-6 max-w-sm\">\r\n  <h3 class=\"text-lg font-semibold mb-2\">Tailwind Card<\/h3>\r\n  <p class=\"text-gray-600\">This is a simple card built with Tailwind CSS.<\/p>\r\n<\/div>`\r\n        },\r\n        {\r\n          name: \"Modal\",\r\n          code: `<div class=\"fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center\">\r\n  <div class=\"bg-white p-6 rounded-lg shadow-lg max-w-md\">\r\n    <h3 class=\"text-xl font-bold mb-4\">Tailwind Modal<\/h3>\r\n    <p>This is a modal component.<\/p>\r\n  <\/div>\r\n<\/div>`\r\n        },\r\n        {\r\n          name: \"Tabs\",\r\n          code: `<div class=\"flex border-b border-gray-300\">\r\n  <button class=\"py-2 px-4 text-blue-600 border-b-2 border-blue-600 font-semibold\">Tab 1<\/button>\r\n  <button class=\"py-2 px-4 text-gray-600 hover:text-blue-600\">Tab 2<\/button>\r\n  <button class=\"py-2 px-4 text-gray-600 hover:text-blue-600\">Tab 3<\/button>\r\n<\/div>`\r\n        },\r\n        {\r\n          name: \"Badge\",\r\n          code: `<span class=\"inline-block px-3 py-1 text-sm font-semibold text-white bg-green-500 rounded-full\">\r\n  Tailwind Badge\r\n<\/span>`\r\n        },\r\n        {\r\n          name: \"Footer\",\r\n          code: `<footer class=\"bg-gray-800 text-white py-6 text-center\">\r\n  <p>&copy; 2025 My Website. All rights reserved.<\/p>\r\n<\/footer>`\r\n        },\r\n        {\r\n          name: \"Navbar\",\r\n          code: `<nav class=\"bg-white shadow\">\r\n  <div class=\"max-w-7xl mx-auto px-4 py-3 flex justify-between items-center\">\r\n    <h1 class=\"text-xl font-bold text-blue-600\">Brand<\/h1>\r\n    <ul class=\"flex gap-6 text-gray-700\">\r\n      <li><a href=\"#\">Home<\/a><\/li>\r\n      <li><a href=\"#\">Features<\/a><\/li>\r\n      <li><a href=\"#\">Pricing<\/a><\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/nav>`\r\n        }\r\n      ],\r\n      bootstrap: [\r\n        {\r\n          name: \"Card\",\r\n          code: `<div class=\"card\" style=\"width: 18rem;\">\r\n  <div class=\"card-body\">\r\n    <h5 class=\"card-title\">Bootstrap Card<\/h5>\r\n    <p class=\"card-text\">This is a simple card built with Bootstrap.<\/p>\r\n  <\/div>\r\n<\/div>`\r\n        },\r\n        {\r\n          name: \"Modal\",\r\n          code: `<div class=\"modal fade show d-block\" tabindex=\"-1\" role=\"dialog\">\r\n  <div class=\"modal-dialog\" role=\"document\">\r\n    <div class=\"modal-content\">\r\n      <div class=\"modal-header\">\r\n        <h5 class=\"modal-title\">Bootstrap Modal<\/h5>\r\n      <\/div>\r\n      <div class=\"modal-body\">\r\n        <p>This is a Bootstrap modal.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>`\r\n        },\r\n        {\r\n          name: \"Tabs\",\r\n          code: `<ul class=\"nav nav-tabs\">\r\n  <li class=\"nav-item\">\r\n    <a class=\"nav-link active\" href=\"#\">Tab 1<\/a>\r\n  <\/li>\r\n  <li class=\"nav-item\">\r\n    <a class=\"nav-link\" href=\"#\">Tab 2<\/a>\r\n  <\/li>\r\n  <li class=\"nav-item\">\r\n    <a class=\"nav-link\" href=\"#\">Tab 3<\/a>\r\n  <\/li>\r\n<\/ul>`\r\n        },\r\n        {\r\n          name: \"Badge\",\r\n          code: `<span class=\"badge bg-success\">Bootstrap Badge<\/span>`\r\n        },\r\n        {\r\n          name: \"Footer\",\r\n          code: `<footer class=\"bg-dark text-white py-4 text-center\">\r\n  <p>&copy; 2025 My Website. All rights reserved.<\/p>\r\n<\/footer>`\r\n        },\r\n        {\r\n          name: \"Navbar\",\r\n          code: `<nav class=\"navbar navbar-expand-lg navbar-light bg-light\">\r\n  <a class=\"navbar-brand\" href=\"#\">Brand<\/a>\r\n  <div class=\"collapse navbar-collapse\">\r\n    <ul class=\"navbar-nav mr-auto\">\r\n      <li class=\"nav-item active\">\r\n        <a class=\"nav-link\" href=\"#\">Home<\/a>\r\n      <\/li>\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link\" href=\"#\">Features<\/a>\r\n      <\/li>\r\n      <li class=\"nav-item\">\r\n        <a class=\"nav-link\" href=\"#\">Pricing<\/a>\r\n      <\/li>\r\n    <\/ul>\r\n  <\/div>\r\n<\/nav>`\r\n        }\r\n      ]\r\n    };\r\n\r\n    const frameworkSelect = document.getElementById(\"framework\");\r\n    const gallery = document.getElementById(\"snippet-gallery\");\r\n\r\n    function renderSnippets(framework) {\r\n      gallery.innerHTML = \"\";\r\n      snippets[framework].forEach(snippet => {\r\n        const snippetEl = document.createElement(\"div\");\r\n        snippetEl.className = \"snippet\";\r\n\r\n        const button = document.createElement(\"button\");\r\n        button.className = \"copy-btn\";\r\n        button.textContent = \"Copy\";\r\n        button.addEventListener(\"click\", () => {\r\n          navigator.clipboard.writeText(snippet.code).then(() => {\r\n            button.textContent = \"Copied!\";\r\n            setTimeout(() => button.textContent = \"Copy\", 1500);\r\n          });\r\n        });\r\n\r\n        const pre = document.createElement(\"pre\");\r\n        pre.textContent = snippet.code;\r\n\r\n        snippetEl.appendChild(button);\r\n        snippetEl.appendChild(pre);\r\n        gallery.appendChild(snippetEl);\r\n      });\r\n    }\r\n\r\n    frameworkSelect.addEventListener(\"change\", () => {\r\n      renderSnippets(frameworkSelect.value);\r\n    });\r\n\r\n    \/\/ Initial render\r\n    renderSnippets(frameworkSelect.value);\r\n  });\r\n<\/script>\r\n\n\n\n\n<p><a href=\"https:\/\/ingenio.vip\/wp-admin\/admin.php?page=ingenio-tools-ui-snippet-library\"><\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>UI Component Snippet Library Framework: Tailwind CSS Bootstrap<\/p>\n<\/p><div class=\"more-link\"><a href=\"https:\/\/ingenio.vip\/zh\/tools-pages\/ui-snippet-library\/\" class=\"btn btn-small btn--dark btn-hover-shadow\"><span class=\"text\">Continue Reading<\/span><i class=\"seoicon-right-arrow\"><\/i><\/a><\/div>","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"elementor_header_footer","meta":{"_acf_changed":false,"googlesitekit_rrm_CAowrpbbCw:productID":"","footnotes":""},"tools-categories":[],"class_list":["post-4521","tools-pages","type-tools-pages","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4521","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages"}],"about":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/types\/tools-pages"}],"author":[{"embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":1,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4521\/revisions"}],"predecessor-version":[{"id":4522,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-pages\/4521\/revisions\/4522"}],"wp:attachment":[{"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/media?parent=4521"}],"wp:term":[{"taxonomy":"tools-categories","embeddable":true,"href":"https:\/\/ingenio.vip\/zh\/wp-json\/wp\/v2\/tools-categories?post=4521"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}