Skip to content

Commit 6ba1323

Browse files
filipkappafilipkappa
authored
add buttons translated in browser
1 parent 013581d commit 6ba1323

File tree

7 files changed

+2011
-0
lines changed

7 files changed

+2011
-0
lines changed

‎cn/_mdb5/standard/web/docs/components/buttons/a-ss.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<li class="nav-item"><a class="nav-link active" href="#api-section-methods">Methods </a></li>
2+
<li class="nav-item"><a class="nav-link" href="#api-section-import">Import</a></li>

‎cn/_mdb5/standard/web/docs/components/buttons/a.html

Lines changed: 234 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,234 @@
1+
<section>
2+
<!--Section: Introduction-->
3+
<section id="api-section-introduction">
4+
<!-- Main title -->
5+
<h2 class="h1 font-weight-bold">
6+
<font style="vertical-align: inherit;">
7+
<font style="vertical-align: inherit;">
8+
按钮-API
9+
</font>
10+
</font>
11+
</h2>
12+
</section>
13+
<!--Section: Introduction-->
14+
15+
<hr class="my-5">
16+
17+
<!--Section: Methods-->
18+
<section id="api-section-methods">
19+
<!-- Section title -->
20+
<h2 class="mb-4">
21+
<font style="vertical-align: inherit;">
22+
<font style="vertical-align: inherit;">方法</font>
23+
</font>
24+
</h2>
25+
26+
<p>
27+
<font style="vertical-align: inherit;">
28+
<font style="vertical-align: inherit;">您可以使用按钮构造函数创建按钮实例，例如：</font>
29+
</font>
30+
</p>
31+
32+
<!-- mdbsnippet -->
33+
<div class="docs-pills border">
34+
<div class="d-flex justify-content-between py-2" style="padding-left: .6rem;">
35+
<ul class="nav nav-pills">
36+
<li class="nav-item"><a class="nav-link active show" data-toggle="tab"
37+
href="#mdb_0bac3af402f6a77f007ec3469ac166aa" role="tab">
38+
<font style="vertical-align: inherit;">
39+
<font style="vertical-align: inherit;">的JavaScript</font>
40+
</font>
41+
</a></li>
42+
</ul>
43+
</div>
44+
<div class="tab-content">
45+
<div class="tab-pane fade active show" id="mdb_0bac3af402f6a77f007ec3469ac166aa" role="tabpanel">
46+
<div class="code-toolbar">
47+
<pre
48+
class="grey lighten-3 mb-0 line-numbers language-js"><code class=" language-js"><span class="token keyword">var</span> button <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'myButton'</span><span class="token punctuation">)</span>
49+
<span class="token keyword">var</span> bsButton <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mdb<span class="token punctuation">.</span>Button</span><span class="token punctuation">(</span>button<span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
50+
<div class="toolbar">
51+
<div class="toolbar-item"><button class="btn-copy-code btn btn-dark btn-sm" style="right: 165px;">
52+
<font style="vertical-align: inherit;">
53+
<font style="vertical-align: inherit;">复制</font>
54+
</font>
55+
</button></div>
56+
<div class="toolbar-item"><a class="btn btn-dark btn-sm export-to-snippet">
57+
<font style="vertical-align: inherit;">
58+
<font style="vertical-align: inherit;">在MDB编辑器中打开</font>
59+
</font>
60+
</a></div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
</div><!-- /.mdbsnippet -->
66+
67+
<table class="table my-4 table-striped table-bordered">
68+
<thead>
69+
<tr>
70+
<th>
71+
<font style="vertical-align: inherit;">
72+
<font style="vertical-align: inherit;">方法</font>
73+
</font>
74+
</th>
75+
<th>
76+
<font style="vertical-align: inherit;">
77+
<font style="vertical-align: inherit;">描述</font>
78+
</font>
79+
</th>
80+
<th>
81+
<font style="vertical-align: inherit;">
82+
<font style="vertical-align: inherit;">例</font>
83+
</font>
84+
</th>
85+
</tr>
86+
</thead>
87+
<tbody>
88+
<tr>
89+
<td>
90+
<code>toggle</code>
91+
</td>
92+
<td>
93+
<font style="vertical-align: inherit;">
94+
<font style="vertical-align: inherit;">
95+
切换推动状态。</font>
96+
<font style="vertical-align: inherit;">使按钮具有已被激活的外观。
97+
</font>
98+
</font>
99+
</td>
100+
<td>
101+
<font style="vertical-align: inherit;">
102+
<font style="vertical-align: inherit;">instance.toggle（）</font>
103+
</font>
104+
</td>
105+
</tr>
106+
<tr>
107+
<td>
108+
<code>dispose</code>
109+
</td>
110+
<td>
111+
<font style="vertical-align: inherit;">
112+
<font style="vertical-align: inherit;">
113+
销毁元素的按钮。
114+
</font>
115+
</font>
116+
</td>
117+
<td>
118+
<font style="vertical-align: inherit;">
119+
<font style="vertical-align: inherit;">instance.dispose（）</font>
120+
</font>
121+
</td>
122+
</tr>
123+
</tbody>
124+
</table>
125+
126+
<p>
127+
<font style="vertical-align: inherit;">
128+
<font style="vertical-align: inherit;">例如，切换所有按钮</font>
129+
</font>
130+
</p>
131+
132+
<!-- prettier-ignore -->
133+
<!-- mdbsnippet -->
134+
<div class="docs-pills border">
135+
<div class="d-flex justify-content-between py-2" style="padding-left: .6rem;">
136+
<ul class="nav nav-pills">
137+
<li class="nav-item"><a class="nav-link active show" data-toggle="tab"
138+
href="#mdb_efdb075da3a409b0a2771ea3adf44899" role="tab">
139+
<font style="vertical-align: inherit;">
140+
<font style="vertical-align: inherit;">的JavaScript</font>
141+
</font>
142+
</a></li>
143+
</ul>
144+
</div>
145+
<div class="tab-content">
146+
<div class="tab-pane fade active show" id="mdb_efdb075da3a409b0a2771ea3adf44899" role="tabpanel">
147+
<div class="code-toolbar">
148+
<pre
149+
class="grey lighten-3 mb-0 line-numbers language-js"><code class=" language-js"><span class="token keyword">var</span> buttons <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'.btn'</span><span class="token punctuation">)</span>
150+
buttons<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span>button<span class="token punctuation">)</span> <span class="token punctuation">{</span>
151+
<span class="token keyword">var</span> button <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">mdb<span class="token punctuation">.</span>Button</span><span class="token punctuation">(</span>button<span class="token punctuation">)</span>
152+
button<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
153+
<span class="token punctuation">}</span><span class="token punctuation">)</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
154+
<div class="toolbar">
155+
<div class="toolbar-item"><button class="btn-copy-code btn btn-dark btn-sm" style="right: 165px;">
156+
<font style="vertical-align: inherit;">
157+
<font style="vertical-align: inherit;">复制</font>
158+
</font>
159+
</button></div>
160+
<div class="toolbar-item"><a class="btn btn-dark btn-sm export-to-snippet">
161+
<font style="vertical-align: inherit;">
162+
<font style="vertical-align: inherit;">在MDB编辑器中打开</font>
163+
</font>
164+
</a></div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</div><!-- /.mdbsnippet -->
170+
</section>
171+
<!--Section: Methods-->
172+
173+
<hr class="my-5">
174+
175+
<!--Section: Import-->
176+
<section id="api-section-import">
177+
<!-- Section title -->
178+
<h2 class="mb-4">
179+
<font style="vertical-align: inherit;">
180+
<font style="vertical-align: inherit;">进口</font>
181+
</font>
182+
</h2>
183+
184+
<!-- Description -->
185+
<p>
186+
<strong>
187+
<font style="vertical-align: inherit;">
188+
<font style="vertical-align: inherit;">MDB UI KIT</font>
189+
</font>
190+
</strong>
191+
<font style="vertical-align: inherit;">
192+
<font style="vertical-align: inherit;">也可以与模块捆绑器一起使用。</font>
193+
<font style="vertical-align: inherit;">使用以下代码导入此组件：
194+
</font>
195+
</font>
196+
</p>
197+
198+
<!-- prettier-ignore -->
199+
<!-- mdbsnippet -->
200+
<div class="docs-pills border">
201+
<div class="d-flex justify-content-between py-2" style="padding-left: .6rem;">
202+
<ul class="nav nav-pills">
203+
<li class="nav-item"><a class="nav-link active show" data-toggle="tab"
204+
href="#mdb_c365512135a3f8d6ac6d412f1dcc7601" role="tab">
205+
<font style="vertical-align: inherit;">
206+
<font style="vertical-align: inherit;">的JavaScript</font>
207+
</font>
208+
</a></li>
209+
</ul>
210+
</div>
211+
<div class="tab-content">
212+
<div class="tab-pane fade active show" id="mdb_c365512135a3f8d6ac6d412f1dcc7601" role="tabpanel">
213+
<div class="code-toolbar">
214+
<pre
215+
class="grey lighten-3 mb-0 line-numbers language-js"><code class=" language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'mdb-ui-kit'</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>
216+
<div class="toolbar">
217+
<div class="toolbar-item"><button class="btn-copy-code btn btn-dark btn-sm" style="right: 165px;">
218+
<font style="vertical-align: inherit;">
219+
<font style="vertical-align: inherit;">复制</font>
220+
</font>
221+
</button></div>
222+
<div class="toolbar-item"><a class="btn btn-dark btn-sm export-to-snippet">
223+
<font style="vertical-align: inherit;">
224+
<font style="vertical-align: inherit;">在MDB编辑器中打开</font>
225+
</font>
226+
</a></div>
227+
</div>
228+
</div>
229+
</div>
230+
</div>
231+
</div><!-- /.mdbsnippet -->
232+
</section>
233+
<!--Section: Import-->
234+
</section>

‎cn/_mdb5/standard/web/docs/components/buttons/buttons.jpg

35 KB
Loading

‎cn/_mdb5/standard/web/docs/components/buttons/data.php

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<?php
2+
global $data_var;
3+
$data_var = array(
4+
'main_title' => 'Buttons',
5+
'seo_title' => 'Buttons - Bootstrap 5 & Material Design 2.0 components',
6+
'description' => 'Buttons built with the latest Bootstrap 5 & Material Design 2.0. Multiple examples, a user-friendly guide, extensive API, and customization tools',
7+
'url' => 'https://mdbootstrap.com/docs/standard/components/buttons/',
8+
'image' => 'https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content-gh/en/_mdb5/standard/web/docs/components/buttons/buttons.jpg',
9+
'video' => 'https://www.youtube.com/watch?v=c9B4TPnak1A',
10+
);

‎cn/_mdb5/standard/web/docs/components/buttons/js.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<script>
2+
3+
</script>

‎cn/_mdb5/standard/web/docs/components/buttons/o-ss.html

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<li class="nav-item">
2+
<a class="nav-link active" href="#section-introduction">Introduction</a>
3+
</li>
4+
<li class="nav-item">
5+
<a class="nav-link" href="#section-basic-example">Basic example</a>
6+
</li>
7+
<li class="nav-item">
8+
<a class="nav-link" href="#section-colors">Colors</a>
9+
</li>
10+
<li class="nav-item">
11+
<a class="nav-link" href="#section-outline">Outline</a>
12+
</li>
13+
<li class="nav-item">
14+
<a class="nav-link" href="#section-rounded">Rounded</a>
15+
</li>
16+
<li class="nav-item">
17+
<a class="nav-link" href="#section-rounded-outline">Rounded outline</a>
18+
</li>
19+
<li class="nav-item">
20+
<a class="nav-link" href="#section-floating">Floating</a>
21+
</li>
22+
<li class="nav-item">
23+
<a class="nav-link" href="#section-social">Social</a>
24+
<ul class="nav flex-column pl-3">
25+
<li class="nav-item">
26+
<a class="nav-link" href="#subsection-sample-brands">Sample brands</a>
27+
</li>
28+
<li class="nav-item">
29+
<a class="nav-link" href="#subsection-floating-social">Floating social</a>
30+
</li>
31+
<li class="nav-item">
32+
<a class="nav-link" href="#subsection-text">Text</a>
33+
</li>
34+
<li class="nav-item">
35+
<a class="nav-link" href="#subsection-only-icon">Only icon</a>
36+
</li>
37+
<li class="nav-item">
38+
<a class="nav-link" href="#subsection-notifications">Notifications</a>
39+
</li>
40+
</ul>
41+
</li>
42+
<li class="nav-item">
43+
<a class="nav-link" href="#section-tags">Tags</a>
44+
</li>
45+
<li class="nav-item">
46+
<a class="nav-link" href="#section-sizes">Sizes</a>
47+
</li>
48+
<li class="nav-item">
49+
<a class="nav-link" href="#section-blocks">Blocks</a>
50+
</li>
51+
<li class="nav-item">
52+
<a class="nav-link" href="#section-active-state">Active state</a>
53+
</li>
54+
<li class="nav-item">
55+
<a class="nav-link" href="#section-disabled-state">Disabled state</a>
56+
</li>
57+
<li class="nav-item">
58+
<a class="nav-link" href="#section-toggle-states">Toggle states</a>
59+
</li>

0 commit comments

Comments
 (0)