# Color 色彩

EAdmin的主色调为暗色,高亮色配合蓝色,显得很清晰明快

TIP

后续会推出亮色调的配色方案

演示

# Font 字体

EAdmin统一采用微软 雅黑字体 作为主字体

演示

# Button 按钮

TIP

所有类型的按钮都支持3种尺寸,默认为大尺寸,class中增加middle为中等尺寸,增加small为小尺寸

<!-- 默认大尺寸按钮 -->
<button>默认按钮</button>

<!-- 中等尺寸按钮 -->
<button class="middle">中等按钮</button>

<!-- 小尺寸按钮 -->
<button class="small">小按钮</button>
1
2
3
4
5
6
7
8

# 默认按钮

<button>默认按钮</button>
1

# 高亮按钮

增加样式 highlight 为高亮按钮

<button class="highlight">高亮按钮</button>
1

# 禁用按钮

增加属性 disabled 为禁用按钮

<button disabled>禁用按钮</button>
1

# 带图标的按钮

增加属性 data-icon 为按钮增加图标

<button data-icon="fa-cog">配置</button>
1

# 纯图标的按钮

增加属性 data-icon 为按钮增加图标,只是按钮中不需要写文字就变成了纯图标按钮

<button data-icon="fa-cog"></button>
1

# 加载中的按钮

增加属性 data-loading 在按钮点击时会触发loading效果,增加属性 data-do 来指定点击后需要执行的动作,用来做具体的业务处理

<button data-loading="上报中..." data-do="updateData">
    上报数据
</button>
1
2
3

在页面底部定义具体动作

<script>
    // 具体的执行方法,按钮会接收到一个btn参数,就是被点击按钮的对象
    Method.updateData = (btn) => {
        // 业务处理
        setTimeout(() => {
            // 重置按钮
            Eadmin.button.reset(btn);
            // 消息提醒,根据具体业务来
            Eadmin.message.success({
                content : '数据上报成功'
            });
        }, 1000);
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

还有一种场景是需要点击按钮提交表单的,则需要在按钮上增加 data-submit 属性,框架会自动进行异步表单提交动作,如果按钮上还有 data-loading 属性,则会自动增加上loading效果

TIP

data-do 属性和 data-submit 属性不可同时使用,因为如果按钮含有 data-submit 属性会自动进行表单提交的动作,忽略 data-do 指向的点击动作

<form action="submit.php">
    <button data-loading="数据保存中..." data-submit>提交</button>
</form>
1
2
3

# 原生提交表单

某些情况下希望使用浏览器默认的方式提交表单,则在待提交的表单上增加 data-native 属性即可

<!-- 此时将会使用默认方式提交表单 -->
<form action="submit.php" data-native method="POST">
    <button data-loading="数据保存中..." data-submit>提交</button>
</form>
1
2
3
4

# 表单提交成功回调

如果希望在表单提交成功后有自己的额外的逻辑处理,则在表单上增加 data-callback 属性即可

<form action="submit.php" data-callback="submitSuccess">
    <button data-loading="数据保存中..." data-submit>提交</button>
</form>

<script>
    // 表单提交成功回调会将被点击的按钮对象注入进去
    Method.submitSuccess = (obj) => {
        console.log(1);
    }
</script>
1
2
3
4
5
6
7
8
9
10

# 延迟按钮

增加属性 data-delay 为按钮增加延迟时间,单位 ,延迟期间按钮不可被点击,例如注册时倒计时10秒后按钮可被点击等等场景

<button data-delay="5">
    确定
</button>
1
2
3

# Icon 图标

EAdmin内置了 font-awesome 的图标库,应用在所有需要用到图标的地方

图标库