Add CustomCSS doc
parent
c2ee6817cd
commit
cc392c38ad
|
@ -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>
|
|
@ -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
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue