Infobox

信息盒是一个用于展示简单重要数据的卡片组件。

总览

信息盒通常用来展示重要数据或者需求醒眼的数据。

<nly-row>
    <nly-col xs="12" md="3" sm="6">
        <nly-infobox>
            <nly-infobox-icon icon="far fa-envelope" bg-variant="info" />
            <nly-infobox-body number="65378454" text="Messages" />
        </nly-infobox>
    </nly-col>
    <nly-col xs="12" md="3" sm="6">
        <nly-infobox>
            <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
            <nly-infobox-body number="65378454" text="Bookmarks" />
        </nly-infobox>
    </nly-col>
    <nly-col xs="12" md="3" sm="6">
        <nly-infobox>
            <nly-infobox-icon icon="far fa-copy" bg-variant="danger" />
            <nly-infobox-body number="65378454" text="Uploads" />
        </nly-infobox>
    </nly-col>
    <nly-col xs="12" md="3" sm="6">
        <nly-infobox>
            <nly-infobox-icon icon="far fa-star" bg-variant="success" />
            <nly-infobox-body>
                <nly-infobox-text>
                    Likes
                </nly-infobox-text>
                <nly-infobox-number>
                    65378454
                </nly-infobox-number>
            </nly-infobox-body>
        </nly-infobox>
    </nly-col>
</nly-row>

<!-- 总览.name -->
<!-- nly-infobox.vue -->

loading 加载状态

可以通过设置 loading=true 来开启加载状态

<nly-infobox loading>
    <nly-infobox-icon icon="far fa-envelope" bg-variant="info" />
    <nly-infobox-body number="65378454" text="Messages" />
</nly-infobox>

<!-- loading.name -->
<!-- nly-infobox.vue -->

我们可以设置 dark=true 来调整 loading 颜色

<nly-infobox loading dark>
    <nly-infobox-icon icon="far fa-envelope" bg-variant="info" />
    <nly-infobox-body number="65378454" text="Messages" />
</nly-infobox>

<!-- dark.name -->
<!-- nly-infobox.vue -->

loadingContent 加载状态文字内容

loading-content 可以设置加载状态的自定义文本内容。必须在 loading=true 的情况下才生效。传入内容会覆盖 icon-loading

<nly-row>
    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-content="加载中">
            <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
            <nly-infobox-body number="65378454" text="Bookmarks" />
        </nly-infobox>
    </nly-col>

    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-content="加载中" loading-content-tag="h3">
            <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
            <nly-infobox-body number="65378454" text="Bookmarks" />
        </nly-infobox>
    </nly-col>

    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-content="加载中" loading-content-tag="h1" loading-content-class="text-danger">
            <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
            <nly-infobox-body number="65378454" text="Bookmarks" />
        </nly-infobox>
    </nly-col>

    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-content="加载中" loading-content-tag="h1" loading-content-class="text-danger">
        </nly-infobox>
    </nly-col>
</nly-row>

<!-- loading-content.name -->
<!-- nly-infobox.vue -->

loadingIcon 加载状态图标

loading-iconloading=true 的情况下默认显示的加载图标,默认值为 fas fa-2x fa-sync-alt fa-spin ,如果传入 loading-content ,会覆盖 loading-icon

<nly-row>
    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-icon="nlyfont nly-icon-sr-rementuijian-fill text-xl
">
            <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
            <nly-infobox-body number="65378454" text="Bookmarks" />
        </nly-infobox>
    </nly-col>

    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-icon="nlyfont nly-icon-sr-rementuijian-fill text-xl text-info
">
            <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
            <nly-infobox-body number="65378454" text="Bookmarks" />
        </nly-infobox>
    </nly-col>

    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-icon="nlyfont nly-icon-sr-rementuijian-fill text-xl text-info
">
        </nly-infobox>
    </nly-col>

    <nly-col xs="12" md="3" sm="6">
        <nly-infobox loading loading-icon="nlyfont nly-icon-sr-rementuijian-fill text-xl text-info" loading-content="加载中">
            <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
            <nly-infobox-body number="65378454" text="Bookmarks" />
        </nly-infobox>
    </nly-col>
</nly-row>

<!-- loading-icon.name -->
<!-- nly-infobox.vue -->

loadingImgSrc 加载状态背景图

loading-img-src 可以设置加载状态下背景图。可能会被 loading-contentloading-icon 覆盖。

