提交 issue修改本页

1. timeline

时间轴

1.1. nly-timeline

1.1.1. props

参数 类型 默认值 描述
inverse Boolean 边框，默认无边框，设置true则有边框

1.2. nly-timeline-label

时间标签

1.2.1. props

参数 类型 默认值 描述
bg-variant String 背景颜色
bg-gradient-variant String 背景颜色，渐变色
tag String div 标签
label-class String 自定义css式样
span-class String 自定义span元素css式样

1.3. nly-timeline-content

容器

1.3.1. props

参数 类型 默认值 描述
bg-variant String 背景颜色
bg-gradient-variant String 背景颜色，渐变色
icon String 容器icon，传入icon才会渲染，否则不会渲染
icon-class String 自定义css式样

1.4. nly-timeline-item

item元素

1.4.1. props

参数 类型 默认值 描述
time String 时间值
timeIcon String 时间icon，传入time才会渲染
time-tag String span time标签
time-class String time自定义css式样
item-tag String div item标签
item-class String item自定义css式样
item-tag String div item标签

1.5. nly-timeline-header

item元素中header部分

1.5.1. props

参数 类型 默认值 描述
tag String div 标签
timelineHeaderClass String 自定义css式样

1.6. nly-timeline-body

item元素中body部分

1.6.1. props

参数 类型 默认值 描述
tag String div 标签
timelineBodyClass String 自定义css式样

item元素中footer部分

1.7.1. props

参数 类型 默认值 描述
tag String div 标签
timelineFooterClass String 自定义css式样

1.8. 单包导出

如果只需要使用timelinePlugin中的组件，请使用单个组件导出

1.8.1. 包含组件

timelinePlugin包括以下组件

名称 导出路径
NlyTimeline nly-adminlte-vue
NlyTimelineLabel nly-adminlte-vue
NlyTimelineContent nly-adminlte-vue
NlyTimelineItem nly-adminlte-vue
NlyTimelineHeader nly-adminlte-vue
NlyTimelineBody nly-adminlte-vue
NlyTimelineFooter nly-adminlte-vue

1.8.2. 导出方法

单组件导出

import { NlyTimeline } from "nly-adminlte-vue";
Vue.component('nly-timeline', NlyTimeline)

整个timelinePlugin出

import { timelinePlugin } from "nly-adminlte-vue";
Vue.use(timelinePlugin);

组件参数

查看源码

<nly-timeline>

props 参数

props类型默认值描述
inverse
Booleanfalse
tag
String'div'标签

Slots

Slot NameDescription
tabs-start 在有内容的选项卡前面添加没有内容的选项卡
tabs-end 在有内容的选项卡最后面添加没有内容的选项卡
empty 当没有tab时渲染

Events

EventArgumentsDescription
input
  1. tabIndex - 当前可见tab的index
更新v-model值时触发
activate-tab v0.4.4+
  1. newTabIndex - tab激活之后的index
  2. prevTabIndex - 当前激活的tab的index，如果没有激活，那么默认为-1
  3. nlyEvt - NlyEvent对象. 防止冒泡
准备激活tab之前的index
changed
  1. currentTabs - 当前tabs中tab集合
  2. previousTabs - 未更新之前的tabs的tab集合
当一个tab被移除或者重新排序，或者新增一个tab时触发
查看源码

<nly-tab>

props 参数

props (Click to sort Ascending)类型默认值描述
id
Stringnull设置id
active
Booleanfalse设置 true 处于激活状态
tag
String'div'标签
button-id
String如果传入， 则可设置一个按钮来操作对应id的nly-tab可见状态，如果没用传入，会自动生成一个
title
String''标题文字
title-item-class
String or Array or Object选项卡控制器 li标签的 自定义css
title-link-class
String or Array or Object选项卡控制器里包裹的a标签自定义css
title-link-attributes
v0.4.4+ 		Object选项卡控制器里包裹的a标签 attributes属性
disabled
Booleanfalse禁用，设置true为禁用状态
no-body
Booleanfalse
lazy
Booleanfalse懒加载

Slots

Slot NameDescription
title tab标题插槽

Events

EventArgumentsDescription
click
  1. evt - 原生事件
点击tab时触发

单个组件导入

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

组件导出名称导出路径
<nly-timeline>NlyTimelinenly-adminlte-vue
<nly-tab>NlyTabnly-adminlte-vue

例子

import { NlyTimeline } from 'nly-adminlte-vue'
Vue.component('nly-timeline', NlyTimeline)

导出作为插件

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

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

例子

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