<template>
    <div class="content">
        <e-row :gutter="24">
            <!-- 基本用法 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>基本用法</span>
                    </div>
                    <div>
                        <e-row>
                            <e-button>默认按钮</e-button>
                            <e-button type="primary">主要按钮</e-button>
                            <e-button type="success">成功按钮</e-button>
                            <e-button type="info">信息按钮</e-button>
                            <e-button type="warning">警告按钮</e-button>
                            <e-button type="danger">危险按钮</e-button>
                        </e-row>

                        <e-row>
                            <e-button plain>朴素按钮</e-button>
                            <e-button type="primary" plain>主要按钮</e-button>
                            <e-button type="success" plain>成功按钮</e-button>
                            <e-button type="info" plain>信息按钮</e-button>
                            <e-button type="warning" plain>警告按钮</e-button>
                            <e-button type="danger" plain>危险按钮</e-button>
                        </e-row>

                        <e-row>
                            <e-button round>圆角按钮</e-button>
                            <e-button type="primary" round>主要按钮</e-button>
                            <e-button type="success" round>成功按钮</e-button>
                            <e-button type="info" round>信息按钮</e-button>
                            <e-button type="warning" round>警告按钮</e-button>
                            <e-button type="danger" round>危险按钮</e-button>
                        </e-row>

                        <e-row>
                            <e-button icon="el-icon-search" circle></e-button>
                            <e-button type="primary" icon="el-icon-edit" circle></e-button>
                            <e-button type="success" icon="el-icon-check" circle></e-button>
                            <e-button type="info" icon="el-icon-message" circle></e-button>
                            <e-button type="warning" icon="el-icon-star-off" circle></e-button>
                            <e-button type="danger" icon="el-icon-delete" circle></e-button>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
            <!-- 禁用状态 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>禁用状态</span>
                    </div>
                    <div>
                        <e-row>
                            <e-button disabled>默认按钮</e-button>
                            <e-button type="primary" disabled>主要按钮</e-button>
                            <e-button type="success" disabled>成功按钮</e-button>
                            <e-button type="info" disabled>信息按钮</e-button>
                            <e-button type="warning" disabled>警告按钮</e-button>
                            <e-button type="danger" disabled>危险按钮</e-button>
                            </e-row>

                            <e-row>
                            <e-button plain disabled>朴素按钮</e-button>
                            <e-button type="primary" plain disabled>主要按钮</e-button>
                            <e-button type="success" plain disabled>成功按钮</e-button>
                            <e-button type="info" plain disabled>信息按钮</e-button>
                            <e-button type="warning" plain disabled>警告按钮</e-button>
                            <e-button type="danger" plain disabled>危险按钮</e-button>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
            <!-- 文字按钮 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>文字按钮</span>
                    </div>
                    <div>
                        <e-button type="text">文字按钮</e-button>
                        <e-button type="text" disabled>文字按钮</e-button>
                    </div>
                </e-card>
            </e-col>
            <!-- 图标按钮 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>图标按钮</span>
                    </div>
                    <div>
                        <e-button type="primary" icon="el-icon-edit"></e-button>
                        <e-button type="primary" icon="el-icon-share"></e-button>
                        <e-button type="primary" icon="el-icon-delete"></e-button>
                        <e-button type="primary" icon="el-icon-search">搜索</e-button>
                        <e-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></e-button>
                    </div>
                </e-card>
            </e-col>
            <!-- 按钮组 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>按钮组</span>
                    </div>
                    <div>
                        <e-button-group>
                            <e-button type="primary" icon="el-icon-arrow-left">上一页</e-button>
                            <e-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></e-button>
                            </e-button-group>
                            <e-button-group>
                            <e-button type="primary" icon="el-icon-edit"></e-button>
                            <e-button type="primary" icon="el-icon-share"></e-button>
                            <e-button type="primary" icon="el-icon-delete"></e-button>
                        </e-button-group>
                    </div>
                </e-card>
            </e-col>
            <!-- 加载中 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>加载中</span>
                    </div>
                    <div>
                        <e-button type="primary" :loading="true">加载中</e-button>
                    </div>
                </e-card>
            </e-col>
            <!-- 不同尺寸 -->
            <e-col :span="24" class="box-card">
                <e-card shadow="always" :body-style="bodyStyle">
                    <div slot="header" class="clearfix">
                        <span>不同尺寸</span>
                    </div>
                    <div>
                        <e-row>
                            <e-button>默认按钮</e-button>
                            <e-button size="medium">中等按钮</e-button>
                            <e-button size="small">小型按钮</e-button>
                            <e-button size="mini">超小按钮</e-button>
                        </e-row>
                        <e-row>
                            <e-button round>默认按钮</e-button>
                            <e-button size="medium" round>中等按钮</e-button>
                            <e-button size="small" round>小型按钮</e-button>
                            <e-button size="mini" round>超小按钮</e-button>
                        </e-row>
                    </div>
                </e-card>
            </e-col>
        </e-row>
    </div>
</template>
<script>

export default {
    components: {},
    data() {
        return {
        }
    },
    mounted() {
    },
    methods: {
    }
}
</script>
  
<style>
.marginLeft {
    margin-left: 10px
}

.content {
    height: 100%;
    padding: 30px;
    background: #fff;
}

.block {
    display: inline-block;
    margin-left: 10px;
}

.box-card .el-col {
    margin-bottom: 10px;
}
.el-row{
    margin-bottom: 10px;
}
</style>
