如何使用 Augment UI
安装 Augment UI: 通过 npm 安装:运行 'npm install augmented-ui' 并在使用它的任何样式表之前将 /node_modules/augmented-ui/augmented-ui.min.css 文件包含在项目中
添加 augmented-ui 属性: 在任何要样式化的 HTML 元素中添加 data-augmented-ui 属性: <div data-augmented-ui></div>
配置 CSS 变量: 使用前缀为 --aug- 的 CSS 变量来自定义外观,如 --aug-border-all, --aug-inlay-all 等。这允许你以超过 250,000 种独特的方式塑造元素
设置边框和背景: 使用 --aug-border-bg 和 --aug-inlay-bg 属性应用 CSS 背景和边框,以创建遵循增强形状的自定义视觉效果
添加特定增强功能: 通过将它们添加到 data-augmented-ui 属性中来装备特定增强功能,如:data-augmented-ui='tl-clip br-clip border'
测试兼容性: 确保浏览器兼容性 - 全球约 91% 的用户支持,使用 border-radius 为旧浏览器提供回退
响应式自定义: 使用 CSS 媒体查询和动态类调整增强功能,使 UI 在不同屏幕尺寸上响应式
Augment UI 常见问题
Augment UI 是一个用于创建和分享 UI 设计的平台,允许用户使用 AI 技术快速原型化前端设计。用户可以描述他们想要的内容,系统将生成相应的代码。
查看更多