iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0

接續「切版-以Daily UI 07- Setting為例1/2」的切版說明,這篇持續以切版樣式 SCSS 內容和大家分享。

SCSS 變數設定
此案例同樣也須設定常用色彩的 SCSS 變數,主要共五個色彩,設定如下:

$primary-blue: #1d8ae4;  //主要藍色
$primary-light-blue: #dbe7ea;  //淺藍色
$primary-black: #333333;  //黑色
$primary-grey: #d0d0d0;  //灰色
$primary-light-grey: #f3f7f8;  //淺灰色

標題區塊
此區塊樣式須設定背景色、區塊陰影、上方 30px 距離及圖層設定(使此區塊圖層高於下方列表區塊,才能顯現出此區塊陰影)。

.title-wrap {
    width: 100%; //設定寬度為撐滿裝置寬度
    background: $primary-blue;  // 背景色為主要藍色,使用上方設定好的變數
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.24);  // 區塊陰影
    padding-top: 30px; // 區塊內的間距使用 padding 設定
    position: fixed; // 設定此區塊於任何情況皆固定於上方
    top: 0; 
    left: 0;
    z-index: 1;  // 圖層設定為大於 0 (圖層預設為 0)
}
  • 返回按鈕(class="back-icon"):此區塊須設定按鈕尺寸、位置、移除按鈕預設樣式。

    .back-icon {
      width: 55px; // 按鈕尺寸
      display: inline-block;
      position: absolute;  // 設定為絕對位置,以 .title-wrap 這層為相對參考位置
      left: 0;  // 左側距離為 0
      bottom: 0; // 底冊距離為 0
      background: none;   // 移除按鈕預設樣式-移除背景色
      border: 0;  // 移除按鈕預設樣式-移除邊框
      outline: none;  // 移除按鈕預設樣式-移除點擊時藍色選取框
      padding: 0;  // 移除按鈕預設樣式-移除四邊多餘距離
      img {
          width: 100%;  // 設定返回按鈕圖片寬度為撐滿上層寬度
      }
    }
    
  • 標題文字(class="title"):此區塊須設定文字色彩、文字大小、距離左側距離、文字行高

    .title {
      color: white;  // 文字色彩
      font-size: 24px;  //文字大小
      padding-left: 70px;  //距離左側距離
      margin-bottom: 0;
      line-height: 55px;  //文字行高
    }
    

完成以上樣式設定後,畫面如下:
https://ithelp.ithome.com.tw/upload/images/20180116/20103234Gk4sjtVSYp.png

列表區塊

  • 內容區塊(class="content"):下方剩餘高度可見淺灰色背景,且撐滿整個裝置的高度,需在此區塊做設定:
.content {
    width: 100%;  
    background: $primary-light-grey;  // 背景淺灰色
    height: calc(100vh - 85px);  // 設定高度為裝置尺寸高度扣掉上方標題區塊高度
    position: absolute; //設定此區塊以絕對位置的方式固定
    top: 85px;  // 距離上方的固定位置
    left: 0;  //距離左方的固定位置
}
  • 列表(class="list-item"):這是指每個列表項目的樣式設定,除了色彩、文字大小、間距等設定外,也須記得設定當點擊此項目時的狀態樣式設定,須以 active 做設定。
    .list-item {
          padding: 15px 20px 15px 70px;
          font-size: 18px;
          color: $primary-black;
          background: white;
          border-bottom: 1px solid $primary-grey;
          border-left: 5px solid white;  // 此設定是為了點擊時左側會出現藍色線條,而預先設為白色
          position: relative;
          line-height: 1em;
          // 下方為圖示設定,這邊以偽元素的方式做設定
          &:before {
              content: '';
              width: 14px;
              height: 22px;
              background: url(../img/iconBtlist.png) 0 0/100% no-repeat;
              position: absolute;
              top: 50%;
              left: 20px;
              transform: translateY(-50%);
          }
          // 下方為點擊狀態時樣式設定
          &:active {
              background: $primary-light-blue;  // 背景色為淺藍色
              border-left-color: $primary-blue;  // 左側的藍色線條
          }
      }
    

完成以上樣式設定後,畫面如下:
https://ithelp.ithome.com.tw/upload/images/20180116/201032348RxfJh1Et6.png

如此就完成基本的列表畫面,若想參考範例可至我的 Github下載,謝謝!

Anny


上一篇
切版-以Daily UI 07- Setting為例1/2
下一篇
介面設計流程與開發-結語
系列文
介面設計流程與開發230

尚未有邦友留言

立即登入留言