Card

tags: Component

一 . 基本版型

(一) . 成果圖

1. 效果

2. 實作概論 : 內外元件的包裹

  • 先看 : 概念篇的內外元件包裹。
  • 這個是一個彈性十足的版,其實沒有固定的做法,因為每次對卡片的要求都不一樣,主要是掌握以下的設計重點。
  • Point 1
    : 幾個卡片為一橫行。
    • 卡片的使用多為多個一起使用。所以,卡片群外,應該要加上包裹器,設定卡片群的排版。
    • 可以用外容器的flex和內元件的width實作。
    • 或是直接grid設定。
  • Point 2
    : card的圖片是否滿版。
    • 若圖片需要滿版,就要將內元件(圖片和內容)的間格留給內元件的屬性決定。
  • Point 3
    : card的內容是否滿版。
    • 若圖片需要滿版下,內容也必須跟隨圖片滿版,且這時候內容通常需要一點間距,就要用內容的屬性設定。

3. 實作內容 :

  • 卡片為3個一橫行的。
  • 卡片需要一點邊框。
  • 圖片需要滿版。
  • 文字需要分成標題和內文
    • 文字需要和卡片有一點間格。
    • 標題和內文之間有一個bar隔開。

(二) . 實作方法

  • step 1
    : 完成『卡片為3個一橫行』的要求。
    • 此時wrap為外容器,card為內元件。
    • 實作 : 用flex 在外容器的方式,完成可以橫向排列,可以換行。
    • 實作 : 用內元件的width屬性完成3個一列的要求。
  • step 2
    : 完成『卡片需要一點邊框』的要求。
    • 加入border在卡片即可。
.card-wrap{ display: flex; flex-wrap: wrap; width: 100%; padding: 1%; } .card{ margin:1.25%; width: 30%; border: 1px solid #ccc; }
  • step 3
    : 完成『圖片需要滿版』的要求。
    • 此時card為外容器,card-img為內元件。
    • 實作 : 內元件需要滿版,此時的外元件不可以有padding,內元件的width設為滿的。
.card{ margin:1.25%; width: 30%; padding: 0; border: 1px solid #ccc; } .card-img{ vertical-align: middle; width: 100%; }
  • step 4
    : 完成『文字需要分成標題和內文』的要求。
    • 第一層 : card為外容器,card-imgcard-content為內元件。
    • 第二層 : card-content為外容器,card-headercard-body為內元件。
    • 實作 : 對第一層,因為card-img已經滿版,所以card-content 跟隨滿版。
    • 實作 : 再將card-content分成兩個class。
.card{ margin:1.25%; width: 30%; padding: 0; border: 1px solid #ccc; } .card-img{ vertical-align: middle; width: 100%; } .card-content{ width: 100%; } .card-header{ width: 100%; text-align: center; } .card-body{ width: 100%; text-align: center; }
  • step 5
    : 完成『文字需要和卡片有一點間格』的要求。
    • 此時card-content為外容器,card-headercard-body為內元件。
    • 實作 : 要讓內外元件有間格,需要決定是用外容器的padding或內元件的maring或padding。
    • 實作 : 這邊先用外容器的padding,原因是可以讓後面的bar不要滿版,下一步就知道了。
    • 到這裡其實就可以使用了,有了基本的卡片形式。
.card-content{ width: 100%; padding:5%; }
  • step 6
    : 完成『標題和內文之間有一個bar隔開』的要求。
    • 實作 : 在card-header設定border-bottom即可。
    • 注意 : 這裡是為什麼前面需要用card-content設定padding製造出card-header的間隔。
    • 注意 : 因為用card-header製造間隔,會讓這邊個border-bottom填滿card-content的寬度,不好看。
    • 到這已經可以使用了。https://codepen.io/rfbadgnh/pen/mdrOZgr
.card-wrap{ display: flex; flex-wrap: wrap; width: 100%; padding: 1%; } .card{ margin:1.25%; width: 30%; padding: 0; border: 1px solid #ccc; } .card-img{ vertical-align: middle; width: 100%; } .card-content{ width: 100%; padding:5%; } .card-header{ width: 100%; text-align: center; padding-bottom: 2%; border-bottom: 1px solid gray; margin-bottom: 3%; } .card-body{ width: 100%; text-align: center; }