{"id":20899919,"url":"https://github.com/katoto/idevices-doc","last_synced_at":"2025-12-27T10:11:01.678Z","repository":{"id":194797678,"uuid":"691538440","full_name":"katoto/idevices-doc","owner":"katoto","description":"i-devices 文档站点","archived":false,"fork":false,"pushed_at":"2023-09-28T08:41:19.000Z","size":6262,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-12T20:17:04.486Z","etag":null,"topics":["devices","i-devices","pure-css"],"latest_commit_sha":null,"homepage":"https://i-devices.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/katoto.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":"2023-09-14T11:38:45.000Z","updated_at":"2023-09-15T13:50:58.000Z","dependencies_parsed_at":"2023-09-15T06:03:09.978Z","dependency_job_id":"5a7055bf-2792-4e74-ac89-0ef14732d991","html_url":"https://github.com/katoto/idevices-doc","commit_stats":null,"previous_names":["katoto/idevices-doc"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/katoto/idevices-doc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katoto%2Fidevices-doc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katoto%2Fidevices-doc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katoto%2Fidevices-doc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katoto%2Fidevices-doc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/katoto","download_url":"https://codeload.github.com/katoto/idevices-doc/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/katoto%2Fidevices-doc/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28077395,"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","status":"online","status_checked_at":"2025-12-27T02:00:05.897Z","response_time":58,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["devices","i-devices","pure-css"],"created_at":"2024-11-18T11:16:45.561Z","updated_at":"2025-12-27T10:11:01.659Z","avatar_url":"https://github.com/katoto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 什么?\n\n一款通过纯 CSS 代码实现手机（iphone 系列、Google 系列）、电脑（MacBook、SurfaceBook 系列）等各类设备样式效果。\n\n## 特性\n\n- 🎨 **多设备**: 提供多种设备样式，像 iPhone 系列、MacBook、Apple Watch。\n- 🚧 **跨框架**: 完全基于纯 CSS，vue\\react\\原生均可使用，超易用。\n- 🪄 **灵活可定制**: 内容区域支持自定义，满足个性化需求。\n- 🧱 **丰富特性**: 开箱即用的颜色和组件\n\n## 使用指南\n\n#### React 使用方式\n\n```bash | pure\nyarn add i-devices\n```\n\n```jsx | pure\nimport React from 'react';\nimport { IDevicesReact } from 'i-devices';\n\nexport default function () {\n  return (\n    \u003cdiv\u003e\n      \u003cIDevicesReact\u003e\u003c/IDevicesReact\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n#### Vue 使用方式\n\n```bash | pure\nyarn add i-devices\n```\n\n```js | pure\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003ci-devices\u003e\u003c/i-devices\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport 'i-devices';\n\u003c/script\u003e\n```\n\n#### 原生 Js Module\n\n```\n// 需安装lit 相关依赖 见 https://lit.dev/playground/\n\"dependencies\": {\n  \"lit\": \"^2.0.0\",\n  \"@lit/reactive-element\": \"^1.0.0\",\n  \"lit-element\": \"^3.0.0\",\n  \"lit-html\": \"^2.0.0\"\n}\n```\n\n```html | pure\n\u003c!DOCTYPE html\u003e\n\u003chead\u003e\n  \u003c!-- 参见 https://lit.dev/playground/ --\u003e\n  \u003cscript\n    type=\"module\"\n    src=\"https://unpkg.com/i-devices@0.1.2/dist/iDevices.js\"\n  \u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003ci-devices\u003e\u003c/i-devices\u003e\n\u003c/body\u003e\n```\n\n\u003cbr /\u003e\n\n## 案例展示\n\n更多使用方式，详见设备详情和使用 API\n\n```tsx\nimport { IDevicesReact } from 'i-devices';\nimport React from 'react';\n\nexport default function () {\n  return (\n    \u003cdiv style={{ width: '350px', margin: '0 auto' }}\u003e\n      \u003cIDevicesReact modelcolor=\"device-silver\" scale={0.9} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 丰富的设备样式\n\n纯 CSS 代码实现手机、电脑等各类设备样式效果（Modern devices crafted in pure CSS）\n\n\u003cbr /\u003e\n\n## API\n\n| 参数       | 说明                         | 类型                                                                | 默认值               |\n| :--------- | :--------------------------- | :------------------------------------------------------------------ | :------------------- |\n| modelname  | 设备名称                     | string (device-iphone-x \\| device-iphone-14\\| device-macbook\\ 等等) | device-iphone-14-pro |\n| modelcolor | 外壳颜色（详见详情）         | string (device-gold \\| device-purple\\| device-silver\\ 等等)         | 默认                 |\n| scale      | 缩放                         | string (0 - 1)                                                      | 1                    |\n| modelbar   | 展示手机 tabbar 导航栏       | boolean                                                             | false                |\n| bartitle   | 导航标题                     | string                                                              | 标题                 |\n| usezoom    | transform 改用 zoom 进行缩放 | boolean                                                             | false                |\n\n支持设备内容自定义，slot=\"slot-screen\"\n\n```jsx | pure\n\u003cIDevicesReact\n  modelname=\"device-iphone-14-pro\"\n  modelcolor={actColor}\n  scale={scale}\n\u003e\n  \u003cimg\n    slot=\"slot-screen\"\n    className=\"device-screen\"\n    src=\"/img/bg-iphone-14-pro.jpg\"\n    loading=\"lazy\"\n  /\u003e\n\u003c/IDevicesReact\u003e\n```\n\n\u003cbr /\u003e\n\n## 问题反馈\n\n#### 一、套了个“手机”壳影响原拖拽功能？\n\n[根源查看](https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#warning-position-fixed) \u003cbr /\u003e\n原因：position: fixed 会受到父级上的 transform 的影响，导致位置不准确。 \u003cbr /\u003e\nfixed：开启 usezoom，去除 transform 缩放，改用 zoom 缩放。 或者可以将拖动项移动到 DOM 的另一个位置(document.body)\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n如果在使用过程中发现任何问题、或者有改善建议，欢迎在 [**GitHub Issues**](https://github.com/)进行反馈\n\n\u003cbr /\u003e\n\n## License\n\nThe MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatoto%2Fidevices-doc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkatoto%2Fidevices-doc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkatoto%2Fidevices-doc/lists"}