侧边导航(Semi Design)

根据前几次的导航栏设计,从最简单的三行导航栏到后面响应式的导航栏,其实可以在这个的基础上慢慢优化,就可以得到一个日常使用设计的导航栏。设计步骤也和之前的类似。

一、实现步骤

1、先下载安装好npm install @douyinfe/semi-icons

2、引入

3、定义组件

4、解构组件

5、设计JSX的内容

6、导出组件

二、代码展示

import { Layout, Nav, Button, Breadcrumb, Skeleton, Avatar } from '@douyinfe/semi-ui';
import { IconBell, IconHelpCircle, IconBytedanceLogo, IconHome, IconHistogram, IconLive, IconSetting, IconSemiLogo } from '@douyinfe/semi-icons';// 定义 Plush 组件
const Plush = () => {// 解构 Layout 组件中的 Header, Footer, Sider, Content 子组件const { Header, Footer, Sider, Content } = Layout;// 返回 JSX 结构return (// 整个页面布局,设置边框和外边距<Layout style={{ border: '1px solid var(--semi-color-border)', margin: '0 auto 0 70px', width: '1000px' }}>{/* 左边导航栏 */}<Sider style={{ backgroundColor: 'var(--semi-color-bg-1)' }}>{/* 导航栏内容 */}<Nav// 默认选中的导航项defaultSelectedKeys={['Home']}// 设置导航栏样式style={{ maxWidth: 220, height: '100%' }}// 导航项列表items={[{ itemKey: 'Home', text: '首页', icon: <IconHome size="large" /> },{ itemKey: 'Histogram', text: '数据展示', icon: <IconHistogram size="large" /> },{ itemKey: 'Live', text: '功能列表', icon: <IconLive size="large" /> },{ itemKey: 'Setting', text: '设置', icon: <IconSetting size="large" /> },]}// 导航栏头部设计header={{logo: <IconSemiLogo style={{ fontSize: 36 }} />,text: 'Semi Design',}}// 导航栏底部设计footer={{collapseButton: true,}}/></Sider>{/* 右边内容区域 */}<Layout>{/* 右边头部 */}<Header style={{ backgroundColor: 'var(--semi-color-bg-1)' }}><Nav// 设置导航栏模式为水平模式mode="horizontal"// 头部按钮区域footer={<>{/* 使用 Fragment 包裹多个按钮和 Avatar,避免生成额外的 DOM 节点 */}<Buttontheme="borderless"icon={<IconBell size="large" />}style={{color: 'var(--semi-color-text-2)',marginRight: '12px',}}/><Buttontheme="borderless"icon={<IconHelpCircle size="large" />}style={{color: 'var(--semi-color-text-2)',marginRight: '12px',}}/><Avatar color="pink" size="small">Ly</Avatar></>}></Nav></Header>{/* 右边内容区域 */}<Contentstyle={{padding: '44px',backgroundColor: 'var(--semi-color-bg-0)',}}>{/* 面包屑导航 */}<Breadcrumbstyle={{marginBottom: '24px',}}routes={['首页', '上一页', '下一页', '详情页']}/>{/* 内容区域,包含一个骨架屏 */}<divstyle={{borderRadius: '10px',border: '1px solid var(--semi-color-border)',height: '376px',padding: '32px',}}><Skeleton placeholder={<Skeleton.Paragraph rows={2} />} loading={true}><p>Hi, Bytedance dance dance.</p><p>Hi, Bytedance dance dance.</p></Skeleton></div></Content>{/* 右边底部 */}<Footerstyle={{display: 'flex',justifyContent: 'space-between',padding: '20px',color: 'var(--semi-color-text-2)',backgroundColor: 'rgba(var(--semi-grey-0), 1)',}}>{/* 左侧底部内容 */}<spanstyle={{display: 'flex',alignItems: 'center',}}><IconBytedanceLogo size="large" style={{ marginRight: '10px' }} /><span>欢迎使用本系统</span></span>{/* 右侧底部内容 */}<span><span>平台客服</span></span></Footer></Layout></Layout>);
};// 导出 Plush 组件
export default Plush;

三、效果展示

 四、设计优点

基于 @douyinfe/semi-ui 和 @douyinfe/semi-icons,展现了模块化、用户体验友好和代码可维护性强的特点。通过解构 Layout,你将布局拆分为 HeaderSiderContent 和 Footer,职责明确,便于扩展和维护。左侧 Sider 提供清晰的导航菜单,结合图标和文字提升可读性;Breadcrumb 组件帮助用户定位,Skeleton 优化加载体验,避免页面空白。样式上,使用 var(--semi-color-border) 等设计系统变量,确保视觉一致性。Nav 组件的 items 和 footer 属性支持动态配置,灵活性高。代码结构清晰,语义化命名和注释增强了可读性。整体设计符合现代前端开发实践,支持按需加载和组件化开发,同时具备扩展性,便于后续添加功能或适配多端。细节上,Header 中的 Button 和 Avatar 增强了交互体验,Footer 展示了平台信息,提升了专业性。若进一步优化响应式设计、动态路由和主题切换,将更加完善。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/7373.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【中间件快速入门】什么是Redis

现在后端开发会用到各种中间件&#xff0c;一不留神项目可能在哪天就要用到一个我们之前可能听过但是从来没接触过的中间件&#xff0c;这个时候对于开发人员来说&#xff0c;如果你不知道这个中间件的设计逻辑和使用方法&#xff0c;那在后面的开发和维护工作中可能就会比较吃…

将 OneLake 数据索引到 Elasticsearch - 第二部分

作者&#xff1a;来自 Elastic Gustavo Llermaly 及 Jeffrey Rengifo 本文分为两部分&#xff0c;第二部分介绍如何使用自定义连接器将 OneLake 数据索引并搜索到 Elastic 中。 在本文中&#xff0c;我们将利用第 1 部分中学到的知识来创建 OneLake 自定义 Elasticsearch 连接器…

“AI教学实训系统:打造未来教育的超级引擎

嘿&#xff0c;各位教育界的伙伴们&#xff0c;今天我要跟你们聊聊一个绝对能让你们眼前一亮的教学神器——AI教学实训系统。作为资深产品经理&#xff0c;我可是亲眼见证了这款系统如何颠覆传统教学&#xff0c;成为未来教育的超级引擎。 一、什么是AI教学实训系统&#xff1f…

Linux下php8安装phpredis扩展的方法

Linux下php8安装phpredis扩展的方法 下载redis扩展执行安装编辑php.ini文件重启php-fpmphpinfo 查看 下载redis扩展 前提是已经安装好redis服务了 php-redis下载地址 https://github.com/phpredis/phpredis 执行命令 git clone https://github.com/phpredis/phpredis.git执行…

基于SMPL的三维人体重建-深度学习经典方法之VIBE

本文以开源项目VIBE[1-2]为例&#xff0c;介绍下采用深度学习和SMPL模板的从图片进行三维人体重建算法的整体流程。如有错误&#xff0c;欢迎评论指正。 一.算法流程 包含生成器模块和判别器模块&#xff0c;核心贡献就在于引入了GRU模块&#xff0c;使得当前帧包含了先前帧的先…

2.1.3 第一个工程,点灯!

新建工程 点击菜单栏左上角&#xff0c;新建工程或者选择“文件”-“新建工程”&#xff0c;选择工程类型“标准工程”选择设备类型和编程语言&#xff0c;并指定工程文件名及保存路径&#xff0c;如下图所示&#xff1a; 选择工程类型为“标准工程” 选择主模块机型&#x…

CVE-2025-0411 7-zip 漏洞复现

文章目录 免责申明漏洞描述影响版本漏洞poc漏洞复现修复建议 免责申明 本文章仅供学习与交流&#xff0c;请勿用于非法用途&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任 漏洞描述 此漏洞 &#xff08;CVSS SCORE 7.0&#xff09; 允许远程攻击者绕…

mysql 学习6 DML语句,对数据库中的表进行 增 删 改 操作

添加数据 我们对 testdatabase 数据中 的 qqemp 这张表进行 增加数据&#xff0c;在这张表 下 打开 命令行 query console 在 软件中就是打开命令行的意思 可以先执行 desc qqemp; 查看一下当前表的结构。 插入一条数据 到qqemp 表&#xff0c;插入时要每个字段都有值 insert…

[特殊字符]【计算机视觉】r=2 采样滤波器全解析 ✨

Hey小伙伴们&#xff01;今天来给大家分享一个在 计算机视觉 领域中非常有趣但又超级重要的概念——r2 采样滤波器&#xff08;Sampling Filter with r2&#xff09;。通过这种滤波器&#xff0c;我们可以在图像降采样的过程中有效地减少混叠效应&#xff0c;提升图像质量。 如…

数据库SQLite和SCADA DIAView应用教程

课程简介 此系列课程大纲主要包含七个课时。主要使用到的开发工具有&#xff1a;SQLite studio 和 SCADA DIAView。详细的可成内容大概如下&#xff1a; 1、SQLite 可视化管理工具SQLite Studio &#xff1a;打开数据库和查询数据&#xff1b;查看视频 2、创建6个变量&#x…

【开源免费】基于Vue和SpringBoot的景区民宿预约系统(附论文)

本文项目编号 T 162 &#xff0c;文末自助获取源码 \color{red}{T162&#xff0c;文末自助获取源码} T162&#xff0c;文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…

[Spring] Gateway详解

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

Pandas基础02(DataFrame创建/索引/切片/属性/方法/层次化索引)

DataFrame数据结构 DataFrame 是一个二维表格的数据结构&#xff0c;类似于数据库中的表格或 Excel 工作表。它由多个 Series 组成&#xff0c;每个 Series 共享相同的索引。DataFrame 可以看作是具有列名和行索引的二维数组。设计初衷是将Series的使用场景从一维拓展到多维。…

矩阵快速幂

矩阵快速幂&#xff1a; 高效计算矩阵的幂次&#xff08;如A^n&#xff09;的一种算法&#xff0c;只适用于计算某一项&#xff0c;而不是全部项。 递推公式 如果 n为偶数&#xff0c;则&#xff1a; A^nA^(n/2)A^(n/2) 如果 nnn 为奇数&#xff0c;则&#xff1a; A^nA^(n-1…

复位信号的同步与释放(同步复位、异步复位、异步复位同步释放)

文章目录 背景前言一、复位信号的同步与释放1.1 同步复位1.1.1 综述1.1.2 优缺点 1.2 recovery time和removal time1.3 异步复位1.3.1 综述1.3.2 优缺点 1.4 同步复位 与 异步复位1.5 异步复位、同步释放1.5.1 总述1.5.2 机理1.5.3 复位网络 二、思考与补充2.1 复…

【Git版本控制器--3】Git的远程操作

目录 理解分布式版本控制系统 创建远程仓库 仓库被创建后的配置信息 克隆远程仓库 https克隆仓库 ssh克隆仓库 向远程仓库推送 拉取远程仓库 忽略特殊文件 为什么要忽略特殊文件&#xff1f; 如何配置忽略特殊文件&#xff1f; 配置命令别名 标签管理 理…

ios打包:uuid与udid

ios的uuid与udid混乱的网上信息 新人开发ios&#xff0c;发现uuid和udid在网上有很多帖子里是混淆的&#xff0c;比如百度下&#xff0c;就会说&#xff1a; 在iOS中使用UUID&#xff08;通用唯一识别码&#xff09;作为永久签名&#xff0c;通常是指生成一个唯一标识&#xf…

中国认知作战研究中心:从认知战角度分析2007年iPhone发布

中国认知作战研究中心&#xff1a;从认知战角度分析2007年iPhone发布 中国认知作战研究中心&#xff1a;从认知战角度分析2007年iPhone发布 关键词 认知作战,新质生产力,人类命运共同体,认知战,认知域,认知战研究中心,认知战争,认知战战术,认知战战略,认知域作战研究,认知作…

Chameleon(变色龙) 跨平台编译C文件,并一次性生成多个平台的可执行文件

地址:https://github.com/MartinxMax/Chameleon Chameleon 跨平台编译C文件&#xff0c;并一次性生成多个平台的可执行文件。可以通过编译Chameleon自带的.C文件反向Shell生成不同平台攻击载荷。 登录 & 代理设置 按照以下步骤设置 Docker 的代理&#xff1a; 创建配置目…

【机器学习】穷理至极,观微知著:微积分的哲思之旅与算法之道

文章目录 微积分基础&#xff1a;理解变化与累积的数学前言一、多重积分的高级应用1.1 高维概率分布的期望值计算1.1.1 多维期望值的定义1.1.2 Python代码实现1.1.3 运行结果1.1.4 结果解读 1.2 特征空间的体积计算1.2.1 单位球体的体积计算1.2.2 Python代码实现1.2.3 运行结果…