Gauss

Appearance

通用样式 ​

框架内部集成了一些通用样式，可对 element-plus 组件样式覆盖

ElStep ​

导入 step 样式文件，在 el-steps 标签上添加 class 类 gauss-steps--horizontal 即可。

vue
<template>
    <el-steps align-center finish-status="success" class="gauss-steps--horizontal">
        <el-step title="提交表单" description="已于12月21日提交" />
        <el-step title="电子发票" description="预计1～3个工作日" />
        <el-step title="发票已邮寄" description="电子发票开出后7个工作日内联系" />
        <el-step title="完成" />
    </el-steps>
</template>
<script setup>
import '@gauss/prime/es/styles/element/step'
</script>
<template>
    <el-steps align-center finish-status="success" class="gauss-steps--horizontal">
        <el-step title="提交表单" description="已于12月21日提交" />
        <el-step title="电子发票" description="预计1～3个工作日" />
        <el-step title="发票已邮寄" description="电子发票开出后7个工作日内联系" />
        <el-step title="完成" />
    </el-steps>
</template>
<script setup>
import '@gauss/prime/es/styles/element/step'
</script>

最终效果：

Frame

ElTabs border-card 模式样式 ​

导入 tabs-border-card 样式文件，在 el-tabs 标签上添加 class 类 gauss-tabs-border-card 即可。

vue
<template>
    <el-tabs type="border-card" class="gauss-tabs-border-card">
        <el-tab-pane label="订单信息"> 订单信息 </el-tab-pane>
        <el-tab-pane label="商品信息"> 商品信息 </el-tab-pane>
        <el-tab-pane label="订单记录"> 订单记录 </el-tab-pane>
        <el-tab-pane label="发货记录"> 发货记录 </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import '@gauss/prime/es/styles/element/tabs-border-card'
</script>
<template>
    <el-tabs type="border-card" class="gauss-tabs-border-card">
        <el-tab-pane label="订单信息"> 订单信息 </el-tab-pane>
        <el-tab-pane label="商品信息"> 商品信息 </el-tab-pane>
        <el-tab-pane label="订单记录"> 订单记录 </el-tab-pane>
        <el-tab-pane label="发货记录"> 发货记录 </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import '@gauss/prime/es/styles/element/tabs-border-card'
</script>

最终效果：

Frame

Copyright © 2023-present Gauss