Update PrimeVue, links to Nuxt
This commit is contained in:
Cagatay Civici
@@ -153,6 +153,11 @@ const model = ref([
|
||||
icon: 'pi pi-fw pi-search',
|
||||
url: 'https://github.com/primefaces/sakai-vue',
|
||||
target: '_blank'
|
||||
},
|
||||
{
|
||||
label: 'Nuxt Version',
|
||||
url: 'https://github.com/primefaces/sakai-nuxt',
|
||||
icon: 'pi pi-fw pi-star'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div className="grid">
|
||||
<div className="col-12">
|
||||
<div className="card">
|
||||
<h5>Empty Page</h5>
|
||||
<p>Use this page to start from scratch and place your custom content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<h5>Empty Page</h5>
|
||||
<p>Use this page to start from scratch and place your custom content.</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,64 +1,59 @@
|
||||
<template>
|
||||
<div class="grid">
|
||||
<div class="col-12">
|
||||
<div class="card docs">
|
||||
<h3>Current Version</h3>
|
||||
<p>Vue 3 and PrimeVue 3</p>
|
||||
<p>Click <a href="https://github.com/primefaces/sakai-nuxt" target="_blank" class="font-medium text-primary hover:underline">here</a> to visit the version of Nuxt</p>
|
||||
<h5>Getting Started</h5>
|
||||
<p>
|
||||
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue
|
||||
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium">repository</a> from GitHub and install the dependencies with npm or yarn.
|
||||
</p>
|
||||
<CodeHighlight> npm install </CodeHighlight>
|
||||
<div class="card">
|
||||
<h3>Documentation</h3>
|
||||
<p class="bg-primary border-round p-3">This page covers the Vite version, for Nuxt 3 visit the <a href="https://github.com/primefaces/sakai-nuxt" class="font-bold bg-primary hover:underline">sakai-nuxt</a> repository instead.</p>
|
||||
<h5>Getting Started</h5>
|
||||
<p>
|
||||
Sakai is an application template for Vue based on the <a href="https://github.com/vuejs/create-vue" class="font-medium text-primary hover:underline">create-vue</a>, the recommended way to start a <strong>Vite-powered</strong> Vue
|
||||
projects. To get started, clone the <a href="https://github.com/primefaces/sakai-vue" class="font-medium text-primary hover:underline">repository</a> from GitHub and install the dependencies with npm or yarn.
|
||||
</p>
|
||||
<CodeHighlight> npm install </CodeHighlight>
|
||||
|
||||
or
|
||||
or
|
||||
|
||||
<CodeHighlight> yarn </CodeHighlight>
|
||||
<CodeHighlight> yarn </CodeHighlight>
|
||||
|
||||
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
|
||||
<p>Next step is running the application using the serve script and navigate to <i>http://localhost:5173/</i> to view the application. That is it, you may now start with the development of your application using the Sakai template.</p>
|
||||
|
||||
<CodeHighlight> npm run dev </CodeHighlight>
|
||||
<CodeHighlight> npm run dev </CodeHighlight>
|
||||
|
||||
<h5>Structure</h5>
|
||||
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
|
||||
<ul class="line-height-3">
|
||||
<li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
|
||||
<li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
|
||||
<li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li>
|
||||
<li><span class="text-primary font-medium">public/layout</span>: Assets used in layout</li>
|
||||
<li><span class="text-primary font-medium">src/assets/demo</span>: Styles used in demos</li>
|
||||
<li><span class="text-primary font-medium">src/assets/layout</span>: SCSS files of the main layout</li>
|
||||
</ul>
|
||||
<h5>Structure</h5>
|
||||
<p>Sakai consists of a couple folders, demos and layout have been separated so that you can easily remove what is not necessary for your application.</p>
|
||||
<ul class="line-height-3">
|
||||
<li><span class="text-primary font-medium">src/layout</span>: Main layout files, needs to be present</li>
|
||||
<li><span class="text-primary font-medium">src/views</span>: Demo pages</li>
|
||||
<li><span class="text-primary font-medium">public/demo</span>: Assets used in demos</li>
|
||||
<li><span class="text-primary font-medium">public/layout</span>: Assets used in layout</li>
|
||||
<li><span class="text-primary font-medium">src/assets/demo</span>: Styles used in demos</li>
|
||||
<li><span class="text-primary font-medium">src/assets/layout</span>: SCSS files of the main layout</li>
|
||||
</ul>
|
||||
|
||||
<h5>Menu</h5>
|
||||
<p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
|
||||
<h5>Menu</h5>
|
||||
<p>Main menu is defined at <span class="text-primary font-medium">src/layout/AppMenu.vue</span> file.</p>
|
||||
|
||||
<h5>Integration with Existing Vite Applications</h5>
|
||||
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
|
||||
<h5>Integration with Existing Vite Applications</h5>
|
||||
<p>Only the folders that are related to the layout needs to move in to your project. We've created a short tutorial with details.</p>
|
||||
|
||||
<div class="video-container">
|
||||
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h5>PrimeVue Theme</h5>
|
||||
<p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
|
||||
|
||||
<h5>SASS Variables</h5>
|
||||
<p>In case you'd like to customize the main layout variables, open <b>_variables.scss</b> file under src/layout folder. Saving the changes will be reflected instantly at your browser.</p>
|
||||
|
||||
<h6>src/layout/_variables.scss</h6>
|
||||
<CodeHighlight>
|
||||
/* General */
|
||||
<br />
|
||||
$scale:14px; /* main font size */
|
||||
<br />
|
||||
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
|
||||
<br />
|
||||
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
|
||||
</CodeHighlight>
|
||||
</div>
|
||||
<div class="video-container">
|
||||
<iframe className="video" width="560" height="315" src="https://www.youtube.com/embed/AHeSjJFR3ZE" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
|
||||
<h5>PrimeVue Theme</h5>
|
||||
<p>Sakai theming is based on the PrimeVue theme being used. Default theme is <b>lara-light-indigo</b>.</p>
|
||||
|
||||
<h5>SASS Variables</h5>
|
||||
<p>In case you'd like to customize the main layout variables, open <b>_variables.scss</b> file under src/layout folder. Saving the changes will be reflected instantly at your browser.</p>
|
||||
|
||||
<h6>src/layout/_variables.scss</h6>
|
||||
<CodeHighlight>
|
||||
/* General */
|
||||
<br />
|
||||
$scale:14px; /* main font size */
|
||||
<br />
|
||||
$borderRadius:12px; /* border radius of layout element e.g. card, sidebar */
|
||||
<br />
|
||||
$transitionDuration:.2s; /* transition duration of layout elements e.g. sidebar, overlay menus */
|
||||
</CodeHighlight>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -28,57 +28,55 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="card">
|
||||
<h3>Icons</h3>
|
||||
<p>
|
||||
PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from
|
||||
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
|
||||
</p>
|
||||
<div class="card">
|
||||
<h3>Icons</h3>
|
||||
<p>
|
||||
PrimeVue components internally use <a href="https://github.com/primefaces/primeicons" class="font-medium text-primary hover:underline">PrimeIcons</a> library, the official icons suite from
|
||||
<a href="https://www.primetek.com.tr" class="font-medium text-primary hover:underline">PrimeTek</a>.
|
||||
</p>
|
||||
|
||||
<h5>Download</h5>
|
||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||
<h5>Download</h5>
|
||||
<p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
|
||||
|
||||
<CodeHighlight> npm install primeicons --save </CodeHighlight>
|
||||
<CodeHighlight> npm install primeicons --save </CodeHighlight>
|
||||
|
||||
<h5>Getting Started</h5>
|
||||
<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 like <i>i</i> or <i>span</i></p>
|
||||
<h5>Getting Started</h5>
|
||||
<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 like <i>i</i> or <i>span</i></p>
|
||||
|
||||
<CodeHighlight> <i class="pi pi-check"></i> <i class="pi pi-times"></i> </CodeHighlight>
|
||||
<CodeHighlight> <i class="pi pi-check"></i> <i class="pi pi-times"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-check" style="margin-right: 0.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>
|
||||
<h5>Size</h5>
|
||||
<p>Size of the icons can easily be changed using font-size property.</p>
|
||||
|
||||
<CodeHighlight> <i class="pi pi-check"></i> </CodeHighlight>
|
||||
<CodeHighlight> <i class="pi pi-check"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-check"></i>
|
||||
<i class="pi pi-check"></i>
|
||||
|
||||
<CodeHighlight> <i class="pi pi-check" style="font-size: 2rem"></i> </CodeHighlight>
|
||||
<CodeHighlight> <i class="pi pi-check" style="font-size: 2rem"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
<i class="pi pi-check" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>Spinning Animation</h5>
|
||||
<p>Special pi-spin class applies continuous rotation to an icon.</p>
|
||||
<CodeHighlight> <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i> </CodeHighlight>
|
||||
<h5>Spinning Animation</h5>
|
||||
<p>Special pi-spin class applies continuous rotation to an icon.</p>
|
||||
<CodeHighlight> <i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i> </CodeHighlight>
|
||||
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
|
||||
|
||||
<h5>List of Icons</h5>
|
||||
<p>
|
||||
Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue
|
||||
tracker.
|
||||
</p>
|
||||
<h5>List of Icons</h5>
|
||||
<p>
|
||||
Here is the current list of PrimeIcons, more icons are added periodically. You may also <a href="https://github.com/primefaces/primeicons/issues" class="font-medium text-primary hover:underline">request new icons</a> at the issue
|
||||
tracker.
|
||||
</p>
|
||||
|
||||
<InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
|
||||
<InputText v-model="filter" class="w-full p-3 mt-3 mb-5" placeholder="Search an icon" />
|
||||
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user