Add designer to showcase
parent
b39fdd1c90
commit
5ebf89d6d1
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="content-section layout-footer clearfix">
|
||||
<span>PrimeVUE 1.0.0-beta.1</span>
|
||||
<span>PrimeVUE 1.0.0-beta.3</span>
|
||||
<div class="footer-links">
|
||||
<a href="https://github.com/primefaces/primevue"><i class=" icon-github fa fa-github-square"></i></a>
|
||||
<a href="https://twitter.com/primevue"><i class="icon-twitter fa fa-twitter-square"></i></a>
|
||||
|
|
|
@ -13,6 +13,8 @@
|
|||
<transition name="p-input-overlay" @enter="onThemesMenuEnter" @leave="onThemesMenuLeave">
|
||||
<ul v-if="themesMenuVisible">
|
||||
<li class="topbar-submenu-header">THEMING</li>
|
||||
<li><router-link to="/theming" @click.native="hideThemesMenu()"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li>
|
||||
<li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-cog" /><span>Designer</span></a></li>
|
||||
<li><router-link to="/icons" @click.native="hideThemesMenu()"><i class="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>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 361 KiB |
|
@ -20,6 +20,11 @@ export default new Router({
|
|||
path: '/support',
|
||||
name: 'support',
|
||||
component: () => import('./views/support/Support.vue')
|
||||
},
|
||||
{
|
||||
path: '/theming',
|
||||
name: 'theming',
|
||||
component: () => import('./views/theming/Theming.vue')
|
||||
},
|
||||
{
|
||||
path: '/icons',
|
||||
|
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Theming</h1>
|
||||
<p>Choose from a variety of premium themes or develop your own theme using PrimeVue Theme Designer API.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section documentation">
|
||||
<h3 style="margin-top:0">Theme Designer API</h3>
|
||||
<p><a href="https://www.primefaces.org/designer/primevue">Designer API</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine
|
||||
with 500+ variables and a demo application. In addition, PrimeVue only ships the generated CSS of <b>Nova</b>, <b>Luna</b> and <b>Rhea</b> themes whereas Designer provides
|
||||
full access to the whole SASS structure and the variables of these pre-built themes.</p>
|
||||
|
||||
<p>Whether you have your own style guide or just need a custom theme, Designer API is the right tool to design and bring them to existence.</p>
|
||||
|
||||
<p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> for more information and live demos.</p>
|
||||
<a href="http://www.primefaces.org/designer/primevue" class="designer-image">
|
||||
<img alt="PrimeVue Designer" src="../../assets/images/primevue-designer.jpg" style="width: 100%" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.designer-image {
|
||||
display: block;
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue