亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

使用React實(shí)現(xiàn)固定導(dǎo)覽列和可折疊固定側(cè)邊欄的頁(yè)面
P粉356361722
P粉356361722 2023-08-29 08:43:17
0
1
863
<p>我正在嘗試使用 <strong>React</strong> 和 <strong>chakra-ui</strong> 元件實(shí)現(xiàn)具有固定導(dǎo)覽列和可折疊固定側(cè)邊欄的頁(yè)面。下面是範(fàn)例程式碼。 </p> <pre class="brush:php;toolbar:false;">import { Box } 從 "@chakra-ui/react"; export const App = () => { return ( <Box display="flex"> <Box position="fixed" width="200px" height="100%" bg="red" /> {/* Sidebar */} <Box flex="1" position="fixed"> <Box position="fixed" top="0" width="100%" height="50px" bg="blue" /> {/* Navbar */} <Box mt="50px" p="4"> {/* Rest content */} </Box> </Box> </Box> ); };</pre> <p>但是現(xiàn)在頂部導(dǎo)覽列的寬度始終沒(méi)有達(dá)到我的預(yù)期。這是它的當(dāng)前輸出。 </p> <p>我想實(shí)現(xiàn)以下輸出。 </p> <p>紅色框是側(cè)邊欄,藍(lán)色框是頂部導(dǎo)覽列。預(yù)計(jì)他們兩人都將固定在目前的位置。請(qǐng)就如何實(shí)現(xiàn)我的期望提供一些建議。我將非常感激! </p>
P粉356361722
P粉356361722

全部回覆(1)
P粉805922437

你可以嘗試:

<Box position="fixed" top="0" right="0" width="calc(100vh - 200px)" height="50px" bg="blue" /> {/* Navbar */}

注意 200px 是側(cè)邊欄寬度

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板