238 lines
14 KiB
HTML
238 lines
14 KiB
HTML
|
<div class="grid">
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="card panel-demo">
|
||
|
|
<h5>Toolbar</h5>
|
||
|
|
<p-toolbar>
|
||
|
|
<div class="p-toolbar-group-left flex flex-wrap">
|
||
|
|
<button pButton type="button" label="New" icon="pi pi-plus"></button>
|
||
|
|
<button pButton type="button" label="Update" class="p-button-secondary"
|
||
|
|
icon="pi pi-refresh"></button>
|
||
|
|
|
||
|
|
<i class="pi pi-bars p-toolbar-separator"></i>
|
||
|
|
|
||
|
|
<button pButton type="button" class="p-button-success" icon="pi pi-check"></button>
|
||
|
|
<button pButton type="button" class="p-button-help" icon="pi pi-print"></button>
|
||
|
|
<button pButton type="button" class="p-button-danger" icon="pi pi-trash"></button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="p-toolbar-group-right">
|
||
|
|
<p-splitButton label="Options" icon="pi pi-check" [model]="items"></p-splitButton>
|
||
|
|
</div>
|
||
|
|
</p-toolbar>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 md:col-6">
|
||
|
|
<div class="card">
|
||
|
|
<h5>AccordionPanel</h5>
|
||
|
|
<p-accordion>
|
||
|
|
<p-accordionTab header="Header I" [selected]="true">
|
||
|
|
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-accordionTab>
|
||
|
|
<p-accordionTab header="Header II">
|
||
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||
|
|
totam rem aperiam, eaque
|
||
|
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||
|
|
enim ipsam voluptatem quia
|
||
|
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||
|
|
voluptatem sequi nesciunt.
|
||
|
|
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||
|
|
</p-accordionTab>
|
||
|
|
<p-accordionTab header="Header III">
|
||
|
|
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||
|
|
deleniti atque corrupti quos dolores
|
||
|
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||
|
|
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||
|
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||
|
|
eligendi optio cumque nihil impedit
|
||
|
|
quo minus.
|
||
|
|
</p-accordionTab>
|
||
|
|
</p-accordion>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h5>TabView</h5>
|
||
|
|
<p-tabView orientation="left">
|
||
|
|
<p-tabPanel header="Header I">
|
||
|
|
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-tabPanel>
|
||
|
|
<p-tabPanel header="Header II">
|
||
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||
|
|
totam rem aperiam, eaque
|
||
|
|
ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
|
||
|
|
enim ipsam voluptatem quia
|
||
|
|
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||
|
|
voluptatem sequi nesciunt.
|
||
|
|
Consectetur, adipisci velit, sed quia non numquam eius modi.
|
||
|
|
</p-tabPanel>
|
||
|
|
<p-tabPanel header="Header III">
|
||
|
|
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||
|
|
deleniti atque corrupti quos dolores
|
||
|
|
et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||
|
|
officia deserunt mollitia animi, id est laborum et dolorum fuga.
|
||
|
|
Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||
|
|
eligendi optio cumque nihil impedit
|
||
|
|
quo minus.
|
||
|
|
</p-tabPanel>
|
||
|
|
</p-tabView>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12 md:col-6">
|
||
|
|
<div class="card">
|
||
|
|
<h5>Panel</h5>
|
||
|
|
<p-panel header="Header" [toggleable]="true">
|
||
|
|
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-panel>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="card">
|
||
|
|
<h5>Fieldset</h5>
|
||
|
|
<p-fieldset legend="Legend" toggleable="true">
|
||
|
|
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 class="card">
|
||
|
|
<div class="flex align-items-center justify-content-between mb-0 p-3 pb-0">
|
||
|
|
<h5>Card</h5>
|
||
|
|
<p-menu #menu [popup]="true" [model]="cardMenu"></p-menu>
|
||
|
|
<button pButton type="button" icon="pi pi-plus" class="p-button-rounded p-button-plain p-button-text"
|
||
|
|
(click)="menu.toggle($event)"></button>
|
||
|
|
</div>
|
||
|
|
<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>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="card">
|
||
|
|
<h5>Divider</h5>
|
||
|
|
<div class="grid">
|
||
|
|
<div class="col-5 flex align-items-center justify-content-center">
|
||
|
|
<div class="p-fluid">
|
||
|
|
<div class="p-field mb-3">
|
||
|
|
<label for="username">Username</label>
|
||
|
|
<input pInputText id="username" type="text"/>
|
||
|
|
</div>
|
||
|
|
<div class="p-field mb-3">
|
||
|
|
<label for="password">Password</label>
|
||
|
|
<input pInputText id="password" type="password"/>
|
||
|
|
</div>
|
||
|
|
<p-button label="Login" styleClass="m-0"></p-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-1">
|
||
|
|
<p-divider layout="vertical">
|
||
|
|
<b>OR</b>
|
||
|
|
</p-divider>
|
||
|
|
</div>
|
||
|
|
<div class="col-5 align-items-center justify-content-center">
|
||
|
|
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
|
||
|
|
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
|
||
|
|
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||
|
|
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.</p>
|
||
|
|
|
||
|
|
<p-divider layout="horizontal" align="center">
|
||
|
|
<span class="p-tag">Badge</span>
|
||
|
|
</p-divider>
|
||
|
|
|
||
|
|
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
|
||
|
|
deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
|
||
|
|
cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est
|
||
|
|
laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||
|
|
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
|
||
|
|
|
||
|
|
<p-divider align="right">
|
||
|
|
<p-button label="Button" icon="pi pi-search" styleClass="p-button-outlined"></p-button>
|
||
|
|
</p-divider>
|
||
|
|
|
||
|
|
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
|
||
|
|
voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur
|
||
|
|
a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis
|
||
|
|
doloribus asperiores repellat.
|
||
|
|
Donec vel volutpat ipsum. Integer nunc magna, posuere ut tincidunt eget, egestas vitae sapien.
|
||
|
|
Morbi dapibus luctus odio.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="col-12">
|
||
|
|
<div class="card">
|
||
|
|
<h5>Splitter</h5>
|
||
|
|
<p-splitter [style]="{'height': '300px'}" [panelSizes]="[20,80]" [minSizes]="[10,0]" styleClass="mb-5">
|
||
|
|
<ng-template pTemplate="panel">
|
||
|
|
<div class="col flex align-items-center justify-content-center p-2" style="overflow: auto">
|
||
|
|
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.
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
<ng-template pTemplate="panel">
|
||
|
|
<p-splitter layout="vertical" [panelSizes]="[30,70]" [minSizes]="[10,10]" panelStyleClass="splitter-overflow">
|
||
|
|
<ng-template pTemplate="panel">
|
||
|
|
<div class="d-flex align-items-center justify-content-center p-2">
|
||
|
|
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
|
||
|
|
doloremque
|
||
|
|
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
|
||
|
|
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
|
||
|
|
voluptas
|
||
|
|
sit
|
||
|
|
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
|
||
|
|
voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius
|
||
|
|
modi.
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
<ng-template pTemplate="panel">
|
||
|
|
<div class="d-flex align-items-center justify-content-center p-2">
|
||
|
|
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis
|
||
|
|
praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias
|
||
|
|
excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui
|
||
|
|
officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem
|
||
|
|
rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est
|
||
|
|
eligendi optio cumque nihil impedit quo minus.
|
||
|
|
</div>
|
||
|
|
</ng-template>
|
||
|
|
</p-splitter>
|
||
|
|
</ng-template>
|
||
|
|
</p-splitter>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|