some csb for components
Tuğçe Küçükoğlu
parent
1b262077ee
commit
754131d09e
|
|
@ -72,9 +72,12 @@ import Card from 'primevue/card';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/card" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="CardDemo" :sources="sources" :components="['Card', 'Button']"/>
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<Card style="width: 25rem; margin-bottom: 2em">
|
||||
|
|
@ -112,3 +115,65 @@ import Card from 'primevue/card';
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<Card style="width: 25rem; margin-bottom: 2em">
|
||||
<template #title>
|
||||
Simple Card
|
||||
</template>
|
||||
<template #content>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<Card style="width: 25em">
|
||||
<template #header>
|
||||
<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
|
||||
</template>
|
||||
<template #title>
|
||||
Advanced Card
|
||||
</template>
|
||||
<template #subtitle>
|
||||
Card subtitle
|
||||
</template>
|
||||
<template #content>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
|
||||
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
|
||||
</template>
|
||||
<template #footer>
|
||||
<Button icon="pi pi-check" label="Save" />
|
||||
<Button icon="pi pi-times" label="Cancel" class="p-button-secondary" style="margin-left: .5em" />
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -147,9 +147,12 @@ npm install quill --save
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/inputtext" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="EditorDemo" :sources="sources" :directives="['Tooltip']"/>
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Default</h3>
|
||||
|
|
@ -184,3 +187,52 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Default</h5>
|
||||
<Editor v-model="value1" editorStyle="height: 320px"/>
|
||||
|
||||
<h5>Customized</h5>
|
||||
<Editor v-model="value2" editorStyle="height: 320px">
|
||||
<template v-slot:toolbar>
|
||||
<span class="ql-formats">
|
||||
<button class="ql-bold" v-tooltip.bottom="'Bold'"></button>
|
||||
<button class="ql-italic" v-tooltip.bottom="'Italic'"></button>
|
||||
<button class="ql-underline" v-tooltip.bottom="'Underline'"></button>
|
||||
</span>
|
||||
</template>
|
||||
</Editor>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '<div>Welcome to PrimeVue <b>Editor</b></div><div><br></div>',
|
||||
value2: ''
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -161,9 +161,12 @@ import Fieldset from 'primevue/fieldset';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/fieldset" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="FieldsetDemo" :sources="sources"/>
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h5>Regular</h5>
|
||||
|
|
@ -201,3 +204,60 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Regular</h5>
|
||||
<Fieldset legend="Header">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</Fieldset>
|
||||
|
||||
<h5>Toggleable</h5>
|
||||
<Fieldset legend="Header" :toggleable="true">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
|
||||
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
</Fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: '',
|
||||
value2: '',
|
||||
value3: 'PrimeVue'
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.p-fieldset p {
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -94,9 +94,12 @@ import ScrollPanel from 'primevue/scrollpanel';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/scrollpanel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ScrollPanelDemo" :sources="sources"/>
|
||||
</div>
|
||||
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
|
|
@ -209,3 +212,124 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4 p-p-5">
|
||||
<ScrollPanel style="width: 100%; height: 200px">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Vitae et leo duis ut diam.
|
||||
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||
Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4 p-p-5">
|
||||
<ScrollPanel style="width: 100%; height: 200px" class="custombar1">
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Vitae et leo duis ut diam.
|
||||
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||
Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-4 p-p-5">
|
||||
<ScrollPanel style="width: 100%; height: 200px" class="custombar2">
|
||||
<p style="width: 600px">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Vitae et leo duis ut diam.
|
||||
Ultricies mi quis hendrerit dolor magna eget est lorem. Amet consectetur adipiscing elit ut.
|
||||
Nam libero justo laoreet sit amet. Pharetra massa massa ultricies mi quis hendrerit dolor magna.
|
||||
Est ultricies integer quis auctor elit sed vulputate. Consequat ac felis donec et. Tellus orci ac auctor augue mauris.
|
||||
Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Tincidunt arcu non sodales neque sodales.
|
||||
Metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. Sodales ut etiam sit amet nisl purus.
|
||||
Cursus sit amet dictum sit amet. Tristique senectus et netus et malesuada fames ac turpis egestas.
|
||||
Et tortor consequat id porta nibh venenatis cras sed. Diam maecenas ultricies mi eget mauris.
|
||||
Eget egestas purus viverra accumsan in nisl nisi. Suscipit adipiscing bibendum est ultricies integer.
|
||||
Mattis aliquam faucibus purus in massa tempor nec.
|
||||
</p>
|
||||
</ScrollPanel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
::v-deep(.p-scrollpanel) {
|
||||
p {
|
||||
padding: .5rem;
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.custombar1 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
background-color: var(--primary-color);
|
||||
opacity: 1;
|
||||
transition: background-color .2s;
|
||||
|
||||
&:hover {
|
||||
background-color: #007ad9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.custombar2 {
|
||||
.p-scrollpanel-wrapper {
|
||||
border-right: 9px solid var(--surface-b);
|
||||
border-bottom: 9px solid var(--surface-b);
|
||||
}
|
||||
|
||||
.p-scrollpanel-bar {
|
||||
background-color: var(--surface-d);
|
||||
border-radius: 0;
|
||||
opacity: 1;
|
||||
transition: background-color .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -238,9 +238,12 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/timeline" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="TimelineDemo" :sources="sources"/>
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<div class="card">
|
||||
|
|
@ -361,3 +364,145 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<div class="card">
|
||||
<h5>Left Align</h5>
|
||||
<Timeline :value="events1">
|
||||
<template #content="slotProps">
|
||||
{{slotProps.item.status}}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Right Align</h5>
|
||||
<Timeline :value="events1" align="right">
|
||||
<template #content="slotProps">
|
||||
{{slotProps.item.status}}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Alternate Align</h5>
|
||||
<Timeline :value="events1" align="alternate">
|
||||
<template #content="slotProps">
|
||||
{{slotProps.item.status}}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Opposite Content</h5>
|
||||
<Timeline :value="events1">
|
||||
<template #opposite="slotProps">
|
||||
<small class="p-text-secondary">{{slotProps.item.date}}</small>
|
||||
</template>
|
||||
<template #content="slotProps">
|
||||
{{slotProps.item.status}}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h5>Horizontal</h5>
|
||||
<h6>Top Align</h6>
|
||||
<Timeline :value="events2" layout="horizontal" align="top">
|
||||
<template #content="slotProps">
|
||||
{{slotProps.item}}
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<h6>Bottom Align</h6>
|
||||
<Timeline :value="events2" layout="horizontal" align="bottom">
|
||||
<template #content="slotProps">
|
||||
{{slotProps.item}}
|
||||
</template>
|
||||
</Timeline>
|
||||
|
||||
<h6>Alternate Align</h6>
|
||||
<Timeline :value="events2" layout="horizontal" align="alternate">
|
||||
<template #opposite>
|
||||
|
||||
</template>
|
||||
<template #content="slotProps">
|
||||
{{slotProps.item}}
|
||||
</template>
|
||||
</Timeline>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
events1: [
|
||||
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
|
||||
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
|
||||
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
|
||||
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
|
||||
],
|
||||
events2: [
|
||||
"2020", "2021", "2022", "2023"
|
||||
]
|
||||
}
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.custom-marker {
|
||||
display: flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #ffffff;
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
::v-deep(.p-timeline-event-content)
|
||||
::v-deep(.p-timeline-event-opposite) {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 960px) {
|
||||
::v-deep(.customized-timeline) {
|
||||
.p-timeline-event:nth-child(even) {
|
||||
flex-direction: row !important;
|
||||
|
||||
.p-timeline-event-content {
|
||||
text-align: left !important;
|
||||
}
|
||||
}
|
||||
|
||||
.p-timeline-event-opposite {
|
||||
flex: 0;
|
||||
}
|
||||
|
||||
.p-card {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -62,9 +62,12 @@ import Toolbar from 'primevue/toolbar';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/toolbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ToolbarDemo" :sources="sources" :components="['Button']"/>
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<Toolbar>
|
||||
|
|
@ -121,3 +124,43 @@ export default {
|
|||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LiveEditor from '../liveeditor/LiveEditor';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sources: {
|
||||
'template': {
|
||||
content: `<template>
|
||||
<div class="layout-content">
|
||||
<div class="content-section implementation">
|
||||
<Toolbar>
|
||||
<template #left>
|
||||
<Button label="New" icon="pi pi-plus" class="p-mr-2" />
|
||||
<Button label="Upload" icon="pi pi-upload" class="p-button-success" />
|
||||
<i class="pi pi-bars p-toolbar-separator p-mr-2" />
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<Button icon="pi pi-search" class="p-mr-2" />
|
||||
<Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
|
||||
<Button icon="pi pi-times" class="p-button-danger" />
|
||||
</template>
|
||||
</Toolbar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue