Atomic Design 五大階段：原子 ( Atom ) -> 分子 ( Molecules ) -> 組織 ( Organisms ) -> 模板 ( Templates ) -> 頁面 ( Pages )

本篇重點【常用元件】

• 輸入格 ( Input ) 功能
• 輸入格常見種類
• 輸入格基本元素
• 輸入格狀態

輸入格 ( Input ) 功能

輸入格 ( Input ) 可以讓使用者輸入內容，常見情境有報名表單、品項搜尋或貼文留言等。

輸入格常見種類

• 填滿 ( Filled Text Input )
• 外框 ( Outlined Text Input )
• 底線 ( Underlined Text Input )

輸入格基本元素

• 容器 ( Container )
• 輸入文字 ( Input text )
• 標籤文字 ( Label text )
• 提示文字 ( Placeholder )
• 提示圖標 ( Leading Icon )：依情況選擇，再次提示使用者需要輸入的內容類型
• 附屬圖標 ( Trailing Icon )：依情況選擇，輸入文字後出現，有相對應的功能獲表示輸入格的狀態，如：清除密碼、
• 說明文字 ( Helper text )：常見於表單，如：帳號需中、英文

輸入格狀態

• 可用 ( Enable )
• 停用 ( Disable )：無法輸入內容
• 聚焦 ( Focused )：可以提示使用者正在輸入的內容是哪一格
• 啟用 ( Activated )：輸入完畢的情況

好! 下一篇會繼續介紹原子階段的常用元件哦 : ) ( 抱歉，感冒了...只能更新一些些 )