mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
landing adjustments and fixes
This commit is contained in:
parent
fd4fef7679
commit
21e87c9c1d
17 changed files with 341 additions and 190 deletions
|
@ -2,7 +2,7 @@
|
|||
<section class="landing-designer py-8">
|
||||
<div class="section-header">Theme Designer</div>
|
||||
<p class="section-detail">Designer is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer.</p>
|
||||
<div class="designer-main mt-7 justify-content-center pad-section" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
|
||||
<div class="designer-main mt-7 justify-content-center px-5 lg:px-8" :style="{ backgroundImage: `url('https://primefaces.org/cdn/primevue/images/landing/wave-${$appState.darkTheme ? 'dark' : 'light'}.svg')`, backgroundSize: 'cover' }">
|
||||
<div class="box p-4 flex flex-column md:flex-row z-1 designer-editor">
|
||||
<div class="mr-0 md:mr-4 p-4 designer-controls box border-bottom-1 border-left-none border-right-none border-top-none md:border-bottom-none md:border-right-1" style="border-radius: '10px'">
|
||||
<div class="text-center mb-4">
|
||||
|
@ -21,16 +21,16 @@
|
|||
<Dropdown v-model="font" :options="fonts" optionLabel="label" @change="changeFont"></Dropdown>
|
||||
|
||||
<span class="font-semibold block mt-4 mb-3">Size</span>
|
||||
<div class="flex align-items-center">
|
||||
<div class="flex flex-wrap gap-4 align-items-center">
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton id="size-small" v-model="size" value="small" name="sizevalue" />
|
||||
<label for="size-small" class="ml-2 font-medium">Small</label>
|
||||
</div>
|
||||
<div class="flex align-items-center ml-4">
|
||||
<div class="flex align-items-center ">
|
||||
<RadioButton id="size-normal" v-model="size" value="normal" name="sizevalue" />
|
||||
<label for="size-normal" class="ml-2 font-medium">Normal</label>
|
||||
</div>
|
||||
<div class="flex align-items-center ml-4">
|
||||
<div class="flex align-items-center">
|
||||
<RadioButton id="size-large" v-model="size" value="large" name="sizevalue" />
|
||||
<label for="size-large" class="ml-2 font-medium">Large</label>
|
||||
</div>
|
||||
|
@ -55,7 +55,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div :ref="editorRef" :class="editorclass" style="border-radius: '10px'">
|
||||
<div class="p-fluid formgrid grid">
|
||||
<div class="p-fluid formgrid grid pt-3">
|
||||
<div class="field col-12 xl:col-6">
|
||||
<label for="username" class="font-semibold mb-3 p-component">Username</label>
|
||||
<InputText id="username" type="text" />
|
||||
|
@ -159,7 +159,7 @@ export default {
|
|||
computed: {
|
||||
editorclass() {
|
||||
return [
|
||||
'p-4 designer-demo',
|
||||
'designer-demo',
|
||||
{
|
||||
'p-input-filled': this.$primevue.config.inputStyle === 'filled',
|
||||
'demo-size-small': this.size === 'small',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue