Buat bar navigasi yang serupa dengan halaman utama toast ui

Question

Sumber inspirasi saya

Saya ingin membuat bar navigasi seperti ini:

Toast ui laman utama

Apa yang saya buat

Saya cuba meniru sebanyak mungkin untuk mencapai ini.

Saya mendapat mesej berikut:

Apa yang saya mahu

Saya mahukan sesuatu seperti ini (ini dibuat dengan penyuntingan imej):

选项1：居中对齐

选项2：左对齐

Saya mahu kedudukan senarai pautan menjadi dinamik, bergantung pada kedudukan kumpulan pautan yang mengandunginya. Apa yang saya lakukan ialah menyelaraskannya ke kiri.

Iaitu, saya mahu senarai pautan berada terus di bawah kumpulan pautan yang mengandunginya untuk UI yang lebih baik.

Bolehkah anda memberitahu saya bagaimana untuk mendapatkan ini dengan mengedit kod dan kotak saya?

Answer 1

Tetapkan koordinat x bagi link-list 的 paddingLeft link-group

1. Gunakan GetElementById

export const useGetElementById = (id) => {
  const [element, setElement] = useState(null);

  useEffect(() => {
    setElement(document.getElementById(id));
  }, [id]);

  return element;
};

2. Pisahkan link-list menjadi komponen dan terima linkGroupId sebagai prop. Dan tetapkan koordinat x bagi link-list 的 paddingLeft link-group

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}
          
        
      ))}
    
  );
};

3. Set link-groupId

  ...

  {pagesKeys.map((key) => {
    const pages = PAGES.get(key) || [];
      return (
        

          {key}
          

            
          
         
       );
     })}

    ...

Kemudian saya dapat option2.

Jika "LinkList" melimpah, sebaiknya jangan bungkus sehingga "LinkList" mengisi ".link-list-box", dan padding kiri berkurangan secara semula jadi. Tetapi saya tidak tahu bagaimana untuk melakukannya.