@duskmoon-dev/el-navbar (日语)
用 Web 组件构建的导航栏组件 .
安装
bun add @duskmoon-dev/el-navbar
使用量
自动注册
import '@duskmoon-dev/el-navbar/register';
<el-dm-navbar>
<a slot="start" href="/">Logo</a>
<nav>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
<div slot="end">
<el-dm-button>Sign In</el-dm-button>
</div>
</el-dm-navbar>
手工登记
import { ElDmNavbar, register } from '@duskmoon-dev/el-navbar';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-navbar', ElDmNavbar);
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
fixed | boolean | false | 将导航栏固定到视图端口 |
elevated | boolean | false | 添加阴影/ 连接 |
color | string | - 说吧 | 背景颜色变体 |
槽数
| 槽 | 说明 |
|---|
start | 左侧内容( logo) |
| (默认) | 中心内容 (导航) |
end | 右侧内容( 动作) |
CSS 组件
| 编 | 说明 |
|---|
navbar | 导航箱 |
content | 内容包装 |
start | 启动部分 |
center | 中节 |
end | 结尾部分 |
hamburger | 移动菜单按钮 |
mobile-menu | 移动菜单容器 |
活动
| 活动 | 细节 | 说明 |
|---|
menu-toggle | { open } | 移动菜单切换时起火 |
实例
基础
<el-dm-navbar>
<a slot="start" href="/">Brand</a>
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
<a href="/services">Services</a>
</nav>
<div slot="end">
<el-dm-button variant="primary">Get Started</el-dm-button>
</div>
</el-dm-navbar>
固定职位
<el-dm-navbar fixed elevated>
...
</el-dm-navbar>
与电梯
<el-dm-navbar elevated>
...
</el-dm-navbar>
自定义颜色
<el-dm-navbar color="primary">
...
</el-dm-navbar>
响应导航
<el-dm-navbar>
<a slot="start" href="/">Logo</a>
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
<div slot="end">
<el-dm-button>Login</el-dm-button>
</div>
</el-dm-navbar>
<script>
const navbar = document.querySelector('el-dm-navbar');
navbar.addEventListener('menu-toggle', (e) => {
console.log('Menu open:', e.detail.open);
});
</script>
许可证
麻省理工学院