Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Submenu changes

Browse Source
This commit is contained in:
Bahadır Sofuoğlu
2022-11-07 14:56:17 +03:00
parent d9d56c8c1a
commit 4f477ec1f0
6 changed files with 92 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/uikit/Icons.vue
View File

@@ -7,35 +7,34 @@
<h5>Download</h5>
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
<pre v-code><code>
<pre v-code><code>
npm install primeicons --save
</code></pre>
<h5>Getting Started</h5>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>.
A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
<p>PrimeIcons use the <strong>pi pi-&#123;icon&#125;</strong> syntax such as <strong>pi pi-check</strong>. A standalone icon can be displayed using an element like <i>i</i> or <i>span</i></p>
<pre v-code><code>
<pre v-code><code>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
&lt;i class="pi pi-times"&gt;&lt;/i&gt;
</code></pre>
<i class="pi pi-check" style="margin-right: .5rem"></i>
<i class="pi pi-times"></i>
<i class="pi pi-check" style="margin-right: 0.5rem"></i>
<i class="pi pi-times"></i>
<h5>Size</h5>
<p>Size of the icons can easily be changed using font-size property.</p>
<pre v-code><code>
<pre v-code><code>
&lt;i class="pi pi-check"&gt;&lt;/i&gt;
</code></pre>
<i class="pi pi-check"></i>
<pre v-code><code>
<pre v-code><code>
&lt;i class="pi pi-check" style="font-size: 2rem"&gt;&lt;/i&gt;
</code></pre>
@@ -44,7 +43,7 @@ npm install primeicons --save
<h5>Spinning Animation</h5>
<p>Special pi-spin class applies continuous rotation to an icon.</p>
<pre v-code><code>
<pre v-code><code>
&lt;i class="pi pi-spin pi-spinner" style="font-size: 2rem"&gt;&lt;/i&gt;
</code></pre>
@@ -53,12 +52,12 @@ npm install primeicons --save
<h5>Constants</h5>
<p>PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.</p>
<pre v-code><code>
<pre v-code><code>
&lt;Menu :model="items" /&gt;
</code></pre>
<pre v-code.script><code>
<pre v-code.script><code>
import {PrimeIcons} from 'primevue/api';
export default {
@@ -90,53 +89,49 @@ export default {
<div class="grid icons-list text-center">
<div class="col-6 sm:col-4 lg:col-3 xl:col-2 pb-5" v-for="icon of filteredIcons" :key="icon.properties.name">
<i :class="'text-2xl mb-2 pi pi-' + icon.properties.name"></i>
<div>pi-{{icon.properties.name}}</div>
<div>pi-{{ icon.properties.name }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
icons: null,
filter: null
}
},
mounted() {
fetch('data/icons.json', { headers: { 'Cache-Control' : 'no-cache' } }).then(res => res.json())
.then(d => {
let icons = d.icons;
let data = icons.filter(value => {
return value.icon.tags.indexOf('deprecate') === -1;
});
data.sort((icon1, icon2) => {
if(icon1.properties.name < icon2.properties.name)
return -1;
else if(icon1.properties.name < icon2.properties.name)
return 1;
else
return 0;
});
<script setup>
import { ref, onMounted, computed } from 'vue';
const icons = ref(null);
const filter = ref(null);
this.icons = data;
onMounted(() => {
fetch('/data/icons.json', { headers: { 'Cache-Control': 'no-cache' } })
.then((res) => res.json())
.then((d) => {
let icons = d.icons;
let data = icons.filter((value) => {
return value.icon.tags.indexOf('deprecate') === -1;
});
},
computed: {
filteredIcons() {
if (this.filter)
return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
else
return this.icons;
}
data.sort((icon1, icon2) => {
if (icon1.properties.name < icon2.properties.name) return -1;
else if (icon1.properties.name > icon2.properties.name) return 1;
else return 0;
});
icons.value = data;
});
});
const filteredIcons = computed(() => {
if (filter.value) {
return icons.value.filter((icon) => {
return icon.properties.name.toLowerCase().indexOf(filter.value.toLowerCase()) > -1;
});
} else {
return icons.value;
}
}
});
</script>
<style lang="scss" scoped>
@import '../assets/demo/documentation.scss';
@import '@/assets/demo/documentation.scss';
.icons-list {
i {

16
src/views/uikit/Misc.vue
View File

@@ -46,11 +46,11 @@
<h4>Avatar</h4>
<h5>Avatar Group</h5>
<AvatarGroup class="mb-3">
<Avatar image="images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle"></Avatar>
<Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle"></Avatar>
<Avatar label="+2" shape="circle" size="large" :style="{ 'background-color': '#9c27b0', color: '#ffffff' }"></Avatar>
</AvatarGroup>
@@ -122,9 +122,9 @@
<h5>Image</h5>
<div class="flex align-items-center flex-column sm:flex-row">
<Chip label="Amy Elsner" image="images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
<Chip label="Amy Elsner" image="/images/avatar/amyelsner.png" class="mr-2 mb-2"></Chip>
<Chip label="Asiya Javayant" image="/images/avatar/asiyajavayant.png" class="mr-2 mb-2"></Chip>
<Chip label="Onyama Limba" image="/images/avatar/onyamalimba.png" class="mr-2 mb-2"></Chip>
</div>
</div>