vertumnus/primevue-mirror
1
0
Fork 0
mirror of https://github.com/primefaces/primevue.git synced 2025-05-11 09:52:35 +00:00
Code Issues Projects Releases Packages Wiki Activity

Initiated docs and default preset update

Browse source
This commit is contained in:
Cagatay Civici 2024-03-30 15:19:34 +03:00
parent 36cd4c4692
commit d80a18c052
26 changed files with 307 additions and 462 deletions
Download patch file Download diff file Expand all files Collapse all files

52
doc/theming/CSSModulesDoc.vue
View file

@ -1,52 +0,0 @@
<template>
<DocSectionText v-bind="$attrs">
<p>
<a href="https://github.com/css-modules/css-modules">CSS modules</a> are supported by enabling the <i>module</i> property on a style element within your component and using the <i>$style</i> keyword to apply classes to a PrimeVue
component.
</p>
<div class="card flex justify-content-center">
<InputText :class="$style.myinput" placeholder="Search" />
</div>
<DocSectionCode :code="code1" hideToggleCode importCode hideStackBlitz />
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
<p>An in-depth video tutorial is available to cover advanced uses cases with Pass Through props.</p>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/n5zvMo7ykgw?si=lw1dGEHclmhIfZTr" frameborder="0" allowfullscreen></iframe>
</div>
</DocSectionText>
</template>
<script>
export default {
data() {
return {
code1: {
basic: `
<style module>
.myinput {
border-radius: 2rem;
padding: 1rem 2rem;
border-width: 2px;
}
</style>
`
},
code2: {
basic: `
<template>
<InputText :class="$style.myinput" placeholder="Search" />
</template>
`
}
};
}
};
</script>
<style module>
.myinput {
border-radius: 2rem;
padding: 1rem 2rem;
border-width: 2px;
}
</style>