Day27，差不多要來收尾啦，元件的介紹也都差不多了，現在就來介紹一些quasar內建的CSS Helper吧～

這邊對後端工程師來說可能比較吃力，畢竟都是頁面排版的東西～

對前端工程師或是設計師來說，就當作是快速的輔助class吧

空間排版 CSS Spacing Classes

CSS Spacing Classes

主要是用來快速對元件/區塊做空間的排版，像是padding,margin等等

基本範例

q-ma-xs

是不是看不太懂，就讓我們來分解

• q 是作為前綴，沒有特別意義

• ma 這邊可以拆成兩個來講

• m 指的是類型 這邊指 margin
• a 指的是方向 這邊指 all

• xs 指的是範圍的大小跟 flex css是用一樣的

語法

所以會拆成

q-[類型][方向]-[大小]

• 類型

  一共有兩種可以選擇，這邊是很基本的CSS

  • m(margin向外擴）

  • p(padding向內擴）

• 方向

  總共有七種可以選，除了基本的 t(top),r(right),l(left),b(bottom),a(all)以外，還有兩個x(left+right) ,y(top+bottom)

• 大小

  有 none,auto (只能用在margin),xs,sm,md,lg,xl 可以用

陰影 CSS Shadows (Elevation

CSS Shadows (Elevation

說到Material怎麼能少了陰影呢

這邊就麻煩參照官方文件，加進class就能套用囉

可視範圍 CSS Visibility

CSS Visibility

主要是拿來設定一些css是否顯示的class，像是解析度大於多少或是小於多少才會顯示的gt及lt，還有依照不同裝置性質而決定要不要顯示的desktop-only,mobile-only等等，由於蠻多的，就給各位自己去翻囉

位置排版 CSS Positioning Classes

CSS Positioning Classes

用來調整視窗顯示的位置，也讓各位自己翻吧

其他

Other CSS Helper Classes

說是其他，有的也蠻常用的

像是

• fit - 將width,height都設成100%
• full-height 將高設為100%
• full-width 將寬設為100%

等等～

先這樣吧！