Improved docs

pull/41/head
cagataycivici 2019-07-22 17:15:32 +03:00
parent c9d765b78d
commit bd8d3c7869
2 changed files with 47 additions and 23 deletions

View File

@ -164,17 +164,28 @@ import OrderList from 'primevue/orderlist';
</a>
<CodeHighlight>
<template v-pre>
&lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
&lt;template #header&gt;
List of Cars
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;OrderList&lt;/h1&gt;
&lt;p&gt;OrderList is used to managed the order of a collection.&lt;/p&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/OrderList&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;OrderList v-model="cars" listStyle="height:auto" dataKey="vin"&gt;
&lt;template #header&gt;
List of Cars
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/OrderList&gt;
&lt;/div&gt;
&lt;/div&gt;
</template>
</CodeHighlight>

View File

@ -220,20 +220,33 @@ import PickList from 'primevue/picklist';
</a>
<CodeHighlight>
<template v-pre>
&lt;PickList v-model="cars" dataKey="vin"&gt;
&lt;template #sourceHeader&gt;
Available
&lt;/template&gt;
&lt;template #targetHeader&gt;
Selected
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
&lt;div&gt;
&lt;div class="content-section introduction"&gt;
&lt;div class="feature-intro"&gt;
&lt;h1&gt;PickList&lt;/h1&gt;
&lt;p&gt;PickList is used to reorder items between different lists.&lt;/p&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/PickList&gt;
&lt;/div&gt;
&lt;div class="content-section implementation"&gt;
&lt;PickList v-model="cars" listStyle="height:342px" dataKey="vin"&gt;
&lt;template #sourceHeader&gt;
Available
&lt;/template&gt;
&lt;template #targetHeader&gt;
Selected
&lt;/template&gt;
&lt;template #item="slotProps"&gt;
&lt;div class="p-caritem"&gt;
&lt;img :src="'demo/images/car/' + slotProps.item.brand + '.png'"&gt;
&lt;div&gt;&#123;&#123;slotProps.item.brand&#125;&#125; - &#123;&#123;slotProps.item.year&#125;&#125; - &#123;&#123;slotProps.item.color&#125;&#125;&lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
&lt;/PickList&gt;
&lt;/div&gt;
&lt;PickListDoc /&gt;
&lt;/div&gt;
</template>
</CodeHighlight>