這篇收集了一些常見的組件，每個功能的程式碼並不多，於是決定將這些程式碼集中寫在一起啦～希望這些組件可以被重複利用，並且發揮一定的作用。那麼，現在就來馬上來看看有什麼樣的功能吧！
靜態這部分比較偏向樣式設計的組件。
組件實作 : Demo
社交媒體按鈕例如：Facebook、Twitter、Google 這類的品牌按鈕，實作方法可以直接從 Font Awesome 找 icon 來使用。實作參考這裡【1】
居然沒有 Instagram 的 icon。可能要用圖片來代替了．．．
CDN：Font Awesome 4.7
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
使用上可以直接套用fa-品牌名稱的寫法，品牌名稱如下。
以 Facebook 為例，在 HTML 加入 a 元素即可，固定使用的格式如下。
HTML：
<a href="#" class="fa fa-facebook"></a>
再來是設定 icon 大小，並且把 icon 放在圖片的正中央。
CSS：
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
text-decoration: none;可以消除 a 標籤預設的底線樣式。
若是想要把按鈕改成圓形，加上border-radius: 50%;即可。
CSS：
.fa {
padding: 20px;
font-size: 30px;
width: 20px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
緊接著加入 Facebook icon 的 CSS 樣式，像是定義背景顏色、圖片本身的顏色等等，因為 Font Awesome 的 icon 是文字，所以使用 color 來設定。
CSS：
.fa-facebook {
background: #3B5998;
color: white;
}
最後加上滑鼠的 hover 效果，寫在fa上，即可全部套用效果。
CSS：
.fa:hover {
opacity: 0.7;
}
如果你想將這些 Button 合併成一條 Bar，並且固定在網頁上的任何位置，寫法可以使用 Position 設定成 Fixed，寫法可以參考 Sticky Social Bar 【2】。不過話又說回來，站在一個使用者的角度，我個人並不是很推薦這種寫法，因為這種 Bar 會擋住頁面上的文字，造成閱讀上的困難。
顯示結果：（完整版）
組件實作 : Demo
Arrows 的寫法比想像中的還簡單一點，它是利用正方形的兩個邊來決定箭頭的方向，方向的角度則是使用transform的rotate來完成，作法可以參考下列程式碼。
HTML：
<p>Right arrow: <i class="arrow right"></i></p>
<p>Left arrow: <i class="arrow left"></i></p>
<p>Up arrow: <i class="arrow up"></i></p>
<p>Down arrow: <i class="arrow down"></i></p>
繪出箭頭。
CSS：
.arrow {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
箭頭方向轉換。
CSS：
.right {
transform: rotate(-45deg);
}
.left {
transform: rotate(135deg);
}
.up {
transform: rotate(-135deg);
}
.down {
transform: rotate(45deg);
}
顯示結果：（完整版）
組件實作 : Demo
有實際功能的組件實作（有用到 JavaScript）。參考來源在這裡【3】。
HTML：
<input type="text" placeholder="input your text" id="copyInput">
<div class="tooltip">
<button id="copyText">
<span class="tooltiptext" id="copyText">Copy to clipboard</span>
Copy text
</button>
</div>
CSS：（起手式）
* {
margin: 0;
padding: 0;
list-style: none;
}
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #4c6cb9;
}
CSS：（定義提示文字工具的樣式）
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 140px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -75px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
JavaScript：
let btn = document.getElementById("copyText");
btn.addEventListener("click", foo, false);
function foo() {
var copyText = document.getElementById("copyInput");
copyText.select();
copyText.setSelectionRange(0, 99999);
navigator.clipboard.writeText(copyText.value);
}
顯示結果：
本篇的最主要目標為：「收集程式碼較少的組件」，文章分為 2 個部分，一個是只有樣式的組件，另一個則是加了 JavaScript 的那種組件。直到這篇為止，組件的實作也都做的差不多了，稍微預告一下，在之後的章節會介紹排版，以及選擇器的用法，之後這篇會在不斷新增，沒意外的話會寫在我的部落格裡面，那麼今天的內容就到這邊結束，我們明天再見！
iThome鐵人賽
看影片追技術