Merge branch 'prod'
Cagatay Civici
commit
bdd44dc526
|
|
@ -448,10 +448,6 @@
|
|||
"name": "Overview",
|
||||
"to": "/theming"
|
||||
},
|
||||
{
|
||||
"name": "Visual Editor",
|
||||
"href": "https://designer.primevue.org"
|
||||
},
|
||||
{
|
||||
"name": "Colors",
|
||||
"to": "/colors"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
<template>
|
||||
<DocSectionText v-bind="$attrs">
|
||||
<p>PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>.</p>
|
||||
<p>
|
||||
PrimeVue plugin is required to be installed with the <i>use</i> function to set up the default <NuxtLink to="/theming">configuration</NuxtLink>. If you are using <NuxtLink to="/theming">Nuxt</NuxtLink>, this step is not required as our
|
||||
nuxt module handles it.
|
||||
</p>
|
||||
</DocSectionText>
|
||||
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -5,19 +5,8 @@
|
|||
of the built-in themes so that you may customize an existing theme or create your own. The scss variables used in a theme are available at the <a href="https://www.primefaces.org/designer/api/primevue/3.9.0">SASS API</a> documentation.
|
||||
</p>
|
||||
<p>
|
||||
There are 3 alternatives to create your own theme. First option is using the Visual Editor, second one is compiling a theme with command line sass and final alternative is embedding scss files within your project to let your build
|
||||
environment do the compilation. In all cases, the generated theme file should be imported to your project. We've created a video tutorial that demonstrates all three options.
|
||||
</p>
|
||||
|
||||
<div class="video-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/iZp_l0Yl3Zw" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h3>Visual Editor</h3>
|
||||
<p>
|
||||
<a href="https://designer.primevue.org">Visual Editor</a> is an easy way to quickly customize an existing theme without dealing with the details of the SASS API. The editor allows changing common settings like primary color for built-in
|
||||
themes. Once you have completed the design, click the download button to access the generated <i>theme.css</i> file and import it to your project as an asset. In near future, an advanced UI Designer will be available with the ability to
|
||||
edit all variables and components where you'll also be able to save your themes when accessed with an account.
|
||||
There are 2 alternatives to create your own theme. First option is compiling a theme with command line sass whereas second option is embedding scss files within your project to let your build environment do the compilation. In all cases,
|
||||
the generated theme file should be imported to your project.
|
||||
</p>
|
||||
|
||||
<h3>Theme SCSS</h3>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,17 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Styled Mode</router-link>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/unstyled" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Unstyled Mode</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Resources</li>
|
||||
|
|
@ -55,20 +66,6 @@
|
|||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="w-6 lg:w-3 flex">
|
||||
<ul class="list-none p-0 m-0">
|
||||
<li class="font-bold mt-5 lg:mt-0 mb-5">Theming</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/theming" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Guide</router-link>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<a href="https://designer.primevue.org" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Designer</a>
|
||||
</li>
|
||||
<li class="mb-4">
|
||||
<router-link to="/colors" class="text-secondary font-medium hover:text-primary border-round transition-all transition-duration-300">Colors</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="section-divider mt-8" />
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('lara') }]" @click="changeTheme('lara', 'green')">PrimeOne</button>
|
||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('md') }]" @click="changeTheme('md', 'indigo')">Material</button>
|
||||
<button type="button" :class="['font-medium linkbox mr-3 mt-4', { active: theme && theme.startsWith('bootstrap4') }]" @click="changeTheme('bootstrap4', 'blue')">Bootstrap</button>
|
||||
<a type="button" class="font-medium px-link linkbox mt-4" href="https://designer.primevue.org">more...</a>
|
||||
</div>
|
||||
<div
|
||||
class="themes-main flex mt-7 justify-content-center px-5 lg:px-8"
|
||||
|
|
|
|||
Loading…
Reference in New Issue