Docs for TabView

pull/12/head
cagataycivici 2019-05-23 12:01:41 +03:00
parent dfa8f2f0c3
commit e372525f46
2 changed files with 42 additions and 39 deletions

View File

@ -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
}); });

View File

@ -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>
&lt;TabView class="tabview-custom"&gt; &lt;TabView class="tabview-custom"&gt;
&lt;TabPanel&gt; &lt;TabPanel&gt;
@ -99,7 +99,7 @@ export default {
&lt;/TabView&gt; &lt;/TabView&gt;
</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>