List group

列表组是一个非常灵活的且可以以列表形式展示其他任何组件的组件,甚至可以用作导航。

<nly-list-group>
  <nly-list-group-item>诸葛亮</nly-list-group-item>
  <nly-list-group-item>曹操</nly-list-group-item>
  <nly-list-group-item>刘备</nly-list-group-item>
  <nly-list-group-item>赵云</nly-list-group-item>
  <nly-list-group-item>孙权</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group.name -->
<!-- nly-list-group.vue -->

激活状态

<nly-list-group-item> 设置 prop active 会激活当前 <nly-list-group-item>

<nly-list-group>
  <nly-list-group-item active>诸葛亮</nly-list-group-item>
  <nly-list-group-item>曹操</nly-list-group-item>
  <nly-list-group-item>刘备</nly-list-group-item>
  <nly-list-group-item>赵云</nly-list-group-item>
  <nly-list-group-item>孙权</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-active.name -->
<!-- nly-list-group-active.vue -->

禁用状态

<nly-list-group-item> 设置 prop disabled 会禁用当前 <nly-list-group-item>

<nly-list-group>
  <nly-list-group-item disabled>诸葛亮</nly-list-group-item>
  <nly-list-group-item>曹操</nly-list-group-item>
  <nly-list-group-item>刘备</nly-list-group-item>
  <nly-list-group-item disabled>赵云</nly-list-group-item>
  <nly-list-group-item>孙权</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-disabled.name -->
<!-- nly-list-group-disabled.vue -->

带有操作的列表元素

通过指定的 prop 把 <nly-list-group-item> 转换成带有操作的列表元素。比如设置 prop href 可以把组件

<nly-list-group-item> 设置成带有连接的 a 标签( <a href="..."> )。

<nly-list-group>
  <nly-list-group-item href="#some-link">诸葛亮</nly-list-group-item>
  <nly-list-group-item href="#" active>刘备</nly-list-group-item>
  <nly-list-group-item href="#">孙权</nly-list-group-item>
  <nly-list-group-item href="#foobar" disabled>曹操</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-disabled.name -->
<!-- nly-list-group-link.vue -->

可以设置 prop <button> 使得 nly-list-group-item 可以渲染成一个按钮组件。

<nly-list-group>
  <nly-list-group-item button>诸葛亮 </nly-list-group-item>
  <nly-list-group-item button>曹操</nly-list-group-item>
  <nly-list-group-item button disabled>孙权</nly-list-group-item>
  <nly-list-group-item button>刘备</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-button.name -->
<!-- nly-list-group-button.vue -->

注意:

  • 当设置 prop button is true , 所有的 link 相关的 prop 以及 prop tag 会失效

  • 当设置了 href or to 时, prop tag 会失效

颜色

variant

支持 adminlte 主题颜色,设置 prop variant 为对应值即可。

<nly-list-group>
  <nly-list-group-item>Default </nly-list-group-item>
  <nly-list-group-item variant="primary">Primary </nly-list-group-item>
  <nly-list-group-item variant="secondary">Secondary </nly-list-group-item>
  <nly-list-group-item variant="success">Success</nly-list-group-item>
  <nly-list-group-item variant="danger">Danger</nly-list-group-item>
  <nly-list-group-item variant="warning">Warning</nly-list-group-item>
  <nly-list-group-item variant="info">Info</nly-list-group-item>
  <nly-list-group-item variant="light">Light</nly-list-group-item>
  <nly-list-group-item variant="dark">Dark</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-variant.name -->
<!-- nly-list-group-variant.vue -->

bg-gradient-variant

同时也支持 adminlte 渐变色背景色。设置 bg-gradient-variant 为对应的值。

