创建一个类似于toast ui主页的导航栏-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

创建一个类似于toast ui主页的导航栏

P粉619896145 2024-04-01 18:34:38

[CSS3讨论组]

608

我的灵感来源

我想制作这样的导航栏：

Toast ui主页

我做了什么

我尝试尽可能多地复制来实现这一目标。

我得到以下信息：

我想要什么

我想要像这样的（这些是通过图像编辑制作的）：

选项1：居中对齐

选项2：左对齐

我希望链接列表的位置是动态的，具体取决于包含它的链接组的位置。我所做的只是将其左对齐。

也就是说，我希望链接列表直接位于包含它的链接组下方，以便获得更好的 UI。

你能告诉我如何通过编辑我的代码和框来获得这个吗？

P粉619896145

全部回复(1)

P粉6902008562024-04-02 16:13:07 1楼

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

使用GetElementById

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

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

  return element;
};

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

设置link-group的Id

  ...

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

         
       );
     })}

    ...

然后我就能够获取 option2。

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