Re從零開始的UI庫編寫生活之按鈕

構想

按鈕組件是UI庫中最基礎的組件之一，因此這個組件應該儘量靈活地提供可配置項，那咱們怎樣才能輕鬆便捷地去配置按鈕呢？有兩種方法，一種是經過js去獲取按鈕的屬性，從而爲不一樣類型的按鈕加上相應的樣式，第二種則是經過css的選擇器去匹配所配置的樣式，從而利用樣式去控制按鈕的表達，很明顯第二種方案能將按鈕組件從js中剝離解耦，更加能達到理想中的效果。css

使用純css去控制按鈕基本上就能夠知足業務的開發，不要擔憂這個問題，除非是一些很是定製化的需求。html

按鈕的設計

基礎結構

首先，根據想要達到的效果，能夠這樣去寫一個按鈕vue

//btn.html
<button className="btn-normal">SluckyUI</button>
複製代碼

//btn.css
.btn-normal{
    display: inline-block;
    border-radius: 3px;
    text-align: center;
    cursor: pointer;
    outline: none !important;
    position: relative;
    overflow: hidden;
    border: none;
}
複製代碼

很簡單，一個按鈕就這樣成型了。react

但新的問題又出現了，在日常的業務開發中，這樣一個簡單的按鈕是不足以支撐開發的，由於一個功能完備的按鈕一般會有一些額外的屬性和狀態，好比等待狀態，好比禁止點擊狀態。然而css僞類是沒法去‘監聽’這些狀態的生命週期的，那應該怎麼辦呢？webpack

答案就是經過屬性去控制按鈕的狀態（相似於暴露一個接口，只不過這個接口是由css去實現的）

//btn.css
[loading='true']{
    width: 25px;
    height: 25px;
    animation: loadingTypeA infinite .75s linear;
    border: 2px solid #888;
    border-top-color: transparent;
    border-radius: 100%;
}

[disabled='true']{
    ...
}

@keyframes loadingTypeA {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

//btn.html
<button className="btn-normal" loading='true'>SluckyUI</button>
複製代碼

這樣咱們就能夠經過loading屬性的值去控制按鈕的樣式（狀態），不管在react仍是vue，angular中，咱們都能很輕鬆地去控制。固然到這個步驟就並不是純css了，咱們須要在業務邏輯中去控制這個組件，畢竟這些組件的生命週期狀態是沒法單靠css去走完一個完整的流程的。web

Note:雖然能夠經過樣式去靈活配置所需的效果，但仍是建議在同一套UI中統一制定出s,m,l三種size，這樣更能在團隊中配合使用。sql

動畫特效

動畫特效是組件必不可少的交互之一，能給與用戶良好的交互體驗。而幾乎全部的效果均可以封裝成css類。後端

//animate.scss
//下劃線動畫，由於已經與具體的組件徹底解耦，這些動畫能夠用在任何組件中，後面會有專門的章節聊一聊神奇的動畫
.regularLineMove {
    &::before {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        width: 0;
        height: 1px;
        background-color: #000;
        transition: .2s all;
    }
    &:hover::before {
        left: 0;
        width: 100%;
    }
}

//btn.html
<button className="btn-normal regularLineMove">SluckyUI</button>
複製代碼

按鈕加上regularLineMove動畫類以後，當鼠標懸浮上去，就會有下劃線效果出現了。bash

但爲何說是幾乎全部效果呢？由於僅靠css沒法對display設置爲none前做出有效的響應，好比淡出效果。細節會在彈窗篇裏講到。markdown

進一步完善咱們的按鈕

一個完善的按鈕組件應該能應對大部分狀況，減輕咱們的開發量。好比當按鈕處於disabled狀態時，鼠標應該要顯示一個禁止的標誌，而且按鈕顏色也應該要作出相應的改變等等。下面咱們將大部分可能遇到的狀況封裝一下。

// btn.scss
.btn-status {
    //鼠標普通懸浮
    cursor: pointer;
    //禁止狀態
    &:disabled {
        cursor: not-allowed;
        background-color: $disable !important;
    }
    //點擊後的狀態
    &:active {
        opacity: .8;
    }
    //將不美觀的樣式去除
    outline: none !important;
    &:focus {
        outline: none !important;
    }
    ...
}
複製代碼

Bingo，就這樣button組件就基本設計好了，其實並不複雜，就是要考慮的狀況比較多。

結尾

這些組件的想法已經實踐到了 SluckyUI 當中，更多有趣的按鈕效果能在 SluckyUI 首頁的按鈕標籤中能找到，還有不少欠缺的地方，歡迎多多交流。之後會有更多新奇好玩的東西愈來愈多地融入其中。

從零開始系列傳送門

《Re從零開始的UI庫編寫生活之規範制定》
《Re從零開始的UI庫編寫生活之按鈕》
《Re從零開始的UI庫編寫生活之表單》
《Re從零開始的UI庫編寫生活之表格》
《Re從零開始的UI庫編寫生活之加載進度條》
《Re從零開始的UI庫編寫生活之分頁》
《Re從零開始的UI庫編寫生活之菜單導航欄》
《Re從零開始的UI庫編寫生活之消息彈窗》
《Re從零開始的UI庫編寫生活之步驟管理器》
《Re從零開始的UI庫編寫生活之麪包屑》
《Re從零開始的webpack4實用向全實踐》
《Re從零開始的高效React+Redux項目架構搭建》
Re從零開始的後端學習之配置Ubuntu+Ngnix+Nodejs+Mysql環境