<nly-infobox loading loading-img-src="http://nly-adminlte-vue-demo.nejinn.com/img/NLYLOGO.b43761e2.png">
    <nly-infobox-icon icon="far fa-flag" bg-variant="warning" />
    <nly-infobox-body number="65378454" text="Bookmarks" />
</nly-infobox>

<!-- loading-img-src.name -->
<!-- nly-infobox.vue -->

body

nly-infobox-body 可以接收 text , number , progress-value , progress-description 来分别生成一个内置的 nly-infobox-text , nly-infobox-number , nly-progress , nly-progress-description 组件。

可以通过对应的 class 来自定义他们的式样

<nly-row>
    <nly-col xs="12" md="6" sm="6">
        <nly-infobox bg-variant="success">
            <nly-infobox-icon icon="far fa-calendar-alt" />
            <nly-infobox-body number="41,410" text="Events" progress-value="60" progress-description="70% Increase in 30 Days" />
        </nly-infobox>
    </nly-col>

    <nly-col xs="12" md="6" sm="6">
        <nly-infobox bg-variant="success">
            <nly-infobox-icon icon="far fa-calendar-alt" />
            <nly-infobox-body>
                <nly-infobox-text>Events</nly-infobox-text>
                <nly-infobox-number>33006689</nly-infobox-number>
                <nly-progress value=70></nly-progress>
                <nly-progress-description>70% Increase in 30 Days</nly-progress-description>
            </nly-infobox-body>
        </nly-infobox>
    </nly-col>
</nly-row>

<!-- body.name -->
<!-- nly-infobox.vue -->

组件参数

props 参数

props (Click to sort Ascending)类型默认值描述
bg-variant
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, graydark
bg-gradient-variant
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, graydark
tag
String'div'标签
loading
Booleanfalse开启图标,图片和文字loading
loading-content
String自定义loading文字内容,设置loading为true的时候,生效,传入内容会覆盖icon-loading
loading-content-tag
String'p'自定义loading文字内容标签,设置loading为true的时候,生效
loading-content-class
String自定义loading文字内容css式样,设置loading为true的时候,生效
loading-icon
String'fas fa-2x fa-sync-alt fa-spin'开启loading情况下默认loading内容。如果传入loading-content,会覆盖loading-icon
loading-img-src
Stringloading图片url,在设置loading为true的时候,传入loading-img-src参数会显示loadingimg
loading-img-class
Stringloading图片自定义css式样,在传入loading-img-src的时候,loading-img-class生效
dark
Booleanfalseloading式样,默认light,设置dark=true为黑色

props 参数

props (Click to sort Ascending)类型默认值描述
bg-variant
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, graydark
bg-gradient-variant
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, graydark
infobox-body-class
String
text
String传入text会渲染一个nly-infobox-text组件
text-class
Stringnly-infobox-text组件自定义css
number
String or Number传入number会渲染一个nly-infobox-number组件
number-class
Stringnly-infobox-number组件自定义css
progress-value
String or Number传入progress-value会渲染一个nly-progress组件,value为progress-value
progress-description
String传入progress-description会渲染一个nly-progress-description组件,text为progress-description
tag
String'div'标签

props 参数

props类型默认值描述
icon
必传
String图标名称
bg-variant
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, graydark
bg-gradient-variant
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, graydark
infobox-icon-class
String自定义css式样
tag
String'span'标签

props 参数

props类型默认值描述
number
String or Number组件文本内容。当number不以props传入而是用默认插槽传入时,不会转换为货币数字
number-class
String自定义css式样
tag
String'span'标签

props 参数

props类型默认值描述
text-class
String自定义css
text
String文本内容
tag
String'span'标签

单个组件导入

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

组件导出名称导出路径
<nly-infobox>NlyInfoboxnly-adminlte-vue
<nly-infobox-body>NlyInfoboxBodynly-adminlte-vue
<nly-infobox-icon>NlyInfoboxIconnly-adminlte-vue
<nly-infobox-number>NlyInfoboxNumbernly-adminlte-vue
<nly-infobox-text>NlyInfoboxTextnly-adminlte-vue

例子

import { NlyInfobox } from 'nly-adminlte-vue'
Vue.component('nly-infobox', NlyInfobox)

导出作为插件

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

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

例子

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