{"id":19751163,"url":"https://github.com/mipengine/mip-by-example","last_synced_at":"2025-10-08T11:49:06.828Z","repository":{"id":152222280,"uuid":"176693597","full_name":"mipengine/mip-by-example","owner":"mipengine","description":"MIP  组件示例","archived":false,"fork":false,"pushed_at":"2019-03-20T08:58:33.000Z","size":2890,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-01-10T21:32:50.405Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mipengine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-03-20T08:57:31.000Z","updated_at":"2019-03-20T08:58:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"e312096c-89c3-425c-a2d4-67f468bb0abc","html_url":"https://github.com/mipengine/mip-by-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-by-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-by-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-by-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mipengine%2Fmip-by-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mipengine","download_url":"https://codeload.github.com/mipengine/mip-by-example/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241080862,"owners_count":19906363,"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-12T02:42:41.794Z","updated_at":"2025-10-08T11:49:01.787Z","avatar_url":"https://github.com/mipengine.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MIP by Example\n\nMIP 组件丰富的使用示例展示。\n\n## 创建新示例\n\n* 在 `example` 目录对应的组件类型中新建页面\n\n  ```\n  vim examples/layout/mip-test.html\n  ```\n\n* `npm run dev`\n\n* 实时预览示例编写 `http://0.0.0.0:18080/`\n\n## 编写新示例\n\n示例说明部分使用 HTML 注释 ``\u003c!-- ... --\u003e` ，内容使用 markdown 格式\n\n* 二级标题会渲染为右侧目录\n* 必须包括 `## 组件介绍` 小节，第一句用于生成组件描述，建议第一句简洁说明组件作用\n\n```html\n\u003c!-- ## 组件介绍 --\u003e\n\u003c!-- [mip-form](https://www.mipengine.org/v2/components/dynamic-content/mip-form.html) 组件用于在 MIP 页面中进行表单提交。`mip-form` 支持 HTTP 和 XHR(XMLHTTPRequest) 两种提交方式，使用 HTTP 提交会加载或跳转至新的页面，而使用 XHR 提交可以异步渲染更新页面。\n--\u003e\n```\n\n示例 code 部分直接使用 HTML tag，用于渲染示例代码和示例展示。\n\n```html\n\u003c!-- ## 提交表单刷新页面 --\u003e\n\u003c!-- 使用 `target=_top` 提交表单后，在当前窗口跳转。--\u003e\n\u003cmip-form method=\"GET\" url=\"/mip-form/submit-form-success\" target=\"_top\"\u003e\n  \u003cinput type=\"text\" name=\"username\" placeholder=\"姓名\"\u003e\n  \u003cinput type=\"number\" name=\"age\" placeholder=\"年龄\"\u003e\n  \u003cinput type=\"submit\" value=\"提交\"\u003e\n\u003c/mip-form\u003e\n```\n\n* 如果组件仅适用移动端展示，可在示例 DOM 上添加  `data-strategy=\"mobile-only\"`。\n\n```html\n\u003c!-- ## 固定位置 --\u003e\n\u003c!-- 使用悬浮组件支持 --\u003e\n\u003cdiv id=\"mip-example-code\" data-strategy=\"mobile-only\"\u003e\n  \u003cmip-fixed type=\"bottom\"\u003e\n    \u003cmip-appdl \n     ...\n    \u003c/mip-appdl\u003e\n  \u003c/mip-fixed\u003e\n\u003c/div\u003e\n\u003c/div\u003e\n```\n\n如果组件需要 server 进行 api  mock，项目提供基于 express 搭建的 server。可在 `src/routes `中创建和编写路由文件，并在 `src/routes/index.js` 中进行路由 register（建议文件和路由均以组件名命名）\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmipengine%2Fmip-by-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmipengine%2Fmip-by-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmipengine%2Fmip-by-example/lists"}