@duskmoon-dev/el-bound-navigation (日语)
由Web组件所建的移动底层导航组件.
安装
bun add @duskmoon-dev/el-bottom-navigation
使用量
自动注册
import '@duskmoon-dev/el-bottom-navigation/register';
<el-dm-bottom-navigation value="home"></el-dm-bottom-navigation>
手工登记
import { ElDmBottomNavigation, register } from '@duskmoon-dev/el-bottom-navigation';
// Register with default tag name
register();
// Or register with custom tag name
customElements.define('my-bottom-nav', ElDmBottomNavigation);
通过 JavaScript 设置项目
const nav = document.querySelector('el-dm-bottom-navigation');
nav.items = [
{ value: 'home', label: 'Home', icon: '🏠' },
{ value: 'search', label: 'Search', icon: '🔍' },
{ value: 'favorites', label: 'Favorites', icon: '⭐' },
{ value: 'profile', label: 'Profile', icon: '👤' },
];
属性
| 属性 | 类型 | 默认 | 说明 |
|---|
value | string | - 说吧 | 目前选中的项目值 |
color | string | 'primary' | 颜色变体 |
CSS 组件
| 编 | 说明 |
|---|
container | 导航容器 |
item | 每个导航器 |
icon | 项目图标 |
label | 项目标签 |
活动
| 活动 | 细节 | 说明 |
|---|
change | { value, item } | 选择变更时被解除 |
实例
基础
<el-dm-bottom-navigation id="nav" value="home"></el-dm-bottom-navigation>
<script>
document.querySelector('#nav').items = [
{ value: 'home', label: 'Home', icon: '🏠' },
{ value: 'explore', label: 'Explore', icon: '🧭' },
{ value: 'cart', label: 'Cart', icon: '🛒' },
{ value: 'account', label: 'Account', icon: '👤' },
];
</script>
带有 SVG 图标
nav.items = [
{
value: 'home',
label: 'Home',
icon: '<svg>...</svg>'
},
// ...
];
处理选择
const nav = document.querySelector('el-dm-bottom-navigation');
nav.addEventListener('change', (e) => {
console.log('Selected:', e.detail.value);
// Navigate to the selected section
navigateTo(e.detail.value);
});
带徽章
nav.items = [
{ value: 'home', label: 'Home', icon: '🏠' },
{ value: 'notifications', label: 'Notifications', icon: '🔔', badge: 5 },
{ value: 'messages', label: 'Messages', icon: '💬', badge: 'new' },
];
固定到下层
el-dm-bottom-navigation {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
许可证
麻省理工学院