---
# System prepended metadata

title: TSNA_第一階段 元件 Components

---

# TSNA_第一階段 元件 Components
### 導覽列 - Navbar
![](https://i.imgur.com/2M0BnsY.png)

---

### 下拉式選單(導覽列) - Dropdowns
![](https://i.imgur.com/SHTQ0ou.png)

---

### 次分類下拉式選單 - SubDropdowns
![](https://i.imgur.com/0Rfakay.png)

---

### 漢堡包 - Hamburger
![](https://i.imgur.com/YRDQbsf.png)

---

### 搜尋欄 - Search
![](https://i.imgur.com/TjIOCyg.png)

---

### 隊伍Logo - TeamLogo
![](https://i.imgur.com/CqtG4NM.png)

---

### 比分項目 - ScoreItem
![](https://i.imgur.com/ETtfpUD.png)

---

### 影片直播 - VideoLive
![](https://i.imgur.com/Ive473o.png)

---

### 關注話題 - Topic
![](https://i.imgur.com/R9iR8Mm.png)

---

### 影片項目 - VideoItem
![](https://i.imgur.com/Xq5hyN9.png)

---

### 專題故事專欄 - SpecialColumn
![](https://i.imgur.com/PFkq0ep.png)

---

### 專題故事輪播 - SpecialSwiper
![](https://i.imgur.com/0UUo6aU.png)

---

### 圖鑲文1 - PictureText1
![](https://i.imgur.com/Iw2o46R.png)

---

### 圖鑲文2 - PictureText2
![](https://i.imgur.com/l81SH9Y.png)

---

### 日期選擇器 - DatePicker
![](https://i.imgur.com/LXSJgib.png)

---

### 賽事項目 - GameItem
![](https://i.imgur.com/fTRcP96.png)

---

### 熱門新聞 - HotNews
![](https://i.imgur.com/Sjh89xA.png)

---

### 廣告 - AdBanner
![](https://i.imgur.com/ixceR6F.png)
- 需注意各頁面的寬高

---

### 關於我們、贊助商…等 - FooterDoniate
![](https://i.imgur.com/2YQq0TP.png)


---

### Footer
![](https://i.imgur.com/XTFphDX.png)

---
### 標籤 - Tag
![](https://i.imgur.com/FKLbveF.png)

---

### 新聞項目 - NewsItem
![](https://i.imgur.com/8WlqGZH.png)

---

### 關注、熱門、TSNA TV項目 - AsideItem
![](https://i.imgur.com/fwaPTmM.png)
![](https://i.imgur.com/KwTurg7.png)
![](https://i.imgur.com/aanoTGf.png)

---

### 排行榜 - RankItem
![](https://i.imgur.com/CfPa2sH.png)

---

### 分頁 - Pagination
![](https://i.imgur.com/QpCeXaC.png)

---

### 社群分享 - Social
![](https://i.imgur.com/JUMvj10.png)

---

### 新聞內文圖片 - NewsImage
![](https://i.imgur.com/YCTbDyi.png)

---

### 返回頂部 - GoTop
![](https://i.imgur.com/zgqmQ75.png)













