Use primeflex for margins

pull/411/head
cagataycivici 2020-07-18 14:07:19 +03:00
parent 84af612211
commit 291adada5f
2 changed files with 20 additions and 20 deletions

View File

@ -10,15 +10,15 @@
<div class="content-section implementation">
<Toolbar>
<template slot="left">
<Button label="New" icon="pi pi-plus" style="margin-right: .5em" />
<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" style="margin-right: .5em" />
<i class="pi pi-bars p-toolbar-separator p-mr-2" />
<SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
</template>
<template slot="right">
<Button icon="pi pi-search" style="margin-right: .5em" />
<Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .5em" />
<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>

View File

@ -11,18 +11,18 @@ import Toolbar from 'primevue/toolbar';
<p>Toolbar provides <i>left</i> and <i>right</i> templates to place content at these sections.</p>
<CodeHighlight>
&lt;Toolbar&gt;
&lt;template slot="left"&gt;
&lt;Button label="New" icon="pi pi-plus" style="margin-right: .5em" /&gt;
&lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
&lt;i class="pi pi-bars p-toolbar-separator" style="margin-right: .5em" /&gt;
&lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
&lt;/template&gt;
&lt;template slot="left"&gt;
&lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
&lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
&lt;i class="pi pi-bars p-toolbar-separator p-mr-2" /&gt;
&lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
&lt;/template&gt;
&lt;template slot="right"&gt;
&lt;Button icon="pi pi-search" style="margin-right: .5em" /&gt;
&lt;Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .5em" /&gt;
&lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
&lt;/template&gt;
&lt;template slot="right"&gt;
&lt;Button icon="pi pi-search" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-calendar" class="p-button-success p-mr-2" /&gt;
&lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
&lt;/template&gt;
&lt;/Toolbar&gt;
</CodeHighlight>
@ -65,15 +65,15 @@ import Toolbar from 'primevue/toolbar';
<template v-pre>
&lt;Toolbar&gt;
&lt;template slot="left"&gt;
&lt;Button label="New" icon="pi pi-plus" style="margin-right: .5em" /&gt;
&lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
&lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
&lt;i class="pi pi-bars p-toolbar-separator" style="margin-right: .5em" /&gt;
&lt;Button label="Save" icon="pi pi-check" class="p-button-warning" /&gt;
&lt;i class="pi pi-bars p-toolbar-separator p-mr-2" /&gt;
&lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
&lt;/template&gt;
&lt;template slot="right"&gt;
&lt;Button icon="pi pi-search" style="margin-right: .5em" /&gt;
&lt;Button icon="pi pi-calendar" class="p-button-success" style="margin-right: .5em" /&gt;
&lt;Button icon="pi pi-search" class="p-mr-2" /&gt;
&lt;Button icon="pi pi-calendar" class="p-button-success p-mr-2" /&gt;
&lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
&lt;/template&gt;
&lt;/Toolbar&gt;