iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

從 React 開始,讓你的ui material 起來系列 第 5

[Day 5] 排版布局Stack

  • 分享至 

  • xImage
  •  

Stack 組件用於沿垂直或水平軸的佈局

也是RWD應用的選項之一

複雜度跟所選參數都可以輕易使用

在material-ui 直翻大概是棧板的意思

排版布局面 就是由 貨櫃>欄格>棧板 很符合貨運的規格

希望不要像長榮一樣 塞車就好

照慣例從
Day4
Fork 一份 作為Day 5

獻上程式碼

<Stack
justifyContent="center"
alignItems="center"
 direction={{ xs: 'column', sm: 'row' }}
spacing={{ xs: 1, sm: 2, md: 4 }}
> 
<Item>Item 1</Item>
<Item>Item 2</Item>
<Item>Item 3</Item>
</Stack>

其中 這邊需要一點flex的觀念

可以在justifyContent(橫軸) 選擇置中 置左 置右
alignItems(垂直)選擇置中 置頂 置底
特別的是 可以用物件的方式
選擇每個寬度要呈現的方式
direction={{ xs: 'column', sm: 'row' }}
在XS寬度 是直向排列 sm寬度則是 橫向排列

Day 5


上一篇
[Day 4] 排版布局Grid
下一篇
[Day 6] Button
系列文
從 React 開始,讓你的ui material 起來15
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言