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

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

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

[CSS3讨论组]

737

我的灵感来源

我想制作这样的导航栏：

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”，左侧填充自然减少。但我不知道该怎么做。