<nly-list-group>
  <nly-list-group-item>Default </nly-list-group-item>
  <nly-list-group-item bg-gradient-variant="primary"
    >Primary
  </nly-list-group-item>
  <nly-list-group-item bg-gradient-variant="secondary"
    >Secondary
  </nly-list-group-item>
  <nly-list-group-item bg-gradient-variant="success"
    >Success</nly-list-group-item
  >
  <nly-list-group-item bg-gradient-variant="danger">Danger</nly-list-group-item>
  <nly-list-group-item bg-gradient-variant="warning"
    >Warning</nly-list-group-item
  >
  <nly-list-group-item bg-gradient-variant="info">Info</nly-list-group-item>
  <nly-list-group-item bg-gradient-variant="pink">Pink</nly-list-group-item>
  <nly-list-group-item bg-gradient-variant="indigo">Indigo</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-bg-gradient-variant.name -->
<!-- nly-list-group-bg-gradient-variant.vue -->

背景色应用于所有带操作的列表元素。同时也适用与处于激活状态的列表元素

<nly-list-group>
  <nly-list-group-item href="#">Default</nly-list-group-item>
  <nly-list-group-item href="#" variant="primary">Primary</nly-list-group-item>
  <nly-list-group-item href="#" variant="secondary"
    >Secondary</nly-list-group-item
  >
  <nly-list-group-item href="#" variant="success">Success</nly-list-group-item>
  <nly-list-group-item href="#" variant="danger">Danger</nly-list-group-item>
  <nly-list-group-item href="#" variant="warning">Warning</nly-list-group-item>
  <nly-list-group-item href="#" variant="info">Info</nly-list-group-item>
  <nly-list-group-item href="#" variant="light">Light</nly-list-group-item>
  <nly-list-group-item href="#" variant="dark">Dark</nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-variant-action.name -->
<!-- nly-list-group-variant-action.vue -->

加入徽章元素

可以在列表元素中添加徽章 nly-badge 来展示未读,激活等状态。

<nly-list-group>
  <nly-list-group-item
    class="d-flex justify-content-between align-items-center"
  >
    诸葛亮
    <nly-badge variant="primary" pill>14</nly-badge>
  </nly-list-group-item>

  <nly-list-group-item
    class="d-flex justify-content-between align-items-center"
  >
    刘备
    <nly-badge variant="primary" pill>2</nly-badge>
  </nly-list-group-item>

  <nly-list-group-item
    class="d-flex justify-content-between align-items-center"
  >
    赵云
    <nly-badge variant="primary" pill>1</nly-badge>
  </nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-badges.name -->
<!-- nly-list-group-badges.vue -->

嵌套卡片 list group

把 list group 嵌套到cards,使用 <nly-list-group> prop flush 设置成无左右边框,可以实现 list group 和 card 无缝嵌套

<nly-card-group deck>
  <nly-card>
    <nly-card-header>
      Card with list group
    </nly-card-header>
    <nly-card-body>
      <nly-list-group>
        <nly-list-group-item href="#">Cras justo odio</nly-list-group-item>
        <nly-list-group-item href="#"
          >Dapibus ac facilisis in</nly-list-group-item
        >
        <nly-list-group-item href="#">Vestibulum at eros</nly-list-group-item>
      </nly-list-group>

      <p class="card-text mt-2">
        诸葛亮,字孔明,人称卧2113龙,汉末徐州 琅邪郡阳都县(今山东沂南
        县)人,父诸葛珪曾为泰山郡丞,叔父诸葛玄为当时名士。诸葛亮兄诸葛不共戴天瑾仕于吴孙权,拜大军、左都护,领豫州牧。亮从弟诸葛诞仕于魏,为吏部郎,累迁扬州刺吏、镇东将军、司空。兄弟三人“并有盛名,各在一国。于时以为‘蜀得其龙,吴得其虎5261,魏得其狗’
      </p>
    </nly-card-body>
  </nly-card>

  <nly-card>
    <nly-card-header>
      Card with flush list group
    </nly-card-header>
    <nly-list-group flush>
      <nly-list-group-item href="#">Cras justo odio</nly-list-group-item>
      <nly-list-group-item href="#"
        >Dapibus ac facilisis in</nly-list-group-item
      >
      <nly-list-group-item href="#">Vestibulum at eros</nly-list-group-item>
    </nly-list-group>
    <nly-card-body>
      诸葛亮,字孔明,人称卧2113龙,汉末徐州 琅邪郡阳都县(今山东沂南
      县)人,父诸葛珪曾为泰山郡丞,叔父诸葛玄为当时名士。诸葛亮兄诸葛不共戴天瑾仕于吴孙权,拜大军、左都护,领豫州牧。亮从弟诸葛诞仕于魏,为吏部郎,累迁扬州刺吏、镇东将军、司空。兄弟三人“并有盛名,各在一国。于时以为‘蜀得其龙,吴得其虎5261,魏得其狗’
    </nly-card-body>
  </nly-card>
