## Components

### Atom (原子元件)

以下元件設計稿名稱：`Atom/分類/分類` ，程式名稱：`AtomCategoryCategory`，並統一小駝峰命名。

### Buttons

`Atom/Buttons/`

- Button（一個主要元件，已經封裝UI Kit模板大部分情況）
- Line（←這是舉例，可能另外增加的按鈕元件，在這個資料夾下繼續新增）
- Transparent
- Icon (單獨 icon 正方形按鈕)
- Link

某個元件的樣式用變數替代

### Forms

`Atom/Forms`

- Radio（可能是打勾icon不同） PageTitle/Default//
- CheckBox （可能是打勾icon不同）
- L[abel](https://www.figma.com/file/zTwkVr2RRgWBPbyjiTtaYm/UI-KIT_Templete(%E6%9C%AA%E5%AE%8C%E6%88%90)?type=design&node-id=232-5603&mode=dev)
- Switch

### label

### Image

*看是否需要事先做可以互動的，或是有 lazyload 小圖的，或是不同尺寸*

- Lazy：
- placeholder(可以塞入自定義圖片連結)
- ParallaxBg：視差背景圖片
- Scale：
-

### Video

這個封裝mp4或是youtube 傳入以下參數

- video-id
- src
- placeholder
- mute
- autoplay

### Control

- Dots

### Divider

---

### Common (中型組件)

以下元件設計稿名稱：`Common/分類/分類` ，程式名稱：`CommonCategoryCategory`，並統一小駝峰命名。

### Forms

- Group：label + 輸入框 或 選擇器(用 slot 傳)
- Input
- Number
- Index：輸入的
- Btns：有上下可以控制
- TextArea
- File
- Radio
- Index：單一
- Group：多個
- CheckBox
- Index：單一
- Group：多個
- Select（有選擇「選項」的功能，跟Dropdown不同）
- multiple
- Rate：星等
- Range

### Card

- Basic
- Row

### Control

- SearchBar
- Index
- Icon
- Accordion 手風琴選單
*props 可以傳是否會展開一個就關閉其他的*
- LightBox
- DropDown (組合按鈕的下拉選單)
- LoadMore
- Pagination

### Modal

- Note
- Scroll
-

### Nav

- Bar (NavBar) 導覽列，跳頁
- Tab 多個切換，切換內容
- Breadcrumb

### Article

- All
- Title
- 左圖右文
- 大圖文字....等

### Slider

### Video

- Pop Up

---

### Layout(大型組件)

以下元件設計稿名稱：`Layout/分類/分類` ，程式名稱：`LayoutCategoryCategory`，並統一小駝峰命名。