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

Add themes to switcher

pull/358/head
cagataycivici 2020-06-26 16:37:03 +03:00
parent 39372130da
commit 97f4c43d53
3 changed files with 46 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/AppConfigurator.vue
View File

@ -31,25 +31,25 @@
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-blue')"/> <img src="./assets/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-blue')"/>
</button> </button>
<span>Light</span> <span>Blue</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-purple')"/> <img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" @click="changeTheme($event, 'bootstrap4-light-purple')"/>
</button> </button>
<span>Light</span> <span>Purple</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-blue', true)"/> <img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-blue', true)"/>
</button> </button>
<span>Light</span> <span>Blue</span>
</div> </div>
<div class="p-col-3"> <div class="p-col-3">
<button class="p-link"> <button class="p-link">
<img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-purple', true)"/> <img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" @click="changeTheme($event, 'bootstrap4-dark-purple', true)"/>
</button> </button>
<span>Light</span> <span>Purple</span>
</div> </div>
</div> </div>

30
src/AppTopBar.vue
View File

@ -16,7 +16,25 @@
<li><router-link to="/theming"><i class="pi pi-fw pi-file"/><span>Guide</span></router-link></li> <li><router-link to="/theming"><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-palette" /><span>Designer</span></a></li> <li><a href="https://www.primefaces.org/designer/primevue"><i class="pi pi-fw pi-palette" /><span>Designer</span></a></li>
<li><router-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></router-link></li> <li><router-link to="/icons"><i class="pi pi-fw pi-info-circle"/><span>Icons</span></router-link></li>
<li class="topbar-submenu-header">FREE COMPONENT THEMES</li> <li class="topbar-submenu-header">BOOTSTRAP</li>
<li><a @click="changeTheme($event, 'bootstrap4-light-blue')"><img src="./assets/images/themes/bootstrap4-light-blue.svg" alt="Blue Light" /><span>Blue Light</span></a></li>
<li><a @click="changeTheme($event, 'bootstrap4-light-purple')"><img src="./assets/images/themes/bootstrap4-light-purple.svg" alt="Purple Light" /><span>Purple Light</span></a></li>
<li><a @click="changeTheme($event, 'bootstrap4-dark-blue')"><img src="./assets/images/themes/bootstrap4-dark-blue.svg" alt="Blue Dark" /><span>Blue Dark</span></a></li>
<li><a @click="changeTheme($event, 'bootstrap4-dark-purple')"><img src="./assets/images/themes/bootstrap4-dark-purple.svg" alt="Purple Dark" /><span>Purple Dark</span></a></li>
<li class="topbar-submenu-header">MATERIAL DESIGN</li>
<li><a @click="changeTheme($event, 'md-light-indigo')"><img src="./assets/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
<li><a @click="changeTheme($event, 'md-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
<li><a @click="changeTheme($event, 'md-dark-indigo')"><img src="./assets/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
<li><a @click="changeTheme($event, 'md-dark-deeppurple')"><img src="./assets/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
<li class="topbar-submenu-header">MATERIAL DESIGN COMPACT</li>
<li><a @click="changeTheme($event, 'mdc-light-indigo')"><img src="./assets/images/themes/md-light-indigo.svg" alt="Indigo Light" /><span>Indigo Light</span></a></li>
<li><a @click="changeTheme($event, 'mdc-light-deeppurple')"><img src="./assets/images/themes/md-light-deeppurple.svg" alt="Deep Purple Light" /><span>Deep Purple Light</span></a></li>
<li><a @click="changeTheme($event, 'mdc-dark-indigo')"><img src="./assets/images/themes/md-dark-indigo.svg" alt="Indigo Dark" /><span>Indigo Dark</span></a></li>
<li><a @click="changeTheme($event, 'mdc-dark-deeppurple')"><img src="./assets/images/themes/md-dark-deeppurple.svg" alt="Deep Purple Dark" /><span>Deep Purple Dark</span></a></li>
<li class="topbar-submenu-header">PRIMEONE</li>
<li><a @click="changeTheme($event, 'saga-blue')"><img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li> <li><a @click="changeTheme($event, 'saga-blue')"><img src="./assets/images/themes/saga-blue.png" alt="Saga Blue" /><span>Saga Blue</span></a></li>
<li><a @click="changeTheme($event, 'saga-green')"><img src="./assets/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li> <li><a @click="changeTheme($event, 'saga-green')"><img src="./assets/images/themes/saga-green.png" alt="Saga Green" /><span>Saga Green</span></a></li>
<li><a @click="changeTheme($event, 'saga-orange')"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li> <li><a @click="changeTheme($event, 'saga-orange')"><img src="./assets/images/themes/saga-orange.png" alt="Saga Orange" /><span>Saga Orange</span></a></li>
@ -25,10 +43,12 @@
<li><a @click="changeTheme($event, 'vela-green', true)"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li> <li><a @click="changeTheme($event, 'vela-green', true)"><img src="./assets/images/themes/vela-green.png" alt="Vela Green" /><span>Vela Green</span></a></li>
<li><a @click="changeTheme($event, 'vela-orange', true)"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li> <li><a @click="changeTheme($event, 'vela-orange', true)"><img src="./assets/images/themes/vela-orange.png" alt="Vela Orange" /><span>Vela Orange</span></a></li>
<li><a @click="changeTheme($event, 'vela-purple', true)"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li> <li><a @click="changeTheme($event, 'vela-purple', true)"><img src="./assets/images/themes/vela-purple.png" alt="Vela Purple" /><span>Vela Purple</span></a></li>
<li><a @click="changeTheme($event, 'arya-blue', true)"><img src="./assets/images/themes/vela-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li> <li><a @click="changeTheme($event, 'arya-blue', true)"><img src="./assets/images/themes/arya-blue.png" alt="Arya Blue" /><span>Arya Blue</span></a></li>
<li><a @click="changeTheme($event, 'arya-green', true)"><img src="./assets/images/themes/vela-green.png" alt="Arya Green" /><span>Arya Green</span></a></li> <li><a @click="changeTheme($event, 'arya-green', true)"><img src="./assets/images/themes/arya-green.png" alt="Arya Green" /><span>Arya Green</span></a></li>
<li><a @click="changeTheme($event, 'arya-orange', true)"><img src="./assets/images/themes/vela-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li> <li><a @click="changeTheme($event, 'arya-orange', true)"><img src="./assets/images/themes/arya-orange.png" alt="Arya Orange" /><span>Arya Orange</span></a></li>
<li><a @click="changeTheme($event, 'arya-purple', true)"><img src="./assets/images/themes/vela-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li> <li><a @click="changeTheme($event, 'arya-purple', true)"><img src="./assets/images/themes/arya-purple.png" alt="Arya Purple" /><span>Arya Purple</span></a></li>
<li class="topbar-submenu-header">LEGACY</li>
<li><a @click="changeTheme($event, 'nova')"><img src="./assets/images/layouts/themeswitcher-nova.png" alt="Nova" /><span>Nova</span></a></li> <li><a @click="changeTheme($event, 'nova')"><img src="./assets/images/layouts/themeswitcher-nova.png" alt="Nova" /><span>Nova</span></a></li>
<li><a @click="changeTheme($event, 'nova-alt')"><img src="./assets/images/layouts/themeswitcher-nova-alt.png" alt="Nova Alt" /><span>Nova Alt</span></a></li> <li><a @click="changeTheme($event, 'nova-alt')"><img src="./assets/images/layouts/themeswitcher-nova-alt.png" alt="Nova Alt" /><span>Nova Alt</span></a></li>
<li><a @click="changeTheme($event, 'nova-accent')"><img src="./assets/images/layouts/themeswitcher-nova-accent.png" alt="Nova Accent" /><span>Nova Accent</span></a></li> <li><a @click="changeTheme($event, 'nova-accent')"><img src="./assets/images/layouts/themeswitcher-nova-accent.png" alt="Nova Accent" /><span>Nova Accent</span></a></li>

