vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Rounded bottom for code sections

pull/4283/head
Tuğçe Küçükoğlu 2023-08-16 17:34:47 +03:00
parent 2e2c6d8ceb
commit 283b31a79e
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/styles/layout/_doc.scss
View File

@ -205,6 +205,13 @@
} }
} }
.doc-section-buttons {
gap: .75rem;
padding: .75rem 0 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.doc-section-code-tooltip .p-tooltip-text { .doc-section-code-tooltip .p-tooltip-text {
padding: 0.5rem; padding: 0.5rem;
font-size: 11px; font-size: 11px;
@ -229,7 +236,7 @@
} }
pre { pre {
margin: 0 0 1.5rem 0; margin: 0;
} }
} }

42
components/doc/DocSectionCode.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div v-if="!embedded" class="relative doc-section-code overflow-auto" style="max-height: 40rem"> <div v-if="!embedded" class="surface-card" style="border-radius: 10px">
<div class="flex surface-card align-items-center justify-content-end sticky z-1" :style="{ top: '0', gap: '.75rem', padding: '.75rem .75rem 0 0', borderTopLeftRadius: '10px', borderTopRightRadius: '10px' }"> <div class="flex doc-section-buttons surface-card align-items-center justify-content-end sticky z-1 top-0">
<template v-if="codeMode !== 'basic' && !hideToggleCode"> <template v-if="codeMode !== 'basic' && !hideToggleCode">
<Button <Button
:class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' }]" :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' }]"
@ -76,35 +76,33 @@
></Button> ></Button>
</div> </div>
<template v-if="codeMode === 'basic' && importCode"> <div class="relative doc-section-code overflow-auto" style="max-height: 40rem">
<pre v-code.script><code>{{ code.basic }} <template v-if="codeMode === 'basic' && importCode">
<pre v-code.script><code>{{ code.basic }}
</code></pre> </code></pre>
</template> </template>
<template v-if="codeMode === 'basic' && !importCode">
<pre v-code><code>{{ code.basic }}
<template v-if="codeMode === 'basic' && !importCode">
<pre v-code><code>{{ code.basic }}
</code></pre> </code></pre>
</template> </template>
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
<pre v-code><code>{{ code.options }}
<template v-if="codeMode !== 'basic' && codeLang === 'options'">
<pre v-code><code>{{ code.options }}
</code></pre> </code></pre>
</template> </template>
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
<pre v-code><code>{{ code.composition }}
<template v-if="codeMode !== 'basic' && codeLang === 'composition'">
<pre v-code><code>{{ code.composition }}
</code></pre> </code></pre>
</template> </template>
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
<pre v-code.json><code>{{ code.data }}
<template v-if="codeMode !== 'basic' && codeLang === 'data'">
<pre v-code.json><code>{{ code.data }}
</code></pre> </code></pre>
</template> </template>
</div>
<div class="h-1rem"></div>
</div> </div>
<div v-else id="embed"></div> <div v-else id="embed"></div>
</template> </template>