根据前几次的导航栏设计,从最简单的三行导航栏到后面响应式的导航栏,其实可以在这个的基础上慢慢优化,就可以得到一个日常使用设计的导航栏。设计步骤也和之前的类似。
一、实现步骤
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
,你将布局拆分为 Header
、Sider
、Content
和 Footer
,职责明确,便于扩展和维护。左侧 Sider
提供清晰的导航菜单,结合图标和文字提升可读性;Breadcrumb
组件帮助用户定位,Skeleton
优化加载体验,避免页面空白。样式上,使用 var(--semi-color-border)
等设计系统变量,确保视觉一致性。Nav
组件的 items
和 footer
属性支持动态配置,灵活性高。代码结构清晰,语义化命名和注释增强了可读性。整体设计符合现代前端开发实践,支持按需加载和组件化开发,同时具备扩展性,便于后续添加功能或适配多端。细节上,Header
中的 Button
和 Avatar
增强了交互体验,Footer
展示了平台信息,提升了专业性。若进一步优化响应式设计、动态路由和主题切换,将更加完善。