Implemented Icons
cagataycivici
parent
aba73e5e50
commit
c52dc30f3f
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,7 @@
|
|||
<transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
|
||||
<ul v-if="themesMenuVisible">
|
||||
<li class="topbar-submenu-header">THEMING</li>
|
||||
<li><router-link to="/icons" @click.native="hideThemesMenu()"><i className="pi pi-fw pi-search"/><span>Icons</span></router-link></li>
|
||||
<li class="topbar-submenu-header">FREE THEMES</li>
|
||||
<li><a href="#" @click="changeTheme($event, 'nova-light', false)"><img src="./assets/images/layouts/themeswitcher-nova-light.png" alt="Nova Light" /><span>Nova Light</span></a></li>
|
||||
<li><a @click="changeTheme($event, 'nova-dark', false)"><img src="./assets/images/layouts/themeswitcher-nova-dark.png" alt="Nova Dark" /><span>Nova Dark</span></a></li>
|
||||
|
|
@ -62,7 +63,7 @@ export default {
|
|||
this.darkDemoStyle = null;
|
||||
}
|
||||
|
||||
this.themesMenuVisible = false;
|
||||
this.hideThemesMenu();
|
||||
event.preventDefault();
|
||||
},
|
||||
toggleThemesMenu(event) {
|
||||
|
|
@ -81,7 +82,7 @@ export default {
|
|||
if (!this.themesMenuOutsideClickListener) {
|
||||
this.themesMenuOutsideClickListener = (event) => {
|
||||
if (this.themesMenuVisible && this.isOutsideOfThemesMenuClicked(event)) {
|
||||
this.themesMenuVisible = false;
|
||||
this.hideThemesMenu();
|
||||
}
|
||||
};
|
||||
document.addEventListener('click', this.themesMenuOutsideClickListener);
|
||||
|
|
@ -96,6 +97,9 @@ export default {
|
|||
isOutsideOfThemesMenuClicked(event) {
|
||||
return !(DomHandler.hasClass(event.target, 'themes-menu-link') || this.themesMenuElement.isSameNode(event.target) || this.themesMenuElement.contains(event.target));
|
||||
},
|
||||
hideThemesMenu() {
|
||||
this.themesMenuVisible = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -118,6 +118,7 @@ body {
|
|||
padding-bottom: 8px;
|
||||
border-bottom: 4px solid transparent;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
@include transition(border-color .2s);
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,11 @@ export default new Router({
|
|||
name: 'support',
|
||||
component: () => import('./views/support/Support.vue')
|
||||
},
|
||||
{
|
||||
path: '/icons',
|
||||
name: 'icons',
|
||||
component: () => import('./views/icons/Icons.vue')
|
||||
},
|
||||
{
|
||||
path: '/accordion',
|
||||
name: 'accordion',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,97 @@
|
|||
<template>
|
||||
<div class="icons-page">
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Icons</h1>
|
||||
<p>PrimeReact components internally use <a href="https://github.com/primefaces/primeicons">PrimeIcons</a> library, the official icons suite from <a href="https://www.primetek.com.tr">PrimeTek</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<h3 style="margin-top: 0">Download</h3>
|
||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||
|
||||
<CodeHighlight lang="js">
|
||||
npm install primeicons --save
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Getting Started</h3>
|
||||
<p>PrimeIcons use the <strong>pi pi-{icon}</strong> syntax such as <strong>pi pi-check</strong>.
|
||||
A standalone icon can be displayed using an element such as <i>i</i> or <i>span</i></p>
|
||||
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
</CodeHighlight>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
<i class="pi pi-times"></i>
|
||||
|
||||
<h3>Size</h3>
|
||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
||||
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-check"></i>
|
||||
</CodeHighlight>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-check" style="fontSize: 3em"></i>
|
||||
</CodeHighlight>
|
||||
|
||||
<i class="pi pi-check" style="fontSize: 3em"></i>
|
||||
|
||||
<h3>Spinning Animation</h3>
|
||||
<p>Special pi-spin class applies infinite rotate to an icon.</p>
|
||||
<CodeHighlight>
|
||||
<i class="pi pi-spin pi-spinner" style="fontSizi class="pi pi-spin pi-spinner" style="fontSiz
|
||||
</CodeHighlight>
|
||||
|
||||
<i class="pi pi-spin pi-spinner" style="fontSize: 3em"></i>
|
||||
|
||||
<h3>List of Icons</h3>
|
||||
<p>Here is the current list of PrimeIcons, more icons will be added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues">request new icons</a> at the issue tracker.</p>
|
||||
|
||||
<InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
|
||||
|
||||
<div class="p-grid icons-list">
|
||||
<div class="p-col-12 p-md-2" v-for="icon of filteredIcons" :key="icon.properties.name">
|
||||
<i :class="'pi pi-' + icon.properties.name"></i>
|
||||
<div>pi-{{icon.properties.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
icons: null,
|
||||
filter: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
axios.get('demo/data/icons.json').then(res => this.icons = res.data.icons);
|
||||
},
|
||||
computed: {
|
||||
filteredIcons() {
|
||||
if (this.filter)
|
||||
return this.icons.filter(icon => icon.properties.name.indexOf(this.filter.toLowerCase()) > -1);
|
||||
else
|
||||
return this.icons;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="css" scoped>
|
||||
.icon-filter {
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
margin: 16px 0 26px 0;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue