{"id":19196446,"url":"https://github.com/lingdu2012/ramui-svelte-bootstrap","last_synced_at":"2025-07-10T11:14:41.183Z","repository":{"id":124835290,"uuid":"279094235","full_name":"lingdu2012/ramUI-Svelte-Bootstrap","owner":"lingdu2012","description":"a UI component for Svelte 一个前端UI组件","archived":false,"fork":false,"pushed_at":"2021-02-03T07:08:17.000Z","size":88,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-23T04:43:59.229Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lingdu2012.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-07-12T15:35:31.000Z","updated_at":"2021-02-03T07:08:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"b00b380c-3176-4c2c-89cf-7cd3bb691287","html_url":"https://github.com/lingdu2012/ramUI-Svelte-Bootstrap","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lingdu2012/ramUI-Svelte-Bootstrap","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lingdu2012%2FramUI-Svelte-Bootstrap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lingdu2012%2FramUI-Svelte-Bootstrap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lingdu2012%2FramUI-Svelte-Bootstrap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lingdu2012%2FramUI-Svelte-Bootstrap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lingdu2012","download_url":"https://codeload.github.com/lingdu2012/ramUI-Svelte-Bootstrap/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lingdu2012%2FramUI-Svelte-Bootstrap/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264569493,"owners_count":23629605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-09T12:13:43.327Z","updated_at":"2025-07-10T11:14:41.165Z","avatar_url":"https://github.com/lingdu2012.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ramUI-Svelte-Bootstrap\n\na UI component for Svelte，It will be kept up to date\n\n\u003e 这是一个基于Svelte和Bootstrap的UI组件封装实践\n\u003e 本项目基于Svelte3.X 和 Bootstrap 5.X，同时支持自定义主题\n\n### 设计思考\n* 非数据交互类的组件不需要封装，例如点击按钮，下拉选择按钮则可以考虑封装。\n* 封装组件考虑自定义样式的配置，留给使用者一部分冗余空间，避免hack方式的样式使用。\n* 坚持“适量”和“少即是多”的原则，保证灵活性的同时，降低组件复杂度。\n\n### 主要依赖\n\u003e 安装Bootstrap5.x时需要同时安装popper\n```javascript\nnpm install bootstrap@next\nnpm install --save @popperjs/core@^2.5.4\n```\n\n\u003e 使用rollup作为打包工具\n```javascript\nimport svelte from 'rollup-plugin-svelte';\nimport commonjs from '@rollup/plugin-commonjs';\nimport resolve from '@rollup/plugin-node-resolve';\nimport livereload from 'rollup-plugin-livereload';\nimport { terser } from 'rollup-plugin-terser';\nimport postcss from 'rollup-plugin-postcss';\n\nimport sveltePreprocess from 'svelte-preprocess'\n```\n### 与vscode开发环境相关问题\n\u003e 需要在src目录下增加svelte.config.js才可以在.svelte文件内使用scss语法样式\n```javascript\nconst sveltePreprocess = require('svelte-preprocess');\nmodule.exports = {\n  preprocess: sveltePreprocess({\n    scss: {\n      includePaths: ['src'],\n    },\n    postcss: {\n      plugins: [],\n    },\n  }),\n};\n```\n\n###  基本使用方法\n\n\u003e 将RamUI文件夹内文件放入工程目录中\n\u003e 在所需要的文件中引入所需要的组件\n\n```javascript\n    import 'bootstrap/dist/css/bootstrap.min.css';\n    import RamContainer from '../src/components/Container.svelte';\n    import RamRow from '../src/components/Row.svelte';\n    import RamCol from '../src/components/Col.svelte';\n```\n```javascript\n  \u003cRamContainer type=\"fluid\"\u003e\n     \u003cRamRow exClass=\"row-cols-auto\"\u003e\n        \u003cRamCol rowNum=\"3\"\u003e\u003c/RamCol\u003e\n        \u003cRamCol rowNum=\"3\"\u003e\u003c/RamCol\u003e\n     \u003c/RamRow\u003e\n   \u003c/RamContainer\u003e\n```\n### 基础说明 \n\n\u003e 本文件当前处于研究尝试的一个基本路线，代码会不断完善、优化和规范。\n\n  欢迎有兴趣的人给予建议和指导。\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flingdu2012%2Framui-svelte-bootstrap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flingdu2012%2Framui-svelte-bootstrap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flingdu2012%2Framui-svelte-bootstrap/lists"}