6.1 Introduction / 簡介
在Shopware 5的Responsive主題中锌雀，我們?yōu)橛脩糸_發(fā)簡單的模板或者插件 提供了大量的可重復(fù)使用的組件（components）订框。利用這些默認插件衫樊，用戶可以通過一些簡單的HTML代碼創(chuàng)建按鈕（button）刷袍，面板（panel），警示信息（alert messages）以及其他一些UI元素迅办。你可以將這些代碼片段寫在你的*.tpl文件中蛔添。
為了幫助用戶更好的認出這些模板組件（template components），我們實施了一種parent-child的命名方式姻报。比如說：panel類作為父類己英，所有與他相關(guān)的子類都加上前綴panel--比如panel--title或者panel--body。如果你對Bootstrap之類的框架非常熟悉的話吴旋，你就會發(fā)現(xiàn)Shopware的組件甚至更佳簡單损肛。本文將會對較為重要的一些組件進行介紹。如果你想要了解更多關(guān)于Shopware的UI組件荣瑟，請點擊這里
6.2 Quick examples / 簡單舉例
6.2.1 Buttons / 按鈕
舉例：創(chuàng)建一個帶有不同樣式的按鈕
<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 / 面板**
舉例：創(chuàng)建兩個不同樣式的面板：
<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 / 圖標**
舉例：創(chuàng)建網(wǎng)頁字體圖標（webfont icon）
<i class="icon--basket"></i>```
就像之前說到過的那樣治拿，Shopware的Responsive主題提供了許多網(wǎng)頁字體圖標。
用戶可以同時在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 / 警告窗口**
舉例：創(chuàng)建帶樣式的警示窗口（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) 提示警告（黃色）```
\* 小記：為了外觀的統(tǒng)一劫谅，通常這四種里面必選一種
**6.2.5 Modal boxes / 盒子模型**
創(chuàng)建一個`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>```
* 小記：這些內(nèi)聯(lián)樣式是由jQuery插件生成的（jquery.modal.js）
6.2.6 Product boxes / 產(chǎn)品盒子
產(chǎn)品列表創(chuàng)建一個產(chǎn)品盒子（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>```
產(chǎn)品盒子的類型有：
box--basic: Default product box 默認的產(chǎn)品盒子
box--big-image: Product box with focus on a larger image 專為大圖片設(shè)計的產(chǎn)品盒子
box--minimal: Smaller product box with less information 信息較少的小產(chǎn)品盒子
**6.2.7 Product sliders / 產(chǎn)品滑動容器**
創(chuàng)建一個包含多個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>產(chǎn)品滑動框（帶有product-slider--container和product-slider--arrow```的<div>）可以是橫向或者是縱向：
is--horizontal: Horizontal slider alignment 橫向
is--vertical: Vertical slider alignment 縱向```
> 注意：實際上實現(xiàn)滑動效果的是來自jQuery插件，用的屬性叫做`data-product-slider="true"`不皆，如果想要做更深層次的改變贯城，比如想改變動畫速度，請詳細看```jquery.product-slider.js```（位于 Responsive/frontend/_public/src/js/）的介紹霹娄。
##6.3 Complete component overview / 所有組件概覽
你可以在shopware的官網(wǎng)上找到[所有組件的介紹](https://developers.shopware.com/styletile/)