MUI list(列表)

「爱情、让人受尽委屈。」 2023-07-19 14:28 16阅读 0赞

1.普通列表

列表是常用的UI控件，mui封装的列表组件比较简单，只需要在`ul`节点上添加`.mui-table-view`类、在`li`节点上添加`.mui-table-view-cell`类即可，如下为示例代码

<ul class="mui-table-view">
        <li class="mui-table-view-cell">学习MUI</li>
        <li class="mui-table-view-cell">学习MUI</li>
        <li class="mui-table-view-cell">学习MUI</li>
    </ul>

2.自定义列表高亮颜色

点击列表，对应列表项显示灰色高亮，若想自定义高亮颜色，只需要重写`.mui-table-view-cell.mui-active`即可，如下：

/*点击变蓝色高亮*/
    .mui-table-view-cell.mui-active{
        background-color: #0062CC;
    }

3.右侧添加导航箭头

若右侧需要增加导航箭头，变成导航链接，则只需在`li`节点下增加`a`子节点，并为该`a`节点增加`.mui-navigate-right`类即可，如下：

<ul class="mui-table-view">
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">学习MUI</a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">学习MUI</a>
        </li>
        <li class="mui-table-view-cell">
            <a class="mui-navigate-right">学习MUI</a>
        </li>
    </ul>

4.右侧添加数字角标等控件

mui支持将数字角标、按钮、开关等控件放在列表中；mui默认将数字角标放在列表右侧显示，代码如下：

<ul class="mui-table-view">
        <li class="mui-table-view-cell">学习MUI
            <span class="mui-badge mui-badge-primary">11</span>
        </li>
        <li class="mui-table-view-cell">学习MUI
            <span class="mui-badge mui-badge-success">22</span>
        </li>
        <li class="mui-table-view-cell">学习MUI
            <span class="mui-badge">33</span>
        </li>
    </ul>

media list（图文列表）

图文列表继承自列表组件，主要添加了`.mui-media`、`.mui-media-object`、`.mui-media-body`、`.mui-pull-left/right`几个类，如下为示例代码

![aHR0cHM6Ly93d3cuZ2Vla2VzLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA0L3NzLTIwNngzMDAuZ2lm][]

<ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media">
                     <a href="javascript:;">
            <img  class="mui-media-object mui-pull-left"  src="img/1.jpg"/> 
            <div class="mui-media-body">
                学习
                <p class="mui-ellipsis">学习MUI</p>
            </div>
            </a>
            </li>
            <li class="mui-table-view-cell mui-media">          
                     <a href="javascript:;">
            <img  class="mui-media-object mui-pull-right"  src="img/1.jpg"/>    
            <div class="mui-media-body">
                学习
                <p class="mui-ellipsis">学习MUI</p>
            </div>
            </a>
            </li>
            </ul>

<!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>MUI list(列表)</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
            <link href="css/mui.min.css" rel="stylesheet" />
            <style>
                .mui-table-view-cell.mui-active{
                    background-color: #0062CC;
            </style>
        </head>
        <body>
              <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">MUI list(列表)</h1>
        </header>
       
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">学习MUI</li>
                <li class="mui-table-view-cell">学习MUI</li>
                <li class="mui-table-view-cell">学习MUI</li>
            </ul>
    
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">学习MUI</a></li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">学习MUI</a></li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">学习MUI</a></li>
            </ul>
    
                <ul class="mui-table-view">
                <li class="mui-table-view-cell">学习MUI
                <span class="mui-badge mui-badge-primary">
                11  
                </span>
                <li class="mui-table-view-cell">学习MUI
                <span class="mui-badge mui-badge-primary">
                22
                </span>
                <li class="mui-table-view-cell">学习MUI
                <span class="mui-badge mui-badge-primary">
                33  
                </span> 
            </ul>
    
            <ul class="mui-table-view">
                <li class="mui-table-view-cell mui-media">
                     <a href="javascript:;">
            <img  class="mui-media-object mui-pull-left"  src="img/1.jpg"/> 
            <div class="mui-media-body">
                学习
                <p class="mui-ellipsis">学习MUI</p>
            </div>
            </a>
            </li>
            <li class="mui-table-view-cell mui-media">          
                     <a href="javascript:;">
            <img  class="mui-media-object mui-pull-right"  src="img/1.jpg"/>    
            <div class="mui-media-body">
                学习
                <p class="mui-ellipsis">学习MUI</p>
            </div>
            </a>
            </li>
            </ul>
    
            <script src="js/mui.min.js"></script>
            <script type="text/javascript">
                mui.init(); 
            </script>
        </body>
    
    </html>

[aHR0cHM6Ly93d3cuZ2Vla2VzLmNuL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE5LzA0L3NzLTIwNngzMDAuZ2lm]: /images/20230528/22034184d97c42a3adf56b0fca7369c5.png