https://github.com/katoto/idevices-doc
i-devices 文档站点
https://github.com/katoto/idevices-doc
devices i-devices pure-css
Last synced: 6 months ago
JSON representation
i-devices 文档站点
- Host: GitHub
- URL: https://github.com/katoto/idevices-doc
- Owner: katoto
- License: mit
- Created: 2023-09-14T11:38:45.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2023-09-28T08:41:19.000Z (almost 3 years ago)
- Last Synced: 2025-03-12T20:17:04.486Z (over 1 year ago)
- Topics: devices, i-devices, pure-css
- Language: JavaScript
- Homepage: https://i-devices.netlify.app/
- Size: 5.97 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 什么?
一款通过纯 CSS 代码实现手机（iphone 系列、Google 系列）、电脑（MacBook、SurfaceBook 系列）等各类设备样式效果。
## 特性
- 🎨 **多设备**: 提供多种设备样式，像 iPhone 系列、MacBook、Apple Watch。
- 🚧 **跨框架**: 完全基于纯 CSS，vue\react\原生均可使用，超易用。
- 🪄 **灵活可定制**: 内容区域支持自定义，满足个性化需求。
- 🧱 **丰富特性**: 开箱即用的颜色和组件
## 使用指南
#### React 使用方式
```bash | pure
yarn add i-devices
```
```jsx | pure
import React from 'react';
import { IDevicesReact } from 'i-devices';
export default function () {
return (
);
}
```
#### Vue 使用方式
```bash | pure
yarn add i-devices
```
```js | pure
import 'i-devices';
```
#### 原生 Js Module
```
// 需安装lit 相关依赖 见 https://lit.dev/playground/
"dependencies": {
"lit": "^2.0.0",
"@lit/reactive-element": "^1.0.0",
"lit-element": "^3.0.0",
"lit-html": "^2.0.0"
}
```
```html | pure
```
## 案例展示
更多使用方式，详见设备详情和使用 API
```tsx
import { IDevicesReact } from 'i-devices';
import React from 'react';
export default function () {
return (
);
}
```
## 丰富的设备样式
纯 CSS 代码实现手机、电脑等各类设备样式效果（Modern devices crafted in pure CSS）
## API
| 参数 | 说明 | 类型 | 默认值 |
| :--------- | :--------------------------- | :------------------------------------------------------------------ | :------------------- |
| modelname | 设备名称 | string (device-iphone-x \| device-iphone-14\| device-macbook\ 等等) | device-iphone-14-pro |
| modelcolor | 外壳颜色（详见详情） | string (device-gold \| device-purple\| device-silver\ 等等) | 默认 |
| scale | 缩放 | string (0 - 1) | 1 |
| modelbar | 展示手机 tabbar 导航栏 | boolean | false |
| bartitle | 导航标题 | string | 标题 |
| usezoom | transform 改用 zoom 进行缩放 | boolean | false |
支持设备内容自定义，slot="slot-screen"
```jsx | pure
```
## 问题反馈
#### 一、套了个“手机”壳影响原拖拽功能？
[根源查看](https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/api/draggable.md#warning-position-fixed)
原因：position: fixed 会受到父级上的 transform 的影响，导致位置不准确。
fixed：开启 usezoom，去除 transform 缩放，改用 zoom 缩放。 或者可以将拖动项移动到 DOM 的另一个位置(document.body)
如果在使用过程中发现任何问题、或者有改善建议，欢迎在 [**GitHub Issues**](https://github.com/)进行反馈
## License
The MIT License.