Docs for TabView
parent
dfa8f2f0c3
commit
e372525f46
|
@ -18,7 +18,7 @@ export default {
|
||||||
if (!tab.disabled && !tab.d_active) {
|
if (!tab.disabled && !tab.d_active) {
|
||||||
this.activateTab(tab);
|
this.activateTab(tab);
|
||||||
|
|
||||||
this.$emit('tabchange', {
|
this.$emit('tab-change', {
|
||||||
originalEvent: event,
|
originalEvent: event,
|
||||||
tab: tab
|
tab: tab
|
||||||
});
|
});
|
||||||
|
|
|
@ -79,7 +79,7 @@ export default {
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Header Template</h3>
|
<h3>Header Template</h3>
|
||||||
<p>Header of a tab supports templating to place custom html content instead of strings as well.</p>
|
<p>Custom content for the title section of a panel is defined using the header template.</p>
|
||||||
<CodeHighlight>
|
<CodeHighlight>
|
||||||
<TabView class="tabview-custom">
|
<TabView class="tabview-custom">
|
||||||
<TabPanel>
|
<TabPanel>
|
||||||
|
@ -99,7 +99,7 @@ export default {
|
||||||
</TabView>
|
</TabView>
|
||||||
</CodeHighlight>
|
</CodeHighlight>
|
||||||
|
|
||||||
<h3>Properties For TabPanel</h3>
|
<h3>Properties of TabPanel</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
|
@ -133,24 +133,27 @@ export default {
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<h3>Properties of Accordion</h3>
|
||||||
|
<p>Any attribute such as style and class are passed to the main container element.</p>
|
||||||
|
|
||||||
<h3>Events</h3>
|
<h3>Events</h3>
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Parameters</th>
|
<th>Parameters</th>
|
||||||
<th>Description</th>
|
<th>Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>tabchange</td>
|
<td>tab-change</td>
|
||||||
<td>event.originalEvent: Browser event <br/>
|
<td>event.originalEvent: Browser event <br/>
|
||||||
event.tab: Selected tab
|
event.tab: Selected tab
|
||||||
</td>
|
</td>
|
||||||
<td>Callback to invoke when an active tab is changed.</td>
|
<td>Callback to invoke when an active tab is changed.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
@ -160,32 +163,32 @@ export default {
|
||||||
<div class="doc-tablewrapper">
|
<div class="doc-tablewrapper">
|
||||||
<table class="doc-table">
|
<table class="doc-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Element</th>
|
<th>Element</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tabview</td>
|
<td>p-tabview</td>
|
||||||
<td>Container element.</td>
|
<td>Container element.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tabview-nav</td>
|
<td>p-tabview-nav</td>
|
||||||
<td>Container of headers.</td>
|
<td>Container of headers.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tabview-selected</td>
|
<td>p-tabview-selected</td>
|
||||||
<td>Selected tab header.</td>
|
<td>Selected tab header.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tabview-panels</td>
|
<td>p-tabview-panels</td>
|
||||||
<td>Container panels.</td>
|
<td>Container panels.</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td>p-tabview-panel</td>
|
<td>p-tabview-panel</td>
|
||||||
<td>Content of a tab.</td>
|
<td>Content of a tab.</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue