快速开始 主题配置
容器
布局 Layout 容器 Docker 定位 Position 外边距 Margin 内边距 Padding 溢出 Overflow
元素
颜色 Color 文字 Font 图标 Icon 图片 Image 按钮 Button 提示 Tip 标签 Tag 徽标 Badge 表格 Table 菜单 Menu 面包屑 Breadcrumb 选项卡 Tab 分页 Pagination 阴影 Shadow
组件
表单 Form 输入框 Input 文本域 Textarea 单选框 Radio 多选框 Checkbox 选择器 Select 计数器 Counter 折叠面板 Collapse 模态框 Modal 动画 Animation
作者
问题反馈

提示 Tip

概述

基础组件,触发业务逻辑时使用。

一般提醒

用法:设置类j-tip。如:

<div class="j-tip">
    <span class="j-tip-content">提醒</span>
</div>
提醒
带关闭的提醒

用法:设置类j-tip-close。如:

<div class="j-tip">
    <span class="j-tip-content">我的右边有一个关闭交互位</span>
    <span class="iconfont icon_close j-tip-close"></span>
</div>
我的右边有一个关闭交互位
带图标的提醒

用法:设置类j-tip-icon。如:

<div class="j-tip">
    <i class="iconfont icon_prompt_fill j-tip-icon"></i>
    <span class="j-tip-content">我的左边有一个图标位</span>
    <span class="iconfont icon_close j-tip-close"></span>
</div>
我的左边有一个图标位
多种主题

用法:设置类j-type-**为主题值。如:

<div class="j-tip j-type-primary">
    <i class="iconfont icon_prompt_fill j-tip-icon"></i>
    <span class="j-tip-content">我的左边有一个图标位</span>
    <span class="iconfont icon_close j-tip-close"></span>
</div>

11种主题:默认主题(light)和darkwhitej-type-primaryj-type-successj-type-warningj-type-dangerj-type-primary-lightj-type-success-lightj-type-warning-lightj-type-danger-light

默认(light)
dark
white
primary
success
warning
danger
primary-light
success-light
warning-light
danger-light
带标题的提醒

用法:在类j-tip-content中,设置类j-tip-content-title标记标题。如:

<div class="j-tip">
    <span class="j-tip-content">
        <div class="j-tip-content-title">我是标题</div>
        <div class="j-tip-content-info">我是内容</div>
    </span>
    <span class="iconfont icon_close j-tip-close"></span>
</div>
我是标题
富提醒同样也支持不同的主题
上一章:按钮 Button
下一章:标签 Tag