vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

alias for images

pull/3449/head
Tuğçe Küçükoğlu 2022-12-26 19:20:31 +03:00
parent 38b5526bab
commit c3b08bd370
20 changed files with 37 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/autocomplete/index.vue
View File

@ -22,7 +22,7 @@
<AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
<div>{{ slotProps.item.label }}</div> <div>{{ slotProps.item.label }}</div>
</div> </div>
</template> </template>
@ -32,7 +32,7 @@
<AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-spinner" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" optionLabel="name" forceSelection> <AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-spinner" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" optionLabel="name" forceSelection>
<template #item="slotProps"> <template #item="slotProps">
<div class="country-item"> <div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />
<div>{{ slotProps.item.name }}</div> <div>{{ slotProps.item.name }}</div>
</div> </div>
</template> </template>

4
pages/button/ButtonDoc.vue
View File

@ -136,11 +136,11 @@ import Button from 'primevue/button';
<p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p> <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button type="button" class="px-3"&gt; &lt;Button type="button" class="px-3"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt; &lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem"/&gt;
&lt;/Button&gt; &lt;/Button&gt;
&lt;Button type="button" class="p-button-outlined p-button-success"&gt; &lt;Button type="button" class="p-button-outlined p-button-success"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt; &lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1.5rem" /&gt;
&lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt; &lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt; &lt;/Button&gt;

2
pages/cascadeselect/CascadeSelectDoc.vue
View File

@ -118,7 +118,7 @@ data() &#123;
:optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt; :optionGroupChildren="['states', 'cities']" style="minWidth: 14rem"&gt;
&lt;template #option="slotProps"&gt; &lt;template #option="slotProps"&gt;
&lt;div class="country-item"&gt; &lt;div class="country-item"&gt;
&lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt; &lt;img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
&lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt; &lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
&lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt; &lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
&lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt; &lt;span&gt;&#123;&#123;slotProps.option.cname || slotProps.option.name&#125;&#125;&lt;/span&gt;

2
pages/cascadeselect/index.vue
View File

@ -22,7 +22,7 @@
<CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City"> <CascadeSelect v-model="selectedCity2" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" style="min-width: 14rem" placeholder="Select a City">
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img v-if="slotProps.option.states" src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /> <img v-if="slotProps.option.states" src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i> <i v-if="slotProps.option.cities" class="pi pi-compass mr-2"></i>
<i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i> <i v-if="slotProps.option.cname" class="pi pi-map-marker mr-2"></i>
<span>{{ slotProps.option.cname || slotProps.option.name }}</span> <span>{{ slotProps.option.cname || slotProps.option.name }}</span>

4
pages/datatable/Filter.vue
View File

@ -46,7 +46,7 @@
</Column> </Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem"> <Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">
@ -169,7 +169,7 @@
</Column> </Column>
<Column header="Country" filterField="country.name" style="min-width: 12rem"> <Column header="Country" filterField="country.name" style="min-width: 12rem">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">

6
pages/datatable/RowGroup.vue
View File

@ -17,7 +17,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column> <Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px"> <Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>
@ -61,7 +61,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="country" header="Country"> <Column field="country" header="Country">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>
@ -100,7 +100,7 @@
<Column field="name" header="Name"></Column> <Column field="name" header="Name"></Column>
<Column field="country" header="Country"> <Column field="country" header="Country">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>

2
pages/datatable/Scroll.vue
View File

@ -104,7 +104,7 @@
<Column field="name" header="Name" style="min-width: 200px"></Column> <Column field="name" header="Name" style="min-width: 200px"></Column>
<Column field="country" header="Country" style="min-width: 200px"> <Column field="country" header="Country" style="min-width: 200px">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
</Column> </Column>

4
pages/datatable/State.vue
View File

@ -36,7 +36,7 @@
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
<template #filter> <template #filter>
@ -102,7 +102,7 @@
</Column> </Column>
<Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%"> <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="width: 25%">
<template #body="slotProps"> <template #body="slotProps">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" />
<span class="image-text">{{ slotProps.data.country.name }}</span> <span class="image-text">{{ slotProps.data.country.name }}</span>
</template> </template>
<template #filter> <template #filter>

