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/)