UI Components
毛玻璃侧边栏导航
带有细微噪点纹理、柔和高光和悬停辉光效果的高级毛玻璃质感侧边栏。
作者:mcpskills
框架
reacttailwind
UI 库
navigation
难度intermediate
英文提示词
Create a premium frosted-glass sidebar navigation component. Use a dark gradient page background so the glass effect is visible. The sidebar should be a tall vertical panel with a subtle translucent background (white/10), backdrop blur (xl), a 1px white/20 border on the right, and a faint inner white highlight at the top. Add a subtle noise texture overlay at 5% opacity. Include a logo mark at the top (simple geometric SVG, no emoji), a user profile card with an avatar and name, then grouped navigation links with labels like Main, Analytics, Settings. Active link should have a white/10 background, white text, and a left-side 3px accent line. Inactive links use white/60 text and a soft hover state that lifts them slightly and adds a white/5 background. Add a settings/logout button at the bottom. Use generous vertical spacing, clean sans-serif typography, and no emojis or icons except simple SVG marks. The result should feel like a high-end SaaS dashboard.
中文提示词
创建一个高级毛玻璃侧边栏导航组件。使用深色渐变页面背景以突显玻璃效果。侧边栏应是一个高大的垂直面板,带有微妙的半透明背景(white/10)、背景模糊(xl)、右侧 1px white/20 边框以及顶部淡淡的内部白色高光。添加 5% 不透明度的细微噪点纹理叠加。顶部放置 logo 标记(简单几何 SVG,不使用 emoji),然后是用户资料卡(头像和姓名),以及分组的导航链接,如 Main、Analytics、Settings。当前激活链接使用 white/10 背景、白色文字和左侧 3px 强调线。未激活链接使用 white/60 文字,悬停时轻微上浮并添加 white/5 背景。底部放置设置/登出按钮。使用宽松的垂直间距、简洁的无衬线字体,不使用 emoji 或图标,仅使用简单 SVG 标记。整体应呈现高端 SaaS 仪表板的质感。
