Card

卡片,包括卡片组,卡片header,body,footer,img,title,tool等组件

总览

卡片包括卡片组,卡片,卡片 header,卡片 body,卡片 footer 3 个主要部分

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card>
            <nly-card-header> header</nly-card-header>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card>
            <nly-card-body>body </nly-card-body>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

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

card variant

卡片颜色可以支持 g-* 类和 bg-gradient-*

bg-variant

背景色

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-variant="pink">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-variant="primary">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-variant="maroon">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<!-- card variant.name -->
<!-- nly-card.vue -->

bg-gradient-variant

渐变色背景色

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-gradient-variant="lightblue">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-gradient-variant="cyan">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-gradient-variant="dark">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<!-- card variant.name -->
<!-- nly-card.vue -->

当 header,body,footer 都设置 bg-variantbg-gradient-variant 时,cardbg-variantbg-gradient-variant 会被覆盖对应部分。

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-variant="navy">
            <nly-card-header bg-variant="purple">header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-variant="gray">
            <nly-card-header> header</nly-card-header>
            <nly-card-body bg-variant="purple">body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-variant="indigo">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer bg-variant="purple">footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-gradient-variant="lightblue">
            <nly-card-header bg-gradient-variant="lime">
                header</nly-card-header
            >
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-gradient-variant="cyan">
            <nly-card-header> header</nly-card-header>
            <nly-card-body bg-gradient-variant="lime">body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card bg-gradient-variant="dark">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer bg-gradient-variant="lime">footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<!-- header-variant.name -->
<!-- nly-card.vue -->

header-variant

nly-card 设置 nly-card-header 背景色,当 nly-card-header 设置了 bg-variantbg-gradient-variant 时,header-variant 失效

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="info">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="danger">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="warning">
            <nly-card-header bg-variant="pink"> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<!-- header-variant.name -->
<!-- nly-card.vue -->

header-outline

header-outline 只有在 headr-variant 有效的时候才会生效,nly-headervariant prop 会使 header-outline 失效

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="info" header-outline>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="danger" header-outline>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="warning" header-outline>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="primary" header-outline>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="lime" header-outline>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
    <nly-col xs="12" md="6" lg="4">
        <nly-card header-variant="olive" header-outline>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<!-- header-outline.name -->
<!-- nly-card.vue -->

tabs

让 card 变成 tabs

<nly-row>
    <nly-col xs="12" md="6">
        <nly-card card-tabs>
            <nly-card-header> <a> card-outline-tabs</a> </nly-card-header>
            <nly-card-body>主要用于nav,详情情况nav </nly-card-body>
            <nly-card-footer>card-tabs</nly-card-footer>
        </nly-card>
    </nly-col>

    <nly-col xs="12" md="6">
        <nly-card card-tabs card-outline-tabs>
            <nly-card-header> <a> card-outline-tabs</a> </nly-card-header>
            <nly-card-body>主要用于nav,详情情况nav </nly-card-body>
            <nly-card-footer>card-tabs</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<nly-row>
    <nly-col>
        <nly-card card-outline-tabs card-tabs>
            <nly-card-header>
                <nly-nav tabs card-header>
                    <nly-nav-item active class="xxx">
                        tabs card-header active
                    </nly-nav-item>

                    <nly-nav-item disabled>
                        tabs card-header disabled
                    </nly-nav-item>

                    <nly-nav-item>
                        tabs card-header-------
                    </nly-nav-item>
                </nly-nav>
            </nly-card-header>
        </nly-card>
    </nly-col>
</nly-row>

<nly-row>
    <nly-col>
        <nly-card headerVariant="info" card-tabs>
            <nly-card-header>
                <nly-nav tabs card-header>
                    <nly-nav-item active class="xxx">
                        tabs card-header active
                    </nly-nav-item>

                    <nly-nav-item disabled>
                        tabs card-header disabled
                    </nly-nav-item>

                    <nly-nav-item>
                        tabs card-header-------
                    </nly-nav-item>
                </nly-nav>
            </nly-card-header>
        </nly-card>
    </nly-col>
