User Interface / Components / Buttons

按钮

我们在奥迪 CI 中加入了新的 React 组件来确保线上统一的外观。所有现有的 React 组件都可以在资源库中找到，奥迪将继续开发并添加到这个库中。

按钮可用于显示用户对操作选项的选择，并将这些选项分配到每个清晰的层次结构之中。通过奥迪品牌字体、图标或两者结合的形式作为按钮，连接到目标页面或触发操作。
按钮的配饰始终为黑色和白色，或透明的黑色/白色线框形式。

主按钮

黑色或白色填充色按钮用于页面上或视图中最重要的操作。

HTML

                        <button class="audi-btn">主按钮 <em class="aden">/ Primary Button</em></button>
                      

次级按钮

无填充色的黑色或白色线框按钮用于次级的操作。

HTML

                        <button class="audi-btn-s">次级按钮 <em class="aden"> / Secondary Button</em></button>
                      

文字按钮

文字按钮是一种不明显的互动按钮。一般为文字和箭头的组合。

文字按钮 / Text Button

HTML

                      <div class="textbtn">文字按钮 <em class="aden"> / Text Button</em> <em class="fa fa-angle-right"></em></div>
                    

系统图标按钮

系统图标按钮用于触发基础的系统交互（例如保存、打印或下载等）。系统图标按钮是透明的，推荐在没有标签的情况下使用。

HTML

                        <div class="vstar"></div>
                      

浮动按钮

浮动按钮可以用于任何需要在界面上被突出显示的操作。它在屏幕中有一个固定的位置。根据实际操作，可以通过用户交互自动隐藏或显示。

HTML

                        <div class="floatbtn"></div>
                      

加长且固定的主按钮

和主按钮一样，加长且固定的主按钮可以用于操作页面或视图的最重要功能。与主按钮不同的是，它被放置在一个固定的位置，并在屏幕的底部边缘处重叠，一般用于小屏幕的设计。

HTML

                        <button class="audi-btn audi-btn-lg">加长且固定的主按钮    <em class="aden"> / Stretched and Sticky Primary Button</em></button>
                      

请注意：所有按钮的文字需使用华康金刚黑水平拉伸 5%/ Audi Type Wide Normal 字体。

禁用事项

同一层级上不得应用过多的按钮

同一个界面中不得应用多个主按钮

禁用状态下的按钮不得放在红色背景上

继续了解

卡片

品牌热线

联系我们

稳私条款| 法律声明

传播媒介

品牌合作

视频尾版

品牌空间

品牌礼品

经销商传播