csb added
Tuğçe Küçükoğlu
parent
5c35abb9d0
commit
3ac8b3fa16
|
|
@ -182,9 +182,12 @@ import AvatarGroup from 'primevue/avatargroup';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/avatar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="AvatarDemo" :sources="sources" :components="['AvatarGroup']" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<div class="p-grid">
|
||||
|
|
@ -279,3 +282,115 @@ import AvatarGroup from 'primevue/avatargroup';
|
|||
</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="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Label</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Label - Circle</h5>
|
||||
<Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Label - Badge</h5>
|
||||
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Icon</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Circle</h5>
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
|
||||
<Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Icon - Badge</h5>
|
||||
<Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Image</h5>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Avatar Group</h5>
|
||||
<AvatarGroup class="p-mb-3">
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
|
||||
<Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
|
||||
</AvatarGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-4">
|
||||
<div class="card">
|
||||
<h5>Image - Badge</h5>
|
||||
<Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -141,9 +141,12 @@ import Chip from 'primevue/chip';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/chip" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ChipDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h5>Basic</h5>
|
||||
|
|
@ -184,3 +187,69 @@ import Chip from 'primevue/chip';
|
|||
</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>Basic</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Action" class="p-mr-2" />
|
||||
<Chip label="Comedy" class="p-mr-2" />
|
||||
<Chip label="Mystery" class="p-mr-2" />
|
||||
<Chip label="Thriller" removable />
|
||||
</div>
|
||||
|
||||
<h5>Icon</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
|
||||
<Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
|
||||
<Chip label="Google" icon="pi pi-google" class="p-mr-2" />
|
||||
<Chip label="Microsoft" icon="pi pi-microsoft" removable />
|
||||
</div>
|
||||
|
||||
<h5>Image</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
|
||||
<Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" removable />
|
||||
</div>
|
||||
|
||||
<h5>Styling</h5>
|
||||
<div class="p-d-flex p-ai-center">
|
||||
<Chip label="Action" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 custom-chip" />
|
||||
<Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip" removable />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
.p-chip.custom-chip {
|
||||
background: var(--primary-color);
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -118,9 +118,12 @@ data() {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressbar" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ProgressBarDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Dynamic</h3>
|
||||
|
|
@ -172,3 +175,68 @@ 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>Dynamic</h5>
|
||||
<ProgressBar :value="value1" />
|
||||
|
||||
<h5>Static</h5>
|
||||
<ProgressBar :value="value2" :showValue="false" />
|
||||
|
||||
<h5>Indeterminate</h5>
|
||||
<ProgressBar mode="indeterminate" style="height: .5em" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value1: 0,
|
||||
value2: 50
|
||||
}
|
||||
},
|
||||
interval: null,
|
||||
methods: {
|
||||
startProgress() {
|
||||
this.interval = setInterval(() => {
|
||||
let newValue = this.value1 + Math.floor(Math.random() * 10) + 1;
|
||||
if (newValue >= 100) {
|
||||
newValue = 100;
|
||||
}
|
||||
this.value1 = newValue;
|
||||
}, 2000);
|
||||
},
|
||||
endProgress() {
|
||||
clearInterval(this.interval);
|
||||
this.interval = null;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.startProgress();
|
||||
},
|
||||
beforeUnmount() {
|
||||
this.endProgress();
|
||||
}
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -107,9 +107,12 @@ import ProgressSpinner from 'primevue/progressspinner';
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/progressspinner" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="ProgressSpinnerDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<h3>Basic</h3>
|
||||
|
|
@ -122,4 +125,38 @@ import ProgressSpinner from 'primevue/progressspinner';
|
|||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
</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>Basic</h5>
|
||||
<ProgressSpinner />
|
||||
|
||||
<h5>Custom</h5>
|
||||
<ProgressSpinner style="width:50px;height:50px" strokeWidth="8" fill="#EEEEEE" animationDuration=".5s"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -92,9 +92,12 @@ directives: {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/ripple" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="RippleDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code><template v-pre>
|
||||
<div class="card-container p-d-flex">
|
||||
|
|
@ -159,4 +162,79 @@ export default {}
|
|||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
</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-container p-d-flex">
|
||||
<div class="card primary-box p-ripple" v-ripple>Default</div>
|
||||
<div class="card styled-box-green p-ripple" v-ripple>Green</div>
|
||||
<div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
|
||||
<div class="card styled-box-purple p-ripple" v-ripple>Purple</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
::v-deep(.card-container) {
|
||||
.card {
|
||||
width: 75px;
|
||||
height: 75px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 1rem;
|
||||
user-select: none;
|
||||
padding: 0;
|
||||
|
||||
&.primary-box {
|
||||
background-color: var(--primary-color);
|
||||
padding: 0;
|
||||
color: var(--primary-color-text);
|
||||
}
|
||||
|
||||
&.styled-box-green {
|
||||
.p-ink {
|
||||
background: rgba(#4baf50, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.styled-box-orange {
|
||||
.p-ink {
|
||||
background: rgba(#ffc106, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&.styled-box-purple {
|
||||
.p-ink {
|
||||
background: rgba(#9c27b0, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -138,9 +138,12 @@ export default {
|
|||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<div class="p-d-flex p-jc-between">
|
||||
<a href="https://github.com/primefaces/primevue/tree/master/src/views/terminal" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<LiveEditor name="TerminalDemo" :sources="sources" />
|
||||
</div>
|
||||
<pre v-code>
|
||||
<code>
|
||||
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
||||
|
|
@ -217,3 +220,89 @@ p {
|
|||
</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">
|
||||
<p>Enter "date" to display the current date, "greet {0}" for a message and "random" to get a random number.</p>
|
||||
<Terminal welcomeMessage="Welcome to PrimeVue" prompt="primevue $" class="dark-demo-terminal" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TerminalService from "primevue/terminalservice";
|
||||
export default {
|
||||
methods: {
|
||||
commandHandler(text) {
|
||||
let response;
|
||||
let argsIndex = text.indexOf(' ');
|
||||
let command = argsIndex !== -1 ? text.substring(0, argsIndex) : text;
|
||||
|
||||
switch(command) {
|
||||
case "date":
|
||||
response = 'Today is ' + new Date().toDateString();
|
||||
break;
|
||||
|
||||
case "greet":
|
||||
response = 'Hola ' + text.substring(argsIndex + 1);
|
||||
break;
|
||||
|
||||
case "random":
|
||||
response = Math.floor(Math.random() * 100);
|
||||
break;
|
||||
|
||||
default:
|
||||
response = "Unknown command: " + command;
|
||||
}
|
||||
|
||||
TerminalService.emit('response', response);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
TerminalService.on('command', this.commandHandler);
|
||||
},
|
||||
beforeUnmount() {
|
||||
TerminalService.off('command', this.commandHandler);
|
||||
}
|
||||
}`,
|
||||
style: `<style lang="scss" scoped>
|
||||
p {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
::v-deep(.dark-demo-terminal) {
|
||||
background-color: #212121;
|
||||
color: #ffffff;
|
||||
|
||||
.p-terminal-command {
|
||||
color: #80CBC4;
|
||||
}
|
||||
|
||||
.p-terminal-prompt {
|
||||
color: #FFD54F;
|
||||
}
|
||||
|
||||
.p-terminal-response {
|
||||
color: #9FA8DA;
|
||||
}
|
||||
}
|
||||
</style>`
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
LiveEditor
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue