Skip to content

Commit 1d9184c

Browse files
author
Mikolaj Smolenski
committed
Vue Pills page update
1 parent 8aa0ff9 commit 1d9184c

File tree

3 files changed

+1624
-194
lines changed

3 files changed

+1624
-194
lines changed

‎en/vue/web/docs/components/pills/a.html

Lines changed: 133 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ <h3 class="secondary-heading mb-3">Import statement</h3>
1414
<mdbsnippet>
1515

1616
<code data-lang="javascript" data-name="JS">
17-
import { mdbTabs } from 'mdbvue';
17+
import { mdbTabs } from 'mdbvue';
1818
</code>
1919

2020
</mdbsnippet>
@@ -33,117 +33,138 @@ <h2 class="section-heading mb-4">
3333
</h2>
3434

3535
<section>
36-
<table class="table table-striped table-bordered">
37-
<thead>
38-
<tr>
39-
<th class="th-sm">Name</th>
40-
<th class="th-sm">Type</th>
41-
<th class="th-sm">Default</th>
42-
<th class="th-sm">Description</th>
43-
<th class="th-sm">Example</th>
44-
</tr>
45-
</thead>
46-
<tbody>
47-
<tr>
48-
<td class="text-nowrap"><code class="highlighter-rouge">tag</code></td>
49-
<td><i>String</i></td>
50-
<td><code>'ul'</code></td>
51-
<td>Changes tabs's wrapper tag</td>
52-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs tag="div" /&gt;</code></td>
53-
</tr>
54-
<tr>
55-
<td class="text-nowrap"><code class="highlighter-rouge">active</code></td>
56-
<td><i>Number</i></td>
57-
<td><code>0</code></td>
58-
<td>Active element index</td>
59-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs :active="1" /&gt;</code></td>
60-
</tr>
61-
<tr>
62-
<td class="text-nowrap"><code class="highlighter-rouge">color</code></td>
63-
<td><i>String</i></td>
64-
<td><code>'default'</code></td>
65-
<td>Changes tabs's color</td>
66-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs color="cyan" /&gt;</code></td>
67-
</tr>
68-
<tr>
69-
<td class="text-nowrap"><code class="highlighter-rouge">pills</code></td>
70-
<td><i>Boolean</i></td>
71-
<td><code>false</code></td>
72-
<td>Changes tabs into pills</td>
73-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs pills /&gt;</code></td>
74-
</tr>
75-
<tr>
76-
<td class="text-nowrap"><code class="highlighter-rouge">tabs</code></td>
77-
<td><i>Boolean</i></td>
78-
<td><code>false</code></td>
79-
<td>Changes tabs into nav tabs</td>
80-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs tabs /&gt;</code></td>
81-
</tr>
82-
<tr>
83-
<td class="text-nowrap"><code class="highlighter-rouge">vertical</code></td>
84-
<td><i>Boolean</i></td>
85-
<td><code>false</code></td>
86-
<td>Flex column layout</td>
87-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs vertical /&gt;</code></td>
88-
</tr>
89-
<tr>
90-
<td class="text-nowrap"><code class="highlighter-rouge">justify</code></td>
91-
<td><i>Boolean</i></td>
92-
<td><code>false</code></td>
93-
<td>Justified layout</td>
94-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs justify /&gt;</code></td>
95-
</tr>
96-
<tr>
97-
<td class="text-nowrap"><code class="highlighter-rouge">navClass</code></td>
98-
<td><i>String</i></td>
99-
<td><code></code></td>
100-
<td>Adds new classes to already existing</td>
101-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs navClass="..." /&gt;</code></td>
102-
</tr>
103-
<tr>
104-
<td class="text-nowrap"><code class="highlighter-rouge">card</code></td>
105-
<td><i>Boolean</i></td>
106-
<td><code>false</code></td>
107-
<td>Changes tabs style into card layout</td>
108-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs card /&gt;</code></td>
109-
</tr>
110-
<tr>
111-
<td class="text-nowrap"><code class="highlighter-rouge">header</code></td>
112-
<td><i>Boolean</i></td>
113-
<td><code>false</code></td>
114-
<td>Changes tabs style into card header layout</td>
115-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs header /&gt;</code></td>
116-
</tr>
117-
<tr>
118-
<td class="text-nowrap"><code class="highlighter-rouge">links</code></td>
119-
<td><i>Array</i></td>
120-
<td><code></code></td>
121-
<td>Nav links data</td>
122-
<td><code class="language-markup">&lt;mdb-tabs :links="[{...}, {...}]" /&gt;</code></td>
123-
</tr>
124-
<tr>
125-
<td class="text-nowrap"><code class="highlighter-rouge">content</code></td>
126-
<td><i>Array</i></td>
127-
<td><code></code></td>
128-
<td>Tab content data</td>
129-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs :content="[{...}, {...}]" /&gt;</code></td>
130-
</tr>
131-
<tr>
132-
<td class="text-nowrap"><code class="highlighter-rouge">border</code></td>
133-
<td><i>Boolean</i></td>
134-
<td><code>false</code></td>
135-
<td>Replace card shadow by border</td>
136-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs border /&gt;</code></td>
137-
</tr>
138-
<tr>
139-
<td class="text-nowrap"><code class="highlighter-rouge">zIndex</code></td>
140-
<td><i>Number</i></td>
141-
<td><code>1</code></td>
142-
<td>Change component z-index value</td>
143-
<td><code class="language-markup text-nowrap">&lt;mdb-tabs zIndex="0" /&gt;</code></td>
144-
</tr>
145-
</tbody>
146-
</table>
36+
<table class="table table-striped table-bordered">
37+
<thead>
38+
<tr>
39+
<th class="th-sm">Name</th>
40+
<th class="th-sm">Type</th>
41+
<th class="th-sm">Default</th>
42+
<th class="th-sm">Description</th>
43+
<th class="th-sm">Example</th>
44+
</tr>
45+
</thead>
46+
<tbody>
47+
<tr>
48+
<td class="text-nowrap"><code class="highlighter-rouge">tag</code></td>
49+
<td><i>String</i></td>
50+
<td><code>'ul'</code></td>
51+
<td>Changes tabs's wrapper tag</td>
52+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs tag="div" /&gt;</code></td>
53+
</tr>
54+
<tr>
55+
<td class="text-nowrap"><code class="highlighter-rouge">active</code></td>
56+
<td><i>Number</i></td>
57+
<td><code>0</code></td>
58+
<td>Active element index</td>
59+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs :active="1" /&gt;</code></td>
60+
</tr>
61+
<tr>
62+
<td class="text-nowrap"><code class="highlighter-rouge">color</code></td>
63+
<td><i>String</i></td>
64+
<td><code>'default'</code></td>
65+
<td>Changes tabs's color</td>
66+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs color="cyan" /&gt;</code></td>
67+
</tr>
68+
<tr>
69+
<td class="text-nowrap"><code class="highlighter-rouge">pills</code></td>
70+
<td><i>Boolean</i></td>
71+
<td><code>false</code></td>
72+
<td>Changes tabs into pills</td>
73+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs pills /&gt;</code></td>
74+
</tr>
75+
<tr>
76+
<td class="text-nowrap"><code class="highlighter-rouge">tabs</code></td>
77+
<td><i>Boolean</i></td>
78+
<td><code>false</code></td>
79+
<td>Changes tabs into nav tabs</td>
80+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs tabs /&gt;</code></td>
81+
</tr>
82+
<tr>
83+
<td class="text-nowrap"><code class="highlighter-rouge">vertical</code></td>
84+
<td><i>Boolean</i></td>
85+
<td><code>false</code></td>
86+
<td>Flex column layout</td>
87+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs vertical /&gt;</code></td>
88+
</tr>
89+
<tr>
90+
<td class="text-nowrap"><code class="highlighter-rouge">justify</code></td>
91+
<td><i>Boolean</i></td>
92+
<td><code>false</code></td>
93+
<td>Justified layout</td>
94+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs justify /&gt;</code></td>
95+
</tr>
96+
<tr>
97+
<td class="text-nowrap"><code class="highlighter-rouge">navClass</code></td>
98+
<td><i>String</i></td>
99+
<td><code></code></td>
100+
<td>Adds new classes to already existing</td>
101+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs navClass="..." /&gt;</code></td>
102+
</tr>
103+
<tr>
104+
<td class="text-nowrap"><code class="highlighter-rouge">card</code></td>
105+
<td><i>Boolean</i></td>
106+
<td><code>false</code></td>
107+
<td>Changes tabs style into card layout</td>
108+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs card /&gt;</code></td>
109+
</tr>
110+
<tr>
111+
<td class="text-nowrap"><code class="highlighter-rouge">header</code></td>
112+
<td><i>Boolean</i></td>
113+
<td><code>false</code></td>
114+
<td>Changes tabs style into card header layout</td>
115+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs header /&gt;</code></td>
116+
</tr>
117+
<tr>
118+
<td class="text-nowrap"><code class="highlighter-rouge">links</code></td>
119+
<td><i>Array</i></td>
120+
<td><code></code></td>
121+
<td>Nav links data</td>
122+
<td><code class="language-markup">&lt;mdb-tabs :links="[{...}, {...}]" /&gt;</code></td>
123+
</tr>
124+
<tr>
125+
<td class="text-nowrap"><code class="highlighter-rouge">content</code></td>
126+
<td><i>Array</i></td>
127+
<td><code></code></td>
128+
<td>Tab content data</td>
129+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs :content="[{...}, {...}]" /&gt;</code></td>
130+
</tr>
131+
<tr>
132+
<td class="text-nowrap"><code class="highlighter-rouge">border</code></td>
133+
<td><i>Boolean</i></td>
134+
<td><code>false</code></td>
135+
<td>Replace card shadow by border</td>
136+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs border /&gt;</code></td>
137+
</tr>
138+
<tr>
139+
<td class="text-nowrap"><code class="highlighter-rouge">zIndex</code></td>
140+
<td><i>Number</i></td>
141+
<td><code>1</code></td>
142+
<td>Change component z-index value</td>
143+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs zIndex="0" /&gt;</code></td>
144+
</tr>
145+
<tr>
146+
<td class="text-nowrap"><code class="highlighter-rouge">gradient</code></td>
147+
<td><i>String</i></td>
148+
<td><code></code></td>
149+
<td>Change color theme to gradient</td>
150+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs gradient="peach" /&gt;</code></td>
151+
</tr>
152+
<tr>
153+
<td class="text-nowrap"><code class="highlighter-rouge">outline</code></td>
154+
<td><i>String</i></td>
155+
<td><code></code></td>
156+
<td>Change color theme to outline</td>
157+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs outline="green" /&gt;</code></td>
158+
</tr>
159+
<tr>
160+
<td class="text-nowrap"><code class="highlighter-rouge">rounded</code></td>
161+
<td><i>Boolean</i></td>
162+
<td><code></code></td>
163+
<td>Change design to rounded</td>
164+
<td><code class="language-markup text-nowrap">&lt;mdb-tabs rounded /&gt;</code></td>
165+
</tr>
166+
</tbody>
167+
</table>
147168

148169
</section>
149170

‎en/vue/web/docs/components/pills/o-ss.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
11
<li class="nav-item"><a class="nav-link active" href="#introduction">Introduction</a></li>
22
<li class="nav-item"><a class="nav-link" href="#pills-justified">Pills justified</a></li>
3+
<li class="nav-item"><a class="nav-link" href="#pills-dropdown">Pills with dropdown</a></li>
4+
<li class="nav-item"><a class="nav-link" href="#gradient">Gradient pills</a></li>
5+
<li class="nav-item"><a class="nav-link" href="#rounded">Rounded pills</a></li>
6+
<li class="nav-item"><a class="nav-link" href="#icons">Pills with icons</a></li>
7+
<li class="nav-item"><a class="nav-link" href="#content">Pills with content</a></li>
8+
<li class="nav-item"><a class="nav-link" href="#animations">Colors animations</a></li>
9+
<li class="nav-item"><a class="nav-link" href="#modal">Pills within modal</a></li>

0 commit comments

Comments
 (0)