</nly-card-group>

<!-- nly-list-group-card.name -->
<!-- nly-list-group-card.vue -->

水平布局

设置 horizontaltrue 会使得列表变为水平布局,默认情况下是垂直布局。可选 sm , md , lg or xl 。 注意不能与 flush 同时使用,否则 horizontal 会失效。

提示: 如果需要每个 list 宽度一样,给 nly-list-item 添加 class=flex-fill Always horizontal:

<div>
  <nly-list-group horizontal>
    <nly-list-group-item>诸葛亮</nly-list-group-item>
    <nly-list-group-item>刘备</nly-list-group-item>
    <nly-list-group-item>张飞</nly-list-group-item>
  </nly-list-group>
</div>

<!-- nly-list-group-horizontal.name -->
<!-- nly-list-group-horizontal.vue -->

设置水平布局断点为 md and above:

<div>
  <nly-list-group horizontal="md">
    <nly-list-group-item>诸葛亮</nly-list-group-item>
    <nly-list-group-item>项羽</nly-list-group-item>
    <nly-list-group-item>貂蝉</nly-list-group-item>
  </nly-list-group>
</div>

<!-- nly-list-group-horizontal-md.name -->
<!-- nly-list-group-horizontal-md.vue -->

自定义文本内容

list group 中几乎可以添加任何元素。

<nly-list-group>
  <nly-list-group-item href="#" active class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mnly-1">List group item heading</h5>
      <small>3 days ago</small>
    </div>

    <p class="mnly-1">
      诸葛亮,字孔明,人称卧2113龙,汉末徐州 琅邪郡阳都县(今山东沂南
      县)人,父诸葛珪曾为泰山郡丞,叔父诸葛玄为当时名士。诸葛亮兄诸葛不共戴天瑾仕于吴孙权,拜大军、左都护,领豫州牧。亮从弟诸葛诞仕于魏,为吏部郎,累迁扬州刺吏、镇东将军、司空。兄弟三人“并有盛名,各在一国。于时以为‘蜀得其龙,吴得其虎5261,魏得其狗’
    </p>

    <small>诸葛亮,字孔明</small>
  </nly-list-group-item>

  <nly-list-group-item href="#" class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">List group item heading</h5>
      <small class="text-muted">3 days ago</small>
    </div>

    <p class="mb-1">
      诸葛亮,字孔明,人称卧2113龙,汉末徐州 琅邪郡阳都县(今山东沂南
      县)人,父诸葛珪曾为泰山郡丞,叔父诸葛玄为当时名士。诸葛亮兄诸葛不共戴天瑾仕于吴孙权,拜大军、左都护,领豫州牧。亮从弟诸葛诞仕于魏,为吏部郎,累迁扬州刺吏、镇东将军、司空。兄弟三人“并有盛名,各在一国。于时以为‘蜀得其龙,吴得其虎5261,魏得其狗’
    </p>

    <small class="text-muted">诸葛亮,字孔明</small>
  </nly-list-group-item>

  <nly-list-group-item href="#" disabled class="flex-column align-items-start">
    <div class="d-flex w-100 justify-content-between">
      <h5 class="mb-1">Disabled List group item</h5>
      <small class="text-muted">3 days ago</small>
    </div>

    <p class="mb-1">
      诸葛亮,字孔明,人称卧2113龙,汉末徐州 琅邪郡阳都县(今山东沂南
      县)人,父诸葛珪曾为泰山郡丞,叔父诸葛玄为当时名士。诸葛亮兄诸葛不共戴天瑾仕于吴孙权,拜大军、左都护,领豫州牧。亮从弟诸葛诞仕于魏,为吏部郎,累迁扬州刺吏、镇东将军、司空。兄弟三人“并有盛名,各在一国。于时以为‘蜀得其龙,吴得其虎5261,魏得其狗’
    </p>

    <small class="text-muted">诸葛亮,字孔明</small>
  </nly-list-group-item>