25
src/views/setup/Setup.vue
View File

@ -108,23 +108,32 @@ primeicons/primeicons.css //icons
</CodeHighlight> </CodeHighlight>
<h5>Free Themes</h5> <h5>Free Themes</h5>
<p>PrimeVue ships with 25 free themes to choose from, import paths are as follows.</p> <p>PrimeVue ships with 32 free themes to choose from, import paths are as follows.</p>
<CodeHighlight lang="css"> <CodeHighlight lang="css">
primevue/resources/themes/bootstrap4-light-blue/theme.css
primevue/resources/themes/bootstrap4-light-purple/theme.css
primevue/resources/themes/bootstrap4-dark-blue/theme.css
primevue/resources/themes/bootstrap4-dark-purple/theme.css
primevue/resources/themes/md-light-indigo/theme.css
primevue/resources/themes/md-light-deeppurple/theme.css
primevue/resources/themes/md-dark-indigo/theme.css
primevue/resources/themes/md-dark-deeppurple/theme.css
primevue/resources/themes/mdc-light-indigo/theme.css
primevue/resources/themes/mdc-light-deeppurple/theme.css
primevue/resources/themes/mdc-dark-indigo/theme.css
primevue/resources/themes/mdc-dark-deeppurple/theme.css
primevue/resources/themes/saga-blue/theme.css primevue/resources/themes/saga-blue/theme.css
primevue/resources/themes/saga-cyan/theme.css
primevue/resources/themes/saga-deeppurple/theme.css
primevue/resources/themes/saga-green/theme.css primevue/resources/themes/saga-green/theme.css
primevue/resources/themes/saga-indigo/theme.css
primevue/resources/themes/saga-orange/theme.css primevue/resources/themes/saga-orange/theme.css
primevue/resources/themes/saga-purple/theme.css primevue/resources/themes/saga-purple/theme.css
primevue/resources/themes/vela-blue/theme.css primevue/resources/themes/vela-blue/theme.css
primevue/resources/themes/vela-cyan/theme.css
primevue/resources/themes/vela-deeppurple/theme.css
primevue/resources/themes/vela-green/theme.css primevue/resources/themes/vela-green/theme.css
primevue/resources/themes/vela-indigo/theme.css
primevue/resources/themes/vela-orange/theme.css primevue/resources/themes/vela-orange/theme.css
primevue/resources/themes/vela-purple/theme.css primevue/resources/themes/vela-purple/theme.css
primevue/resources/themes/vela-teal/theme.css primevue/resources/themes/arya-blue/theme.css
primevue/resources/themes/arya-green/theme.css
primevue/resources/themes/arya-orange/theme.css
primevue/resources/themes/arya-purple/theme.css
primevue/resources/themes/nova/theme.css primevue/resources/themes/nova/theme.css
primevue/resources/themes/nova-alt/theme.css primevue/resources/themes/nova-alt/theme.css
primevue/resources/themes/nova-accent/theme.css primevue/resources/themes/nova-accent/theme.css