Erstellen Sie eine Navigationsleiste ähnlich der Toast-UI-Startseite

Question

Meine Inspirationsquelle

Ich möchte eine Navigationsleiste wie diese erstellen:

Toast-UI-Homepage

Was habe ich getan

Ich versuche, so viel wie möglich zu reproduzieren, um dies zu erreichen.

Ich erhalte folgende Meldung:

Was will ich

Ich möchte so etwas (diese wurden mit Bildbearbeitung erstellt):

选项1：居中对齐

选项2：左对齐

Ich möchte, dass die Position der verknüpften Liste dynamisch ist, abhängig von der Position der Linkgruppe, die sie enthält. Ich habe es nur nach links ausgerichtet.

Das heißt, ich möchte, dass sich die Linkliste für eine bessere Benutzeroberfläche direkt unter der Linkgruppe befindet, die sie enthält.

Können Sie mir sagen, wie ich das bekomme, indem ich meinen Code und meine Box bearbeite?

Answer 1

设置 link-list 的 paddingLeft link-group 的 x 坐标

1. 使用GetElementById

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

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

  return element;
};

2. 将 link-list 分离到组件中并接收 linkGroupId 作为 props。 并设置 link-list 的 paddingLeft link-group 的 x 坐标

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. 设置link-group的Id

  ...

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

          {key}
          

            
          
         
       );
     })}

    ...

然后我就能够获取 option2。

如果“LinkList”溢出，最好不要换行，直到“LinkList”填充“.link-list-box”，左侧填充自然减少。但我不知道该怎么做。