58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<template>
|
|
<DocSectionText v-bind="$attrs">
|
|
<p>The <i>$dt</i> function returns the information about a token like the full path and value. This would be useful if you need to access tokens programmatically.</p>
|
|
</DocSectionText>
|
|
<DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
code: {
|
|
basic: `
|
|
import { $dt } from '@primevue/themes';
|
|
|
|
const duration = $dt('transition.duration');
|
|
/*
|
|
duration: {
|
|
name: '--transition-duration',
|
|
variable: 'var(--p-transition-duration)',
|
|
value: '0.2s'
|
|
}
|
|
*/
|
|
|
|
const primaryColor = $dt('primary.color');
|
|
/*
|
|
primaryColor: {
|
|
name: '--primary-color',
|
|
variable: 'var(--p-primary-color)',
|
|
value: {
|
|
light: {
|
|
value: '#10b981',
|
|
paths: {
|
|
name: 'semantic.primary.color',
|
|
binding: {
|
|
name: 'primitive.emerald.500'
|
|
}
|
|
}
|
|
},
|
|
dark: {
|
|
value: '#34d399',
|
|
paths: {
|
|
name: 'semantic.primary.color',
|
|
binding: {
|
|
name: 'primitive.emerald.400'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
*/
|
|
`
|
|
}
|
|
};
|
|
}
|
|
};
|
|
</script>
|