我想製作這樣的導(dǎo)覽列:
Toast ui首頁
我嘗試盡可能複製來實(shí)現(xiàn)這一目標(biāo)。
我得到以下資訊:
我想要像這樣的(這些是透過圖像編輯製作的):
#選項(xiàng)1:居中對(duì)齊
選項(xiàng)2:左對(duì)齊
我希望連結(jié)列表的位置是動(dòng)態(tài)的,具體取決於包含它的連結(jié)組的位置。 我所做的只是將其左對(duì)齊。
也就是說,我希望連結(jié)列表直接位於包含它的連結(jié)群組下方,以便獲得更好的 UI。
你能告訴我如何透過編輯我的程式碼和框來獲得這個(gè)嗎?
設(shè)定 link-list
的 paddingLeft link-group
的 x 座標(biāo)
export const useGetElementById = (id) => { const [element, setElement] = useState(null); useEffect(() => { setElement(document.getElementById(id)); }, [id]); return element; };
link-list
分離到元件中並接收 linkGroupId 作為 props。
並設(shè)定 link-list
的 paddingLeft link-group
的 x 座標(biāo)interface Props { linkGroupId: string; pages: AppPage[]; } export const LinkList = ({ linkGroupId, pages }: Props) => { const [linkGroupX, setLinkGroupX] = useState(0); const linkGroupEl = useGetElementById(linkGroupId); useEffect(() => { if (!linkGroupEl) return; const linkGroupRect = linkGroupEl.getBoundingClientRect(); setLinkGroupX(linkGroupRect.left); }, [linkGroupEl]); return ( {pages.map((page) => (
); };- {page.title}
))}
link-group
的Id... {pagesKeys.map((key) => { const pages = PAGES.get(key) || []; return (
然後我就能夠取得 option2
。
如果“LinkList”溢出,最好不要換行,直到“LinkList”填滿“.link-list-box”,左側(cè)填滿會(huì)自然減少。但我不知道該怎麼做。