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

Templating demo for button

pull/1088/head
Cagatay Civici 2021-04-15 20:34:17 +03:00
parent 8a5731757d
commit 788926cb89
3 changed files with 61 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/assets/images/logo-white.svg Normal file
View File

@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="139px" height="158px" viewBox="0 0 139 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
<title>head</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard" transform="translate(-3.000000, -7.000000)">
<g id="head" transform="translate(3.000000, 7.000000)">
<polygon id="chick-right" fill="#ffffff" fill-rule="nonzero" points="102.295646 72.1832018 91.4643424 69.7770951 99.8886897 81.8076287 99.8886897 119.102283 128.772166 95.0412157 128.772166 54.1374014 115.533906 58.9496148"></polygon>
<polygon id="chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(27.078259, 86.619842) scale(-1, 1) translate(-27.078259, -86.619842) " points="19.255651 72.1832018 8.42434732 69.7770951 16.8486946 81.8076287 16.8486946 119.102283 45.7321712 95.0412157 45.7321712 54.1374014 32.4939111 58.9496148"></polygon>
<polygon id="mask" fill="#ffffff" points="40.9182584 84.2137354 50.5460839 69.7770951 56.5634749 73.3862552 80.6330387 73.3862552 86.6504296 69.7770951 96.2782551 84.2137354 96.2782551 138.351137 89.057386 149.178617 80.6330387 157.599991 56.5634749 157.599991 48.1391276 149.178617 40.9182584 138.351137"></polygon>
<polygon id="bottom-chick-right" fill="#ffffff" fill-rule="nonzero" points="99.8886897 141.960297 115.533906 126.320603 115.533906 110.680909 99.8886897 123.914496"></polygon>
<polygon id="bottom-chick-left" fill="#ffffff" fill-rule="nonzero" transform="translate(29.485216, 126.320603) scale(-1, 1) translate(-29.485216, -126.320603) " points="21.6626074 141.960297 37.3078239 126.320603 37.3078239 110.680909 21.6626074 123.914496"></polygon>
<path d="M89.4422148,12.342 L93.8712988,22.8580139 L79.4295605,68.5740417 L71.0052132,68.5740417 L71.0042148,56.994 L89.4422148,12.342 Z M48.1982148,11.287 L66.1912148,57.769 L66.1913004,68.5740417 L58.9704313,68.5740417 L43.3252148,22.8580139 L48.1982148,11.287 Z M66.1913004,0 L66.1912148,46.688 L59.3732148,29.074 L61.3773876,30.0763341 L61.3773876,0 L66.1913004,0 Z M75.8191259,1.91846539e-13 L75.8191259,30.0763341 L78.3042148,28.833 L71.0042148,46.513 L71.0052132,0 L75.8191259,1.91846539e-13 Z M84.2434732,0 L87.2562148,7.154 L80.6322148,23.196 L80.6330387,1.91846539e-13 L84.2434732,0 Z M56.5634749,0 L56.5632148,21.816 L50.4332148,5.981 L52.9530403,0 L56.5634749,0 Z" fill="#455C71"></path>
<path d="M138.399992,19.2488538 L131.179123,49.3251879 L79.4295605,68.5740417 L78.2260823,68.5740417 L92.6678206,22.8580139 L138.399992,19.2488538 Z M0,19.2488538 L44.528693,22.8580139 L60.1739095,68.5740417 L58.9704313,68.5740417 L7.22086913,49.3251879 L0,19.2488538 Z" id="head-right-2" fill="#ffffff" fill-rule="nonzero"></path>
<polygon id="ear-right" fill="#455C71" fill-rule="nonzero" points="96.2782551 19.2488538 121.551297 16.8427471 104.702602 0 87.8539078 0"></polygon>
<polygon id="ear-left" fill="#455C71" fill-rule="nonzero" transform="translate(32.493911, 9.624427) scale(-1, 1) translate(-32.493911, -9.624427) " points="24.0695638 19.2488538 49.3426058 16.8427471 32.4939111 0 15.6452165 0"></polygon>
<polygon id="Path-2" fill="#455C71" fill-rule="nonzero" points="18.7999989 20.7999988 44.7999973 22.7999986 60.3999964 68.5999959 58.7999965 68.5999959 41.9999975 62.3999963"></polygon>
<polygon id="Path-3" fill="#455C71" fill-rule="nonzero" points="119.199993 20.7999988 92.3999945 22.7999986 77.5999954 68.5999959 79.5999953 68.5599959 95.1999943 62.7999963"></polygon>
<polygon id="Path-4" fill="#455C71" fill-rule="nonzero" points="48.3999971 72.7999957 50.399997 69.5999959 57.1999966 72.7999957 81.1999952 72.7999957 86.3999949 69.5999959 88.7999947 72.7999957 68.5999959 107.199994"></polygon>
<path d="M90.2104053,-1.0658141e-14 L68.485709,52.6144989 L48.1188062,-1.0658141e-14 L90.2104053,-1.0658141e-14 Z" id="Path-6" fill="#ffffff" fill-rule="nonzero"></path>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

9
src/views/button/ButtonDemo.vue
View File

@ -108,6 +108,15 @@
<Button type="button" label="Emails" badge="8" /> <Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /> <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Templating</h5>
<Button type="button" class="p-px-3">
<img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
</Button>
<Button type="button" class="p-button-outlined p-button-success">
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
<span class="p-ml-2 p-text-bold">PrimeVue</span>
</Button>
<h5>Button Set</h5> <h5>Button Set</h5>
<span class="p-buttonset"> <span class="p-buttonset">
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />

31
src/views/button/ButtonDoc.vue
View File

@ -119,11 +119,16 @@ import Button from 'primevue/button';
</code></pre> </code></pre>
<h5>Slot</h5> <h5>Templating</h5>
<p>Custom content can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p> <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
<pre v-code><code> <pre v-code><code>
&lt;Button&gt; &lt;Button type="button" class="p-px-3"&gt;
Custom Content &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
&lt;/Button&gt;
&lt;Button type="button" class="p-button-outlined p-button-success"&gt;
&lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt;
&lt;span class="p-ml-2 p-text-bold"&gt;PrimeVue&lt;/span&gt;
&lt;/Button&gt; &lt;/Button&gt;
</code></pre> </code></pre>
@ -323,6 +328,15 @@ export default {
<Button type="button" label="Emails" badge="8" /> <Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /> <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Templating</h5>
<Button type="button" class="p-px-3">
<img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
</Button>
<Button type="button" class="p-button-outlined p-button-success">
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
<span class="p-ml-2 p-text-bold">PrimeVue</span>
</Button>
<h5>Button Set</h5> <h5>Button Set</h5>
<span class="p-buttonset"> <span class="p-buttonset">
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />
@ -487,6 +501,15 @@ export default {
<Button type="button" label="Emails" badge="8" /> <Button type="button" label="Emails" badge="8" />
<Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" /> <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
<h5>Templating</h5>
<Button type="button" class="p-px-3">
<img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
</Button>
<Button type="button" class="p-button-outlined p-button-success">
<img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
<span class="p-ml-2 p-text-bold">PrimeVue</span>
</Button>
<h5>Button Set</h5> <h5>Button Set</h5>
<span class="p-buttonset"> <span class="p-buttonset">
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />