6. Using the Responsive theme default components / 使用Responsive主题的默认插件

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 / 按钮
举例：创建一个带有不同样式的按钮

Button
Primary Button
Secondary Button

更多的可选样式如下：

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的``元素中


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

Panel Title

    Panel Content

```
更多的可选样式如下：

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

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

```
就像之前说到过的那样，Shopware的Responsive主题提供了许多网页字体图标。

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

     Primary button with icon on the left
```


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

Alert message text

```

更多的可选样式如下：

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）。

Modal box title

Modal box content

```
* 小记：这些内联样式是由jQuery插件生成的（jquery.modal.js）

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

    

        

            
                
            

            

                
            

            
                Product title
            

            

                Product description
            

            

                

                    
                
                

                    
                        35,00 €
                    
                
            

            

                
            
        
    
```
产品盒子的类型有：

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，且可以通过方向箭头滑动的容器。

产品滑动框（带有product-slider--container和product-slider--arrow```的

）可以是横向或者是纵向：

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