</nly-list-group>

<!-- nly-list-group-content.vue -->

组件参数

props 参数

props类型默认值描述
tag
String'div'标签
flush
Booleanfalse设置true, 列表无左右边框
horizontal
Boolean or Stringfalse水平布局,默认是垂直布局,设置true,将渲染成水平布局,可以sm,md,lg,xl

props 参数

props (Click to sort Ascending)类型默认值描述
tag
String'div'标签
action
Booleannull设置action为true,列表元素将会附带可操作效果,比如悬浮,点击效果。
button
Booleannull设置true,列表会渲染成按钮元素,tag为button。
variant
Stringnull主题颜色,可选 primary, secondary, success, info, warning, danger, light, dark
bg-gradient-variant
v0.4.4+
String渐变背景色, 可选 primary, secondary, success, info, warning, danger, light, dark, lightblue, navy, olive, lime, fuchsia, maroon, blue, indigo, purple, pink, red, orange, yellow, green, teal, cyan, white, gray, gray-dark。会覆盖variant prop
href
String普通 url 地址
rel
Stringnull设置 rel 属性
target
String'_self'link 的 target 属性,可选_blank,_self,_parent,_top,framename
active
Booleanfalse设置 true 处于激活状态
disabled
Booleanfalse禁用,设置true为禁用状态
to
String or Object点击跳转的页面, 可以是路由对象或者字符串,以router-link router.push()跳转
append
Booleanfalserouter-link,需要使用 to 或者 href 这个 props,将需要跳转的 url 字符串添加到当前 url 的后面再跳转。设置 append=true,比如当前 http://localhost:8080/link,to='collapse',则会跳转到 http://localhost:8080/link/collapse
replace
Booleanfalserouter-link router.replace()跳转
event
String or Array'click'点击事件,尽量不要和to以及href同时使用,如果同时使用,点击事件和跳转会依次发生
active-class
String激活状态css类名
exact
Booleanfalserouter-link,设置true开启路由匹配模式
exact-active-class
String'active'exact为true的情况下,当路由匹配成功,会激活exactActiveClass。类似active-class,是一个自定义css类
router-tag
String'a'router-link 标签,通常建议不修改
no-prefetch
Booleanfalsenuxt-link

<nly-list-group-item> 会生成支持 <router-link> 或者 <nuxt-link> 的组件 (如果您使用了 Nuxt.js). 查看更多关于 router link (或者 nuxt link) 支持的 props, 请跳转 Router support 文档

单个组件导入

你可以从下表给出的导出路径和导出名称导入单个组件包

组件导出名称导出路径
<nly-list-group>NlyListGroupnly-adminlte-vue
<nly-list-group-item>NlyListGroupItemnly-adminlte-vue

例子

import { NlyListGroup } from 'nly-adminlte-vue'
Vue.component('nly-list-group', NlyListGroup)

导出作为插件

导出的插件包括上表中列出的组件. 插件同样包含上表中所有组件的简称.

导出名称导出路径
ListGroupPluginnly-adminlte-vue

例子

import { ListGroupPlugin } from 'nly-adminlte-vue'
Vue.use(ListGroupPlugin)