常用样式说明

三角形

元素追加class样式依次为:triangle-inner-top-left, triangle-inner-top-right, triangle-inner-bottom-left, triangle-inner-bottom-right

可通过控制--triangle-background-color变量值来改变三角形颜色，或自定义修改css来控制三角形的颜色

可通过控制--triangle-inner-size变量值改变大小

应用实例

                <div style="display: flex;justify-content: space-between;align-items: center;padding: 20px;">
                    <div class="triangle-inner-top-left" style="width: 20%;height: 40px;"></div>
                    <div class="triangle-inner-top-right" style="width: 20%;height: 40px;"></div>
                    <div class="triangle-inner-bottom-left" style="width: 20%;height: 40px;"></div>
                    <div class="triangle-inner-bottom-right" style="width: 20%;height: 40px;"></div>
                </div>
            

方向三角型追加class样式依次为:triangle-direction-left, triangle-direction-right, triangle-direction-top, triangle-direction-bottom

可通过控制--triangle-background-color变量来修改三角形颜色，或自定义修改css来控制三角形的颜色

可通过控制--triangle-direction-size变量值改变大小

应用实例

                <div style="display: flex;justify-content: space-between;align-items: center;padding: 50px;">
                    <div class="triangle-direction-left"></div>
                    <div class="triangle-direction-right"></div>
                    <div class="triangle-direction-top"></div>
                    <div class="triangle-direction-bottom"></div>
                </div>

外部三角型对话气泡追加class样式依次为:triangle-outside-left, triangle-outside-right, triangle-outside-top, triangle-outside-bottom

可通过控制--triangle-border-color变量来修改三角形边框颜色，或自定义修改css来控制三角形的边框颜色

应用实例

                <div style="display: flex;justify-content: space-between;align-items: center;padding: 20px;">
                    <div class="triangle-outside-right"></div>
                    <div class="triangle-outside-left"></div>
                    <div class="triangle-outside-top"></div>
                    <div class="triangle-outside-bottom"></div>
                </div>

默认内容外边距

通用布局内外边距:--default-padding-s,--default-padding-m,--default-padding-l,--default-margin-s,--default-margin-m,--default-margin-l

便于统一修改，以及统一界面间距的统一性

默认字体标题

通用默认字体标题:-title-font-level-first,title-font-level-two,itle-font-level-three,title-font-level-four,title-font-text

便于统一修改，以及统一界面字体大小

应用实例

                <div style="display: flex;justify-content: space-between;align-items: center;padding: 20px;">
                    <div class="title-font-level-first">一级标题</div>
                    <div class="title-font-level-two">二级标题</div>
                    <div class="title-font-level-three">三级标题</div>
                    <div class="title-font-level-four">四级标题</div>
                    <div class="title-font-text">正文内容</div>
                </div>
            

默认内容显示/隐藏

通用class: 隐藏default-content-hide，显示default-content-show

默认多行溢出

通用class: 一行溢出default-one-line-overflow，两行溢出default-two-line-overflow，三行溢出default-three-line-overflow

应用实例

    <div style="display: flex;justify-content: space-between;align-items: baseline;padding: 20px;">
        <div class="default-one-line-overflow">（一行溢出）在JavaScript和Vue.js的世界里，实现个性化电路图或流程图是一项常见的需求，特别是在数据可视化、工程设计或教学应用中。关系图（relation-graph）插件是这类任务的一个实用工具，它允许开发者创建交互式、可定制的图表。下面将详细介绍如何使用这个插件以及其核心特性。</div>
        <div class="default-two-line-overflow">（两行溢出）在JavaScript和Vue.js的世界里，实现个性化电路图或流程图是一项常见的需求，特别是在数据可视化、工程设计或教学应用中。关系图（relation-graph）插件是这类任务的一个实用工具，它允许开发者创建交互式、可定制的图表。下面将详细介绍如何使用这个插件以及其核心特性。</div>
        <div class="default-three-line-overflow">（三行溢出）在JavaScript和Vue.js的世界里，实现个性化电路图或流程图是一项常见的需求，特别是在数据可视化、工程设计或教学应用中。关系图（relation-graph）插件是这类任务的一个实用工具，它允许开发者创建交互式、可定制的图表。下面将详细介绍如何使用这个插件以及其核心特性。</div>
    </div>