6.1 Introduction / 简介

在Shopware 5的Responsive主题中，我们为用户开发简单的模板或者插件 提供了大量的可重复使用的组件（components）。利用这些默认插件，用户可以通过一些简单的HTML代码创建按钮（button），面板（panel），警示信息（alert messages）以及其他一些UI元素。你可以将这些代码片段写在你的*.tpl文件中。
为了帮助用户更好的认出这些模板组件（template components），我们实施了一种parent-child的命名方式。比如说：panel类作为父类，所有与他相关的子类都加上前缀panel--比如panel--title或者panel--body。如果你对Bootstrap之类的框架非常熟悉的话，你就会发现Shopware的组件甚至更佳简单。本文将会对较为重要的一些组件进行介绍。如果你想要了解更多关于Shopware的UI组件，请点击这里

6.2 Quick examples / 简单举例

6.2.1 Buttons / 按钮
举例：创建一个带有不同样式的按钮

<a class="btn">Button</a>
<a class="btn is--primary">Primary Button</a>
<a class="btn is--secondary">Secondary Button</a>

更多的可选样式如下：

is--large: larger button height               高度更大
is--small: smaller button height              高度更小
is--full: button with 100% width              宽度为100%
is--center: button with centered text         按钮字体居中
is--icon-left: button with icon on the left   图标放在按钮左边
is--icon-right: button with icon on the right 图标放在按钮右边```
\* 该组件也可以被用在HTML的`<button>`元素中


**6.2.2 Panels / 面板**
举例：创建两个不同样式的面板：

<div class="panel has--border is--rounded">
<div class="panel--title is--underline">
Panel Title
</div>

<div class="panel--body is--wide">
    Panel Content
</div>

</div>```
更多的可选样式如下：

has--border: Panel with border          带边框
is--rounded: Panel with rounded corners 圆角```

**6.2.3 Icons / 图标**
举例：创建网页字体图标（webfont icon）

<i class="icon--basket"></i>```
就像之前说到过的那样，Shopware的Responsive主题提供了许多网页字体图标。

用户可以同时在button中使用icon，如下：

<a class="btn is--primary is--icon-left">
    <i class="icon--account"></i> Primary button with icon on the left
</a>```


**6.2.4 Alert messages / 警告窗口**
举例：创建带样式的警示窗口（alert message box）

<div class="alert is--success is--rounded">
<div class="alert--icon">

<i class="icon--element icon--check"></i>
</div>
<div class="alert--content">
Alert message text
</div>
</div>```

更多的可选样式如下：

is--success: Success message (green)  提示成功（绿色）
is--error: Error message (red)        提示出错（红色）
is--info: Info message (blue)         显示信息（蓝色）
is--warning: Warning message (yellow) 提示警告（黄色）``` 
\* 小记：为了外观的统一，通常这四种里面必选一种

**6.2.5 Modal boxes / 盒子模型**
创建一个`position:absolute`且位于中心的盒子模型（absolute and centered）。

<div class="js--modal sizing--content" style="width: 600px; height: auto; display: block; opacity: 1;">
<div class="header">
<div class="title">
Modal box title
</div>
</div>
<div class="content">
Modal box content
</div>

<div class="btn icon--cross is--small btn--grey modal--close">
</div>
</div>```
* 小记：这些内联样式是由jQuery插件生成的（jquery.modal.js）

6.2.6 Product boxes / 产品盒子
产品列表创建一个产品盒子（Product box）

<div class="product--box box--basic">
    <div class="box--content is--rounded">
        <div class="product--info">
            <a href="#" class="product--image">
                <!-- Article images -->
            </a>

            <div class="product--rating-container">
                <!-- Product rating stars -->
            </div>

            <a href="#" class="product--title" title="">
                Product title
            </a>

            <div class="product--description">
                Product description
            </div>

            <div class="product--price-info">
                <div class="price--unit">
                    <!-- Optional unit price -->
                </div>
                <div class="product--price">
                    <span class="price--default is--nowrap">
                        35,00 €
                    </span>
                </div>
            </div>

            <div class="product--actions">
                <!-- Product action links e.g. product compare -->
            </div>
        </div>
    </div>
</div>```
产品盒子的类型有：

box--basic: Default product box 默认的产品盒子
box--big-image: Product box with focus on a larger image 专为大图片设计的产品盒子
box--minimal: Smaller product box with less information 信息较少的小产品盒子

**6.2.7 Product sliders / 产品滑动容器**
创建一个包含多个product-boxes，且可以通过方向箭头滑动的容器。

<div class="product-slider" data-product-slider="true">

<!-- Product slider direction arrows -->
<a class="product-slider--arrow arrow--next is--horizontal"></a>
<a class="product-slider--arrow arrow--prev is--horizontal"></a>

<div class="product-slider--container is--horizontal">
    <div class="product-slider--item">
        <!-- Include of the product box -->
    </div>
</div>

</div>产品滑动框（带有product-slider--container和product-slider--arrow```的<div>）可以是横向或者是纵向：

is--horizontal: Horizontal slider alignment  横向
is--vertical: Vertical slider alignment      纵向```

> 注意：实际上实现滑动效果的是来自jQuery插件，用的属性叫做`data-product-slider="true"`，如果想要做更深层次的改变，比如想改变动画速度，请详细看```jquery.product-slider.js```（位于 Responsive/frontend/_public/src/js/）的介绍。

##6.3 Complete component overview / 所有组件概览
你可以在shopware的官网上找到[所有组件的介绍](https://developers.shopware.com/styletile/)