如何使用 Augment UI
安裝 Augment UI: 通過 npm 安裝:運行 'npm install augmented-ui',並在使用它的樣式表之前,將 /node_modules/augmented-ui/augmented-ui.min.css 文件包含在您的項目中
添加 augmented-ui 屬性: 將 data-augmented-ui 屬性添加到您要樣式的任何 HTML 元素中: <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'
測試兼容性: 確保瀏覽器兼容性 - 使用 border-radius 為舊瀏覽器提供回退支持,全球約 91% 的用戶可獲得全面支持
響應式定制: 使用 CSS 媒體查詢和動態類調整增強,使 UI 在不同屏幕尺寸上響應式
Augment UI 常見問題
Augment UI 是一個用於創建和分享 UI 設計的平台,允許用戶使用 AI 技術快速原型化前端設計。用戶可以描述他們想要的內容,系統將生成相應的代碼。
查看更多