JUI概览

说明

按钮

不同主题

不同禁用状态

不同尺寸

不同边框宽度

不同风格

幽灵按钮:实线线框 Ghost

幽灵按钮:虚线线框 Dashed

幽灵按钮:点线框 Dotted

文字按钮 Text

按钮形状

圆角按钮 Round

圆形按钮 Circle

按钮组 Group

按钮组和按钮子元素

按钮组按钮


头像

不同尺寸

从 xs => 5xl

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

不同形状

头像元素

图标头像

文本头像

JL 中国 China

头像组

主要应用在圆形头像场景中

图片

图片悬停

图片悬停:放大

图片容器

具有加载效果的图片容器

img标签中图片地址访问失败时自动显示alt数据对用户进行提示

这里将自动读取和显示图片的alt信息

提示

不同主题

Default
is-primary
is-success
is-warning
is-error
is-secondary
is-neutral
is-info

富提示

淮南子 · 说山训
淮南子 · 说山训

标签

不同主题

Default is-primary is-success is-warning is-error is-secondary is-neutral

不同尺寸

small default large

不同风格

幽灵标签

default primary success warning error secondary

图标标签

Tag

标签组

Tag 1 Tag 2 Tag 3 Tag 4
Tag1 Tag2

徽章

不同风格

1

不同主题

9
99
99+
99+
99
99
99

选择器

不同状态

不同尺寸

单选框

默认状态

不同尺寸

不同风格

幽灵单选框

不同尺寸幽灵单选框

不同主题幽灵单选框

组合式幽灵单选框

复选框

默认状态

不同尺寸

不同主题

不同风格

组合式幽灵复选框

基于复选框的开关组件分享:1.常规开关

基于复选框的开关组件分享:2.主题切换

基于复选框的开关组件分享:3.弹性开关

输入框

基础状态

不同尺寸

基础交互

不同风格

单线输入框

隐形输入框

文本域

一般状态

基础交互

计数器

一般状态

不同尺寸

自定义尺寸

表单

一般状态

不同布局

水平布局 form-inline

水平布局 横向标题

垂直布局 横向标题

表单验证

选项卡

一般状态

选项一
选项二
选项三
您好,我是选项一的内容区
您好,我是选项二的内容区
您好,我是选项三的内容区

卡片选项卡

选项一
选项二
选项三
您好,我是选项一的内容区
您好,我是选项二的内容区
您好,我是选项三的内容区

折叠面板

折叠面板的标题 1

折叠面板的内容 1

折叠面板的标题 2

折叠面板的内容 2

折叠面板的标题 3

折叠面板的内容 3

消息提醒

两种风格

简单提醒 和 卡片提醒

常规提醒
卡片提醒
这是一个有链接的一般消息提醒。

不同主题

简单提醒
简单提醒
简单提醒
简单提醒
简单提醒
简单提醒
卡片提醒
这是一个有链接的一般消息提醒。
卡片提醒
这是一个有链接的一般消息提醒。
卡片提醒
这是一个有链接的一般消息提醒。
卡片提醒
这是一个有链接的一般消息提醒。
卡片提醒
这是一个有链接的一般消息提醒。
卡片提醒
这是一个有链接的一般消息提醒。

支持自定义样式:类名为 .j-toast.is-{ThemeName}

交互调用

单例调用

多例调用

动画演示

提醒