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

Doc update on PT and cosmetic on hero section

pull/5072/head
Cagatay Civici 2024-01-12 10:55:29 +03:00
parent e7532bc30a
commit 4c97a6df8c
2 changed files with 23 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/landing/HeroSection.vue
View File

@ -7,8 +7,8 @@
target="_blank"
rel="noopener noreferrer"
style="border-radius: 50px"
class="bg-yellow-300 border-1 border-yellow-400 text-yellow-900 py-1 px-3 xl:align-self-start font-semibold text-lg transition-colors transition-duration-300 hover:border-yellow-600"
>🎉 Introducing the Tailwind CSS Presets <i class="pi pi-arrow-right text-sm"></i
class="bg-yellow-300 border-1 border-yellow-400 text-yellow-900 py-1 px-3 xl:align-self-start font-semibold transition-colors transition-duration-300 hover:border-yellow-600 text-base sm:text-lg"
>🎉 Introducing the Tailwind Presets <i class="pi pi-arrow-right text-sm"></i
></a>
<h1 class="text-6xl font-bold text-center xl:text-left">The Next-Gen UI Suite for <span class="font-bold text-primary">Vue.js</span></h1>
<p class="section-detail xl:text-left text-center px-0 mt-0 mb-5">
@ -141,6 +141,12 @@
menuButton: {
width: 'auto',
root: 'p-2'
},
menu: {
root: {
style: 'width: 10rem; min-width: auto',
},
action: 'p-2'
}
}"
/>

28
doc/passthrough/UsePassThroughDoc.vue
View File

@ -1,8 +1,7 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of merging.
One of the example use cases is customizing existing unstyled themes like Tailwind.
An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the merge strategy.
</p>
<DocSectionCode :code="code1" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
<p>
@ -25,12 +24,12 @@ export default {
import { createApp } from "vue";
import PrimeVue from "primevue/config";
import { usePassThrough } from "primevue/passthrough";
import Tailwind from "primevue/passthrough/tailwind";
import BasePreset from "./basepreset";
const app = createApp(App);
const CustomTailwind = usePassThrough(
Tailwind,
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
title: {
@ -44,13 +43,13 @@ const CustomTailwind = usePassThrough(
}
);
app.use(PrimeVue, { unstyled: true, pt: CustomTailwind });
app.use(PrimeVue, { unstyled: true, pt: CustomPreset });
`
},
code2: {
basic: `
const CustomTailwind = usePassThrough(
Tailwind,
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
@ -66,8 +65,8 @@ const CustomTailwind = usePassThrough(
},
code3: {
basic: `
const CustomTailwind = usePassThrough(
Tailwind,
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
@ -83,8 +82,8 @@ const CustomTailwind = usePassThrough(
},
code4: {
basic: `
const CustomTailwind = usePassThrough(
Tailwind,
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'
@ -99,8 +98,9 @@ const CustomTailwind = usePassThrough(
`
},
code5: {
basic: `const CustomTailwind = usePassThrough(
Tailwind,
basic: `
const CustomPreset = usePassThrough(
BasePreset,
{
panel: {
header: 'my_panel_header'