Merge branch 'prod'
commit
3b9b7038a8
|
@ -19,5 +19,10 @@
|
||||||
<div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
|
<div class="pl-8 pr-4 pt-4 bg-surface-0 dark:bg-surface-900 rounded-2xl border border-surface mb-4" style="max-width: 48rem">
|
||||||
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
|
<img alt="Designer Dashboard" src="https://primefaces.org/cdn/designer/guide-create.png" class="w-full" />
|
||||||
</div>
|
</div>
|
||||||
|
<b class="mb-4 block">Video Tutorial</b>
|
||||||
|
<p>A tutorial is available demonstrating how the handoff process can be automated between the design team and the development team.</p>
|
||||||
|
<div class="video-container">
|
||||||
|
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ktocmi2dLLM?si=lG7JwkUfLTQFlfeX" frameborder="0" allowfullscreen></iframe>
|
||||||
|
</div>
|
||||||
</DocSectionText>
|
</DocSectionText>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -1,39 +0,0 @@
|
||||||
<template>
|
|
||||||
<DocSectionText v-bind="$attrs">
|
|
||||||
<p>
|
|
||||||
Tokens are described with the dot separator e.g. <i>primary.color</i>, <i>form.field.background</i> or <i>checkbox.icon.checked.color</i>. At preset configuration, camel case and object property are used when mapping the dot separator.
|
|
||||||
The following is an example from the checkbox component tokens to represent the <i>checkbox.icon.checked.color</i>, all alternatives have the same result.
|
|
||||||
</p>
|
|
||||||
</DocSectionText>
|
|
||||||
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
code: {
|
|
||||||
basic: `
|
|
||||||
export default {
|
|
||||||
iconCheckedColor: //...,
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
icon: {
|
|
||||||
checkedColor: //...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
|
||||||
icon: {
|
|
||||||
checked: {
|
|
||||||
color: //...
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
|
@ -21,7 +21,6 @@
|
||||||
<script>
|
<script>
|
||||||
import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
|
import ArchitectureDoc from '@/doc/theming/styled/ArchitectureDoc.vue';
|
||||||
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
|
import CSSModulesDoc from '@/doc/theming/styled/CSSModulesDoc.vue';
|
||||||
import CaseStyleDoc from '@/doc/theming/styled/CaseStyleDoc.vue';
|
|
||||||
import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
|
import ColorsDoc from '@/doc/theming/styled/ColorsDoc.vue';
|
||||||
import DarkModeDoc from '@/doc/theming/styled/DarkModeDoc.vue';
|
import DarkModeDoc from '@/doc/theming/styled/DarkModeDoc.vue';
|
||||||
import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
|
import PresetsDoc from '@/doc/theming/styled/PresetsDoc.vue';
|
||||||
|
@ -78,11 +77,6 @@ export default {
|
||||||
label: 'Presets',
|
label: 'Presets',
|
||||||
component: PresetsDoc
|
component: PresetsDoc
|
||||||
},
|
},
|
||||||
{
|
|
||||||
id: 'casestyle',
|
|
||||||
label: 'Case Style',
|
|
||||||
component: CaseStyleDoc
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
id: 'reserved',
|
id: 'reserved',
|
||||||
label: 'Reserved Keys',
|
label: 'Reserved Keys',
|
||||||
|
|
Loading…
Reference in New Issue