Bootstrap4组件:列表组(List-group)


发布时间:2020-03-20 15:57    作者: Uncle Hui   已过去:2 月,2 周   阅读总量:182 已被赞:0


列表组(List-group)

基本示例

启用:添加 .active .list-group-item 下的其中一行或多行,以指示当前有效的选择状态。

禁用:添加 .disabled  .list-group-item 下的其中一行或多行,以显示出 禁用 状态。注意:一些带有 .disabled的元素还需要自定义JavaScript脚本才能完全禁用其点击事件(如链接)。

<ul class="list-group">

<li class="list-group-item active">aaa</li>

<li class="list-group-item">bbb</li>

<li class="list-group-item disabled">ccc</li>

</ul>

链接和按钮

使用 <a> <button>来创建具有 hover、禁用、悬停和活动状态的列表组.list-group-item-action,我们分离这些Class样式,以确保由非交互元素组成的列表群组(如 <li> <div>)不提供可点击或触击(即可以用一个父<div>代替<ul>)。

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action active">aaa</a>

<a href="#" class="list-group-item list-group-item-action">bbb</a>

<a href="#" class="list-group-item list-group-item-action disabled">ccc</a>

</div>

使用<button>元素,你还可以使用disabled 属性来达到禁用状态指示(或引用 .disabled 样式),不过这一属性不支持HTML5中的 <a>标签。

<div class="list-group">

<button class="list-group-item list-group-item-action active">aaa</button>

<button class="list-group-item list-group-item-action">bbb</button>

<button class="list-group-item list-group-item-action" disabled>ccc</button>

</div>

Flush紧致贴齐

加入.list-group-flush选择器,可以实现移除部分边框以及圆角,从而产生边缘贴齐的列表组,这在诸如Card卡片等容器中很实用(达成更好的呈现效果)。

上下文语境颜色呈现样式

使用情景式class样式来设计具有状态背景和颜色的列表组,呈现默认或链接状态。

<ul class="list-group">

<li class="list-group-item">Dapibus ac facilisis in</li>

<li class="list-group-item list-group-item-primary">This is a primary list group item</li>

<li class="list-group-item list-group-item-secondary">This is a secondary list group item</li>

<li class="list-group-item list-group-item-success">This is a success list group item</li>

<li class="list-group-item list-group-item-danger">This is a danger list group item</li>

<li class="list-group-item list-group-item-warning">This is a warning list group item</li>

<li class="list-group-item list-group-item-info">This is a info list group item</li>

<li class="list-group-item list-group-item-light">This is a light list group item</li>

<li class="list-group-item list-group-item-dark">This is a dark list group item</li>

</ul>

情景式class也可以使用 .list-group-item-action样式,注意,在上述示例中,不存在hover样式指示器,事实上它是支持的,而且还支持e .active 状态指示--我们可以应用它们在上下文情景列表组的项目上进行活动状态选择指示。

<div class="list-group">

<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-primary">This is a primary list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-secondary">This is a secondary list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-success">This is a success list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-danger">This is a danger list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-warning">This is a warning list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-info">This is a info list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-light">This is a light list group item</a>

<a href="#" class="list-group-item list-group-item-action list-group-item-dark">This is a dark list group item</a>

</div>

引入badge微章

在通用样式定义的帮助下,可向任何列表项目添加.badge标签以显示未读计数、活动状态等。badge-pill胶囊样式

<ul class="list-group">

<li class="list-group-item d-flex justify-content-between align-items-center">

aaa

<span class="badge badge-primary badge-pill">14</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

bbb

<span class="badge badge-primary badge-pill">2</span>

</li>

<li class="list-group-item d-flex justify-content-between align-items-center">

ccc

<span class="badge badge-primary badge-pill">1</span>

</li>

</ul>

自定义内容

flexbox 通用样式定义的支持下,列表组中几乎可以添加任意的HTML内容,包括标签、内容、链接。

<div class="list-group">

<a href="" class="list-group-item list-group-item-action">

<div class="d-flex w-100 justify-content-between">

<h5 class="mb-1">标题</h5>

<small>一天前</small>

</div>

<p class="mb-1">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</p>

<small>子内容子内容子内容</small>

</a>

</div>

JavaScript 行为卡片切换效果 竖排

使用数据属性.list-group-item 上使用数据属性,可以指定 data-toggle="list" 或在元素上编写任意的JavaScript事件来激活列表组导航,而需要编写任何的JavaScript脚本。

fade淡入淡出效果:要使定位的元素有淡入淡出效果,请将.fade 添加到每个 .tab-pane子项中,且第一个列表项目定义 .show 样式使之初始可见。

<div class="row">

<div class="col-3">

<div class="list-group">

<a href="#home" class="list-group-item list-group-item-action active" data-toggle="list">Home</a>

<a href="#profile" class="list-group-item list-group-item-action" data-toggle="list">Profile</a>

<a href="#messages" class="list-group-item list-group-item-action" data-toggle="list">Messages</a>

<a href="#settings" class="list-group-item list-group-item-action" data-toggle="list">Settings</a>

</div>

</div>

<div class="col-9">

<div class="tab-content">

<div class="tab-pane fade show active" id="home">1111111111</div>

<div class="tab-pane fade" id="profile">2222222222</div>

<div class="tab-pane fade" id="messages">3333333333</div>

<div class="tab-pane fade" id="settings">4444444444</div>

</div>

</div>

</div>

事件

  1. show.bs.tab:此事件在标签显示时触发,但在新标签显示之前。使用event.target 和event.relatedTarget 将目前与此前启用(如果可用)的作为目标定位。
  2. shown.bs.tab:此事件发生在选项卡显示后、新选项卡被显示之前,使用 event.target 和 event.relatedTarget 分别定位启用中的选项卡和上一个活动选项卡(如果可用)。
  3. hide.bs.tab:当要显示新的选项卡(因此先前的活动选项卡将被隐藏)时,此事件将触发。分别使用 event.target 和 event.relatedTarget 定位当前活动选项卡和新的即将启用的的选项卡。
  4. hidden.bs.tab:在显示新标签页之后触发此事件(因此先前的活动标签页被隐藏),使用 event.target 和 event.relatedTarget 分别定位上一个活动选项卡和新的活动选项卡。

$('a[data-toggle="list"]').on('shown.bs.tab', function (e) {

console.log(e.target) // newly activated tab

console.log(e.relatedTarget) // previous active tab

});

 

点赞

0




登陆后方可评论