2
pages/datatable/index.vue
View File

@ -54,7 +54,7 @@
</Column> </Column>
<Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem"> <Column field="country.name" header="Country" sortable filterMatchMode="contains" style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel }"> <template #filter="{ filterModel }">

2
pages/dock/index.vue
View File

@ -362,7 +362,7 @@ export default {
width: 100%; width: 100%;
height: 450px; height: 450px;
position: relative; position: relative;
background-image: url('../../assets/images/dock/window.jpg'); background-image: url('@/assets/images/dock/window.jpg');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
z-index: 1; z-index: 1;

6
pages/dropdown/index.vue
View File

@ -25,7 +25,7 @@
<Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"> <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
@ -35,7 +35,7 @@
<Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true"> <Dropdown v-model="selectedCountry" :options="countries" optionLabel="name" :filter="true" placeholder="Select a Country" :showClear="true">
<template #value="slotProps"> <template #value="slotProps">
<div v-if="slotProps.value" class="country-item country-item-value"> <div v-if="slotProps.value" class="country-item country-item-value">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.value.code.toLowerCase()" />
<div>{{ slotProps.value.name }}</div> <div>{{ slotProps.value.name }}</div>
</div> </div>
<span v-else> <span v-else>
@ -44,7 +44,7 @@
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>

2
pages/filterservice/index.vue
View File

@ -31,7 +31,7 @@
</Column> </Column>
<Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions"> <Column header="Country" filterField="country.name" :filterMatchModeOptions="matchModeOptions">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
<template #filter="{ filterModel, filterCallback }"> <template #filter="{ filterModel, filterCallback }">

4
pages/landing/ThemeSection.vue
View File

@ -44,7 +44,7 @@
</Column> </Column>
<Column field="country.name" header="Country" sortable style="min-width: 14rem"> <Column field="country.name" header="Country" sortable style="min-width: 14rem">
<template #body="{ data }"> <template #body="{ data }">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + data.country.code" width="30" />
<span class="image-text">{{ data.country.name }}</span> <span class="image-text">{{ data.country.name }}</span>
</template> </template>
</Column> </Column>
@ -86,8 +86,8 @@
</template> </template>
<script> <script>
import CustomerService from '../../service/CustomerService';
import { FilterMatchMode, FilterOperator } from 'primevue/api'; import { FilterMatchMode, FilterOperator } from 'primevue/api';
import CustomerService from '../../service/CustomerService';
export default { export default {
emits: ['table-theme-change'], emits: ['table-theme-change'],

4
pages/listbox/index.vue
View File

@ -22,7 +22,7 @@
<Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width: 15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px"> <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width: 15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
@ -32,7 +32,7 @@
<Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width: 15rem" filterPlaceholder="Search"> <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width: 15rem" filterPlaceholder="Search">
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>

2
pages/menubar/index.vue
View File

@ -17,7 +17,7 @@
<div class="card"> <div class="card">
<Menubar :model="items"> <Menubar :model="items">
<template #start> <template #start>
<img alt="logo" src="../../assets/images/logo.svg" height="40" class="mr-2" /> <img alt="logo" src="@/assets/images/logo.svg" height="40" class="mr-2" />
</template> </template>
<template #end> <template #end>
<InputText placeholder="Search" type="text" /> <InputText placeholder="Search" type="text" />

6
pages/multiselect/index.vue
View File

@ -25,7 +25,7 @@
<MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities"> <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
<template #optiongroup="slotProps"> <template #optiongroup="slotProps">
<div class="flex align-items-center country-item"> <div class="flex align-items-center country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
<div>{{ slotProps.option.label }}</div> <div>{{ slotProps.option.label }}</div>
</div> </div>
</template> </template>
@ -35,14 +35,14 @@
<MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom"> <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
<template #value="slotProps"> <template #value="slotProps">
<div v-for="option of slotProps.value" :key="option.code" class="country-item country-item-value"> <div v-for="option of slotProps.value" :key="option.code" class="country-item country-item-value">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + option.code.toLowerCase()" />
<div>{{ option.name }}</div> <div>{{ option.name }}</div>
</div> </div>
<template v-if="!slotProps.value || slotProps.value.length === 0"> Select Countries </template> <template v-if="!slotProps.value || slotProps.value.length === 0"> Select Countries </template>
</template> </template>
<template #option="slotProps"> <template #option="slotProps">
<div class="country-item"> <div class="country-item">
<img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" /> <img src="@/assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" />
<div>{{ slotProps.option.name }}</div> <div>{{ slotProps.option.name }}</div>
</div> </div>
</template> </template>

10
pages/setup/index.vue
View File

@ -332,31 +332,31 @@ app.use(PrimeVue, {
<tr> <tr>
<th> <th>
<div class="flex align-items-center"> <div class="flex align-items-center">
<img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" /> <img src="@/assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem" class="mr-2" />
Edge Edge
</div> </div>
</th> </th>
<th> <th>
<div class="flex align-items-center"> <div class="flex align-items-center">
<img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" /> <img src="@/assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem" class="mr-2" />
Firefox Firefox
</div> </div>
</th> </th>
<th> <th>
<div class="flex align-items-center"> <div class="flex align-items-center">
<img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" /> <img src="@/assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem" class="mr-2" />
Chrome Chrome
</div> </div>
</th> </th>
<th> <th>
<div class="flex align-items-center"> <div class="flex align-items-center">
<img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" /> <img src="@/assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem" class="mr-2" />
Safari Safari
</div> </div>
</th> </th>
<th> <th>
<div class="flex align-items-center"> <div class="flex align-items-center">
<img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" /> <img src="@/assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem" class="mr-2" />
Opera Opera
</div> </div>
</th> </th>

2
pages/splitbutton/SplitButtonDoc.vue
View File

@ -96,7 +96,7 @@ export default {
<pre v-code><code> <pre v-code><code>
&lt;SplitButton :model="items" class="bg-primary border-round"&gt; &lt;SplitButton :model="items" class="bg-primary border-round"&gt;
&lt;Button @click="save"&gt; &lt;Button @click="save"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" /&gt; &lt;img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" /&gt;
&lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt; &lt;span class="ml-2 flex align-items-center font-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt; &lt;/Button&gt;
&lt;/SplitButton&gt; &lt;/SplitButton&gt;

2
pages/splitbutton/index.vue
View File

@ -83,7 +83,7 @@
<h5>Templating</h5> <h5>Templating</h5>
<SplitButton :model="items" class="bg-primary border-round"> <SplitButton :model="items" class="bg-primary border-round">
<Button @click="save"> <Button @click="save">
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1rem" /> <img alt="logo" src="@/assets/images/logo.svg" style="width: 1rem" />
<span class="ml-2 flex align-items-center font-bold">PrimeVue</span> <span class="ml-2 flex align-items-center font-bold">PrimeVue</span>
</Button> </Button>
</SplitButton> </SplitButton>

4
pages/theming/index.vue
View File

@ -10,7 +10,7 @@
<p>Choose from a variety of themes or develop your own theme easily.</p> <p>Choose from a variety of themes or develop your own theme easily.</p>
<h5>Architecture</h5> <h5>Architecture</h5>
<img alt="Architecture" src="../../assets/images/architecture.jpg" class="architecture-image" /> <img alt="Architecture" src="@/assets/images/architecture.jpg" class="architecture-image" />
<p> <p>
PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into core and theme. Core resides inside PrimeVue is a design agnostic library so unlike other UI libraries it does not enforce a certain styling such as material or bootstrap. In order to achieve this, styling has been separated into core and theme. Core resides inside
PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings and margins. PrimeVue to implement the structure of the components such as positioning whereas theme brings the colors, paddings and margins.
@ -45,7 +45,7 @@
</div> </div>
<a href="http://www.primefaces.org/designer/primevue" class="designer-image"> <a href="http://www.primefaces.org/designer/primevue" class="designer-image">
<img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" /> <img alt="PrimeVue Designer" src="@/assets/images/primevue-designer.jpg" style="width: 100%" />
</a> </a>
<h5>Scaling</h5> <h5>Scaling</h5>