Menu List
Menu List is an extension of List View. Menu List unlike usual links list is designed to indicate currently active screen (or section) of your app. Think about it like a Tabbar but in a form of a list.
Menu List Layout
Let's look at layout structure of menu lists in your list views:
<div class="list menu-list">
<ul>
<li>
<a href="#" class="item-content item-link item-selected">
<div class="item-inner">
<div class="item-title">Item 1</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-content item-link">
<div class="item-inner">
<div class="item-title">Item 2</div>
</div>
</a>
</li>
...
</ul>
</div>
Where
menu-list
- additional class that must be added to List to enable menu list appearanceitem-selected
- additional class added menu list item to indicated it is currently active item
Example
menu-list.html
<template>
<div class="page">
<div class="navbar">
<div class="navbar-bg"></div>
<div class="navbar-inner sliding">
<div class="left">
<a class="link back">
<i class="icon icon-back"></i>
<span class="if-not-md">返回</span>
</a>
</div>
<div class="title">菜单列表</div>
</div>
</div>
<div class="page-content">
<div class="block">
<p>菜单列表 unlike 通常的链接列表,设计用于表示您的应用程序当前活动屏幕(或部分)的状态。
可以将其看作是一个带有图标和文本标签的列表</p>
</div>
<div class="list list-strong-ios list-outline-ios menu-list">
<ul>
<li>
<a class="item-content item-link ${selected === 'home' ? 'item-selected' : ''}" @click=${()=>
setItem('home')}
>
<div class="item-media">
<i class="icon material-icons if-md">home</i>
<i class="icon f7-icons if-not-md">house</i>
</div>
<div class="item-inner">
<div class="item-title">Home</div>
</div>
</a>
</li>
<li>
<a class="item-content item-link ${selected === 'profile' ? 'item-selected' : ''}" @click=${()=>
setItem('profile')}
>
<div class="item-media">
<i class="icon material-icons if-md">person</i>
<i class="icon f7-icons if-not-md">person_fill</i>
</div>
<div class="item-inner">
<div class="item-title">Profile</div>
</div>
</a>
</li>
<li>
<a class="item-content item-link ${selected === 'settings' ? 'item-selected' : ''}" @click=${()=>
setItem('settings')}
>
<div class="item-media">
<i class="icon material-icons if-md">settings</i>
<i class="icon f7-icons if-not-md">gear_alt_fill</i>
</div>
<div class="item-inner">
<div class="item-title">Settings</div>
</div>
</a>
</li>
</ul>
</div>
<div class="list list-strong-ios list-outline-ios media-list menu-list">
<ul>
<li>
<a class="item-content item-link ${selectedMedia === 'home' ? 'item-selected' : ''}" @click=${()=>
setItemMedia('home')}
>
<div class="item-media">
<i class="icon material-icons if-md">home</i>
<i class="icon f7-icons if-not-md">house</i>
</div>
<div class="item-inner">
<div class="item-title-wrap">
<div class="item-title">Home</div>
</div>
<div class="item-subtitle">Home subtitle</div>
</div>
</a>
</li>
<li>
<a class="item-content item-link ${selectedMedia === 'profile' ? 'item-selected' : ''}" @click=${()=>
setItemMedia('profile')}
>
<div class="item-media">
<i class="icon material-icons if-md">person</i>
<i class="icon f7-icons if-not-md">person_fill</i>
</div>
<div class="item-inner">
<div class="item-title-wrap">
<div class="item-title">Profile</div>
</div>
<div class="item-subtitle">Profile subtitle</div>
</div>
</a>
</li>
<li>
<a class="item-content item-link ${selectedMedia === 'settings' ? 'item-selected' : ''}" @click=${()=>
setItemMedia('settings')}
>
<div class="item-media">
<i class="icon material-icons if-md">settings</i>
<i class="icon f7-icons if-not-md">gear_alt_fill</i>
</div>
<div class="item-inner">
<div class="item-title-wrap">
<div class="item-title">Settings</div>
</div>
<div class="item-subtitle">Settings subtitle</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default (props, { $update }) => {
let selected = 'home';
let selectedMedia = 'home';
const setItem = (newItem) => {
selected = newItem;
$update();
}
const setItemMedia = (newItem) => {
selectedMedia = newItem;
$update();
}
return $render;
}
</script>
On this page