</nly-row>
<!-- tabs.name -->
<!-- nly-card.vue -->

loading

开启 loading 罩层,有 text loading,icon loading, img loading

<nly-row>
    <nly-col xs="12" md="6" lg="4">
        <nly-card loading>
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body</nly-card-body>
            <nly-card-footer> footer</nly-card-footer>
        </nly-card>
    </nly-col>

    <nly-col xs="12" md="6" lg="4">
        <nly-card loading loading-content="加载中">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>

    <nly-col xs="12" md="6" lg="4">
        <nly-card loading loading-content="加载中" loading-content-tag="a">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body </nly-card-body>
            <nly-card-footer>footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

<nly-row>
    <nly-col>
        <nly-card loading loading-icon="nlyfont nly-icon-home text-danger">
            <nly-card-header> header</nly-card-header>
            <nly-card-body>body</nly-card-body>
            <nly-card-footer> footer</nly-card-footer>
        </nly-card>
    </nly-col>
</nly-row>

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

组件参数

props 参数

props类型默认值描述
group-type
String'default'卡片组类型 默认card-group,可选,default,deck,columns,accordion。deck水平,colunms当水平排列放不下,就垂直,先垂直一列,载垂直第二列
group-class
String自定义css类
tag
String'div'标签

props 参数

props (Click to sort Ascending)类型默认值描述
header-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
header-outline
Booleanfalse卡片头部顶部边框加粗
card-outline-tabs
Booleanfalse卡片渲染成外边框tab,鼠标移上去才会出现边框
card-tabs
Booleanfalse卡片渲染成tab
text-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-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
height-control
Booleanfalse卡片高度,300px
card-class
String自定义css类
loading
Booleanfalse卡片渲染成tab
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生效
tag
String'div'标签
dark
Booleanfalseloading式样,默认light,设置dark=true为黑色
id
String设置id

props 参数

props类型默认值描述
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
img-overlay
Booleanfalse放置到图片card-img上
text-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
card-header-class
String自定义css类
tag
String'div'标签

props 参数

props类型默认值描述
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
img-overlay
Booleanfalse放置到图片card-img上
text-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
card-body-class
String自定义css类
tag
String'div'标签
props类型默认值描述
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
img-overlay
Booleanfalse放置到图片card-img上
text-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
card-footer-class
String自定义css类
tag
String'div'标签

props 参数

props类型默认值描述
text-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
card-title-class
String自定义css类
tag
String'h4'标签
left
Booleanfalse与副标题位置关系

props 参数

props类型默认值描述
text-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
card-subtitle-class
String自定义css类
tag
String'h6'标签

props 参数

props类型默认值描述
top
Booleanfalsetop圆角
bottom
Booleanfalsebottom圆角
src
必传
Stringsrc标签的url
card-img-class
String自定义css类

props 参数

props类型默认值描述
card-tool-class
String自定义css类
tag
String'div'标签

props 参数

props类型默认值描述
card-text-class
String自定义css类
tag
String'p'标签
text-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

单个组件导入

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

组件导出名称导出路径
<nly-card-group>NlyCardGroupnly-adminlte-vue
<nly-card>NlyCardnly-adminlte-vue
<nly-card-header>NlyCardHeadernly-adminlte-vue
<nly-card-body>NlyCardBodynly-adminlte-vue
<nly-card-footer>NlyCardFooternly-adminlte-vue
<nly-card-title>NlyCardTitlenly-adminlte-vue
<nly-card-subtitle>NlyCardSubtitlenly-adminlte-vue
<nly-card-img>NlyCardImgnly-adminlte-vue
<nly-card-tool>NlyCardToolnly-adminlte-vue
<nly-card-text>NlyCardTextnly-adminlte-vue

例子

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

导出作为插件

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

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

例子

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