54 lines
1.5 KiB
Vue
54 lines
1.5 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs">
|
|
<p>
|
|
The declarative syntax provides an alternative to the programmatic syntax. The attributes that start with <i>pt</i> are interpreted differently by the component based on the format below. An IDE extension is also being planned to
|
|
autocomplete the values for better developer experience in the future.
|
|
</p>
|
|
<DocSectionCode :code="code1" hideToggleCode hideStackBlitz />
|
|
<p>Here is another example using both syntax alternatives for the same options.</p>
|
|
<DocSectionCode :code="code2" hideToggleCode hideStackBlitz />
|
|
<DocSectionCode :code="code3" hideToggleCode hideStackBlitz />
|
|
</DocSectionText>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
code1: {
|
|
basic: `
|
|
<ComponentTag pt:[passthrough_key]:[attribute]="value" />
|
|
`
|
|
},
|
|
code2: {
|
|
basic: `
|
|
<Panel
|
|
:pt="{
|
|
root: {
|
|
class='"border-1 border-solid'
|
|
},
|
|
header: {
|
|
'data-test-id': 'testid',
|
|
class: 'bg-blue-500',
|
|
onClick: onHeaderClick
|
|
}
|
|
}"
|
|
>
|
|
`
|
|
},
|
|
code3: {
|
|
basic: `
|
|
<Panel
|
|
pt:root:class="border-1 border-solid"
|
|
pt:header:id="headerId"
|
|
pt:header:data-test-id="testId"
|
|
pt:header:class="bg-blue-500"
|
|
:pt:header:onClick="onHeaderClick"
|
|
>
|
|
`
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|