一多分欄控件

介紹

本示例分別展示了多場景下，一多分欄控件的響應(yīng)式變化效果。

本示例分別用到了[SideBarContainer]組件與[Navigation]組件，對應(yīng)使用場景如下：

• A+B+C：即SideBarContainer組件組合Navigation組件
• A+C：SideBarContainer組件
• B+C：Navigation組件

效果預(yù)覽

本示例在預(yù)覽器中的效果：

A+B+C :

A+C :

B+C :

使用說明：

1.在預(yù)覽器中查看頁面效果

2.在預(yù)覽器中開啟窗口拖拽模式，拖動窗口變化，可以查看組件的響應(yīng)式變化，如下圖所示：

工程目錄

`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

MultiNavBar/entry/src/main/ets/
|---model
|   |---dataType.ets                       // 側(cè)邊欄菜單數(shù)據(jù)類型
|---Application                                  
|   |---MailBox.ets                        // 郵箱
|   |---PhotoAlbum.ets                     // 圖庫
|   |---Settings.ets                       // 設(shè)置
|---pages                                  
|   |---Index.ets                          // 首頁
|---common                                    
|   |---BreakpointSystem.ets               // 媒體查詢
|   |---MailContent.ets                    // 郵箱詳情
|   |---MailNavigation.ets                 // 郵箱導(dǎo)航
|   |---MailSideBar.ets                    // 郵箱側(cè)邊欄
|   |---PhotoContent.ets            	   // 圖庫詳情
|   |---PhotoSideBar.ets             	   // 圖庫側(cè)邊欄     
|   |---SettingItem.ets             	   // setting設(shè)置項(xiàng)  
|   |---WlanItem.ets             	       // Wlan詳情頁

具體實(shí)現(xiàn)

• [SideBarContainer]組件，自動隱藏側(cè)邊欄的功能是由minContentWidth與minSideBarWidth屬性實(shí)現(xiàn)的。當(dāng)設(shè)置[SideBarContainer]組件組件的顯示類型為SideBarContainerType.Embed,并且窗口寬度達(dá)到minContentWidth + minSideBarWidth的邊界值時(shí)，側(cè)邊欄自動隱藏。
• [Navigation]組件，自動隱藏側(cè)邊欄的功能是由minContentWidth屬性實(shí)現(xiàn)的。當(dāng)[Navigation]的內(nèi)容區(qū)域達(dá)到minContentWidth設(shè)置的值時(shí)，navBar自動隱藏。
• 開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

響應(yīng)式規(guī)則

場景一：A+B+C

1. 預(yù)覽器窗口寬度>840vp時(shí)，顯示A、B、C三列，放大縮小時(shí)，優(yōu)先變化C列
2. 預(yù)覽器窗口寬度<=840vp并且>600vp時(shí)，顯示B、C兩列，放大縮小時(shí)，優(yōu)先變化C列
3. 預(yù)覽器窗口寬度<=600vp并且>360vp時(shí)，僅顯示C列

場景二：A+C

1. 預(yù)覽器窗口寬度>600vp時(shí)，顯示A、C三列，放大縮小時(shí)，優(yōu)先變化C列
2. 預(yù)覽器窗口寬度<=600vp并且>360vp時(shí)，僅顯示C三列

場景三：B+C

1. 預(yù)覽器窗口寬度>600vp時(shí)，顯示B、C三列，放大縮小時(shí)，優(yōu)先變化C列
2. 預(yù)覽器窗口寬度<=600并且>360vp時(shí)，僅顯示C三列

審核編輯 黃宇