快速开始 主题配置
容器
布局 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
作者
问题反馈

阴影 Shadow

概述

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

基础阴影

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

<div class="j-shadow">Box Shadow</div>
Box Shadow
不同主题

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

<div class="j-shadow-light">Box Shadow Light</div>

3种主题:默认、j-shadow-lightj-shadow-dark

Box Shadow
Box Shadow Light
Box Shadow Dark
不同方向

用法:设置类j-shadow-**为方向值。如:

<div class="j-shadow-up">Box Shadow Up</div>

4种方向:j-shadow-upj-shadow-rightj-shadow-downj-shadow-left

Box Shadow Up
Box Shadow Right
Box Shadow Down
Box Shadow Left
不同主题不同方向

用法:设置类j-shadow-x-yx为主题值,y为方向值。如:

<div class="j-shadow-light-up">Box Shadow Up</div>

8种样式:j-shadow-light-upj-shadow-light-rightj-shadow-light-downj-shadow-light-leftj-shadow-dark-upj-shadow-dark-rightj-shadow-dark-downj-shadow-dark-left

Box Shadow Light Up
Box Shadow Light Right
Box Shadow Light Down
Box Shadow Light Left
Box Shadow Dark Up
Box Shadow Dark Right
Box Shadow Dark Down
Box Shadow Dark Left
上一章:分页 Pagination
下一章:表单 Form