Add CustomCSS doc

pull/4243/head
Cagatay Civici 2023-08-06 18:12:36 +03:00
parent c2ee6817cd
commit cc392c38ad
2 changed files with 62 additions and 0 deletions

View File

@ -0,0 +1,56 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
The <i>global</i> property has a <i>css</i> option to define custom css that belongs to a global <i>pt</i> configuration. Common use case of this feature is defining global styles and animations related to the pass through props
configuration.
</p>
</DocSectionText>
<DocSectionCode :code="code" hideToggleCode importCode hideCodeSandbox hideStackBlitz />
</template>
<script>
export default {
data() {
return {
code: {
basic: `import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
pt: {
global: {
css: \`
button {
padding: 2rem;
}
.p-ink {
display: block;
position: absolute;
background: rgba(255, 255, 255, 0.5);
border-radius: 100%;
transform: scale(0);
pointer-events: none;
}
.p-ink-active {
animation: ripple 0.4s linear;
}
@keyframes ripple {
100% {
opacity: 0;
transform: scale(2.5);
}
}
\`
}
}
});`
}
};
}
};
</script>

View File

@ -17,6 +17,7 @@
<script> <script>
import BasicDoc from '@/doc/passthrough/BasicDoc'; import BasicDoc from '@/doc/passthrough/BasicDoc';
import CustomCSSDoc from '@/doc/passthrough/CustomCSSDoc';
import GlobalDoc from '@/doc/passthrough/GlobalDoc'; import GlobalDoc from '@/doc/passthrough/GlobalDoc';
import LifecycleDoc from '@/doc/passthrough/LifecycleDoc'; import LifecycleDoc from '@/doc/passthrough/LifecycleDoc';
@ -38,6 +39,11 @@ export default {
id: 'global', id: 'global',
label: 'Global', label: 'Global',
component: GlobalDoc component: GlobalDoc
},
{
id: 'customcss',
label: 'Custom CSS',
component: CustomCSSDoc
} }
] ]
}; };