Weber更新日誌

組件概述

合集包含 7 個圖文類組合組件，為圖片與標題、文本、按鈕的組合組件，專用於搭建圖片與文字搭配的內容模塊。分別為圖文基礎、圖文遮罩、圖文列表、圖標基礎組、圖文遮罩組、圖文列表組、圖文錯位組。

適用場景

1、產品 / 服務介紹區塊

2、品牌優勢、特色亮點展示、案例作品集、項目展示卡片

圖文基礎

基礎單組圖文元件，實現「圖片 + 標題 + 描述 + 按鈕」的基礎卡片，適合單組資訊展示。

組件使用

1、圖片可更具需求自定義尺寸、邊框圓角等樣式設置。（注意：在【鏈接塊】有初始默認的【高度240px】，建議在【鏈接塊】層級修改高度）

2、在【Content Wrapper】層級中默認初始含有【標題】+【文本】+【按鈕】組件，可以根據需求刪除新增組件以及修改樣式

3、可在【鏈接塊】層級設置連結綁定，讓圖片成為跳轉觸點

圖文遮罩

單張卡片，圖片做背景，文字、按鈕疊加於圖片上方，可配置半透明遮罩層提升文字閱讀性

組件使用

1、修改背景圖片：在層級列表中將【Content Container】層級的【顯示】關閉，修改完記得開啟

2、選中【Content Container】層級可在Class的【裝飾】➡️【背景顏色】修改遮罩透明度與顏色

3、如果要設置組件的圓角，需要同時調整【圖片】和【Content Container】層級的圓角樣式

4、在【Content Wrapper】層級可在Class【邊距】➡️【內部留白】設置內容的內部空間

5、組件初始默認的標題和文本組件都為居中對齊，可在【文字版式】調整【文字對齊】

圖文列表

左圖右文結構，由左側圖片+右側標題、文本、按鈕構成

組件使用

1、圖片可更具需求自定義尺寸、邊框圓角等樣式設置

2、在【Content Wrapper】層級中默認初始含有【標題】+【文本】+【按鈕】組件，可以根據需求刪除新增組件以及修改樣式

3、可在【鏈接塊】層級設置連結綁定，讓圖片成為跳轉觸點

4、選中【Content Wrapper】層級可在Class的【邊距】➡️【內部留白】修改內邊距

5、選中【Content Wrapper】層級在Class的【常規】➡️【顯示方式】設置為【Flex彈性伸縮】後，可在【彈性佈局】調整標題/文本/按鈕整體與圖片的對齊方式

圖文基礎組

以【網格】組件為底，將【圖文基礎】組件構成快捷組合組件

圖文遮罩組

以【網格】組件為底，將【圖文遮罩】組件構成快捷組合組件

圖文列表組

以【網格】組件為底，將【圖文列表】組件構成快捷組合組件

圖文錯位組

以【網格】組件為底，將【圖文列表】組件分為【左圖右文】和【左文右圖】結構交錯排布構成快捷組合組件，新增圖文組自動識別交替排列