53 lines
1.5 KiB
Vue
53 lines
1.5 KiB
Vue
<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>
|