功能UI組件的規範
https://standard-components.com
UI組件庫有各種形狀和大小。該規範旨在作為標準化命名慣例和Prop API的一種方式,以創建一個可互換的UI組件的生態系統並鼓勵更大的代碼可重複使用。
為了創建可互換UI組件的庫,應使用以下命名約定。此列表有意受到限制,是作為演示的起點。隨著時間的推移,可能會添加更多組件。
盒子組件是一種原始的盒子模型佈局組件,可處理邊距,填充,寬度和其他佈局樣式。
Flex組件是具有特定於Flexbox特定屬性的框組件的擴展。
文本組件是一種原始的印刷組件,可處理字體尺寸,重量,線路高度,對齊方式和其他印刷樣式。
標題組件是針對標題的文本組件的擴展。
圖像組件是顯示圖像的內容組件。
背景圖是包裝盒組件的擴展,其中包含用於顯示背景圖像的道具。
按鈕組件是一種交互式組件,其樣式看起來像一個按鈕。
鏈接組件是用於導航的交互式組件。
樣式道具是CSS之上的高級抽象,旨在靈活性並幫助解決均類樣式問題。樣式道具主要基於CSS屬性,並帶有用於邊距和填充的速記道具。
一些組件(例如按鈕)使用樣式變體來渲染不同的版本,例如primary secondary按鈕樣式。變體應使用variant支柱,並帶有用於primary和secondary變體的速記布爾式道具。
請參閱道具。
主題是定義樣式道具使用的值的對象。主題可確保一致的邊距,填充,顏色,字體大小和其他UI常數。
查看主題以獲取更多信息。
通過遵守嚴格的組件類型結構,系統中的組件可能與一個奇異的目的有關,並允許在庫之間具有更大的互換性。
佈局組件控制寬度,高度和間距。他們不嘗試控制排版或其他考慮因素。
印刷成分與字體家族,大小,重量,領先,跟踪和其他屬性有關。印刷成分與佈局無關。
內容組件顯示諸如圖像,視頻和圖表之類的內容,而不會影響佈局,排版或其他樣式問題。
交互式元素(例如鍊接,按鈕和表單元素)需要用戶輸入,並且通常不處理佈局或印刷問題。
樣式組件處理其他UI樣式,例如邊界,半徑,陰影和漸變,而不會影響佈局或版式。
位置組件將其孩子從正常文檔流中刪除,應謹慎使用。
由Compositor製作| github |麻省理工學院許可證