Skip to content

Commit 401d8a7

Browse files
Dreamer-PaulDreamer-Paul
committed
New Feature
完善部分组件的小细节，并添加一些新的功能
1 parent 5de6500 commit 401d8a7

File tree

8 files changed

+454
-294
lines changed

8 files changed

+454
-294
lines changed

‎animation.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,10 +38,10 @@ <h1>动画与特效</h1>
3838
<h2>开始使用</h2>
3939
</div>
4040
<div class="section-content">
41-
<p>先添加类 "ani"，以开始为元素设置动画。</p>
42-
<p>添加 "infinite" 类可以让动画循环播放。</p>
43-
<p>添加 "loop" 类可以让动画播放完毕之后原路返回。</p>
44-
<p>添加 "slow"，"fast" 类可以设置动画播放的速度，慢为2秒，默认为1秒，快为0.5秒</p>
41+
<p>先添加类 <code>ani</code>，以开始为元素设置动画。</p>
42+
<p>添加 <code>infinite</code> 扩展类可以让动画循环播放。</p>
43+
<p>添加 <code>loop</code> 扩展类可以让动画播放完毕之后原路返回。</p>
44+
<p>添加 <code>slow</code>、<code>fast</code> 扩展类可以设置动画播放的速度（慢为 2 秒，默认为 1 秒，快为 0.5 秒）</p>
4545
</div>
4646
</section>
4747
<section>
@@ -53,8 +53,8 @@ <h2>缩放动画：</h2>
5353
<button class="btn yellow ani scale-small infinite">从大变小</button>
5454
<button class="btn yellow ani scale-large infinite">从小变大</button>
5555
</div>
56-
<pre><code>&lt;button class="btn yellow ani scale-small infinite"&gt;从大变小&lt;/button&gt;
57-
&lt;button class="btn yellow ani scale-large infinite"&gt;从小变大&lt;/button&gt;</code></pre>
56+
<pre>&lt;button class="btn yellow ani scale-small infinite"&gt;从大变小&lt;/button&gt;
57+
&lt;button class="btn yellow ani scale-large infinite"&gt;从小变大&lt;/button&gt;</pre>
5858
</div>
5959
</section>
6060
<section>
@@ -69,11 +69,11 @@ <h2>淡入淡出动画：</h2>
6969
<button class="btn yellow ani fade-in-left infinite">向左淡出</button>
7070
<button class="btn yellow ani fade-in-right infinite">向右淡出</button>
7171
</div>
72-
<pre><code>&lt;button class="btn yellow ani fade-in infinite"&gt;一般淡出&lt;/button&gt;
72+
<pre>&lt;button class="btn yellow ani fade-in infinite"&gt;一般淡出&lt;/button&gt;
7373
&lt;button class="btn yellow ani fade-in-top infinite"&gt;向上淡出&lt;/button&gt;
7474
&lt;button class="btn yellow ani fade-in-bottom infinite"&gt;向下淡出&lt;/button&gt;
7575
&lt;button class="btn yellow ani fade-in-left infinite"&gt;向左淡出&lt;/button&gt;
76-
&lt;button class="btn yellow ani fade-in-right infinite"&gt;向右淡出&lt;/button&gt;</code></pre>
76+
&lt;button class="btn yellow ani fade-in-right infinite"&gt;向右淡出&lt;/button&gt;</pre>
7777
</div>
7878
</section>
7979
<section>
@@ -85,8 +85,8 @@ <h2>旋转动画：</h2>
8585
<button class="btn yellow ani rotate infinite">旋转</button>
8686
<button class="btn yellow ani slide-left-right infinite">左右摇动</button>
8787
</div>
88-
<pre><code>&lt;button class="btn yellow ani rotate infinite"&gt;旋转&lt;/button&gt;
89-
&lt;button class="btn yellow ani slide-left-right infinite"&gt;左右摇动&lt;/button&gt;</code></pre>
88+
<pre>&lt;button class="btn yellow ani rotate infinite"&gt;旋转&lt;/button&gt;
89+
&lt;button class="btn yellow ani slide-left-right infinite"&gt;左右摇动&lt;/button&gt;</pre>
9090
</div>
9191
</section>
9292
<section>
@@ -98,8 +98,8 @@ <h2>位移动画：</h2>
9898
<button class="btn yellow ani up-and-down infinite">上下运动</button>
9999
<button class="btn yellow ani left-and-right infinite">左右运动</button>
100100
</div>
101-
<pre><code>&lt;button class="btn yellow ani up-and-down infinite"&gt;上下运动&lt;/button&gt;
102-
&lt;button class="btn yellow ani left-and-right infinite"&gt;左右运动&lt;/button&gt;</code></pre>
101+
<pre>&lt;button class="btn yellow ani up-and-down infinite"&gt;上下运动&lt;/button&gt;
102+
&lt;button class="btn yellow ani left-and-right infinite"&gt;左右运动&lt;/button&gt;</pre>
103103
</div>
104104
</section>
105105
</div>

‎components.html‎

Lines changed: 31 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -38,40 +38,40 @@ <h1>附加组件</h1>
3838
<h2>按钮</h2>
3939
</div>
4040
<div class="section-content">
41-
<p>给 a 元素、input 按钮元素或 button 元素添加“btn”类，即可让此元素变成一个按钮。</p>
41+
<p>给 <code>a</code> 元素、<code>input</code> 按钮元素或 <code>button</code> 元素添加 <code>btn</code> 类，即可让此元素变成一个按钮。</p>
4242
<p>
4343
<input class="btn" type="button" value="input 按钮"/>
4444
<button class="btn">button 按钮</button>
4545
<a class="btn">a 按钮</a>
4646
</p>
47-
<pre><code>&lt;input class="btn" type="button" value="input 按钮"/&gt;
47+
<pre>&lt;input class="btn" type="button" value="input 按钮"/&gt;
4848
&lt;button class="btn"&gt;button 按钮&lt;/button&gt;
49-
&lt;a class="btn"&gt;a 按钮&lt;/a&gt;</code></pre>
50-
<p>给按钮添加类"small"和"large"可以实现小按钮和大按钮</p>
49+
&lt;a class="btn"&gt;a 按钮&lt;/a&gt;</pre>
50+
<p>给按钮添加 <code>small</code> 和 <code>large</code> 扩展类，可以使按钮变小和变大。</p>
5151
<p>
5252
<button class="btn small">按钮（小）</button>
5353
<button class="btn">按钮（一般）</button>
5454
<button class="btn large">按钮（大）</button>
5555
</p>
56-
<pre><code>&lt;button class="btn small"&gt;按钮（小）&lt;/button&gt;
56+
<pre>&lt;button class="btn small"&gt;按钮（小）&lt;/button&gt;
5757
&lt;button class="btn"&gt;按钮（一般）&lt;/button&gt;
58-
&lt;button class="btn large"&gt;按钮（大）&lt;/button&gt;</code></pre>
59-
<p>添加“red”，“yellow”，“blue”，“green”类可以让按钮变成 红/黄/蓝/绿 的颜色</p>
58+
&lt;button class="btn large"&gt;按钮（大）&lt;/button&gt;</pre>
59+
<p>给按钮添加 <code>red</code>，<code>yellow</code>，<code>blue</code>，<code>green</code> 类可以让按钮变成 红/黄/蓝/绿 的颜色</p>
6060
<p>
6161
<button class="btn red">一枚红色按钮</button>
6262
<button class="btn yellow">一枚黄色按钮</button>
6363
<button class="btn blue">一枚蓝色按钮</button>
6464
<button class="btn green">一枚绿色按钮</button>
6565
</p>
66-
<pre><code>&lt;button class="btn red"&gt;一枚红色按钮&lt;/button&gt;
66+
<pre>&lt;button class="btn red"&gt;一枚红色按钮&lt;/button&gt;
6767
&lt;button class="btn yellow"&gt;一枚黄色按钮&lt;/button&gt;
6868
&lt;button class="btn blue"&gt;一枚蓝色按钮&lt;/button&gt;
69-
&lt;button class="btn green"&gt;一枚绿色按钮&lt;/button&gt;</code></pre>
69+
&lt;button class="btn green"&gt;一枚绿色按钮&lt;/button&gt;</pre>
7070
<p>禁用的按钮：</p>
7171
<p>
7272
<button class="btn red" disabled>禁用的按钮</button>
7373
</p>
74-
<pre><code></code>&lt;button class="btn red" disabled&gt;禁用的按钮&lt;/button&gt;</pre>
74+
<pre>&lt;button class="btn red" disabled&gt;禁用的按钮&lt;/button&gt;</pre>
7575
</div>
7676
</section>
7777
<section id="forms">
@@ -80,13 +80,17 @@ <h2>表单</h2>
8080
</div>
8181
<div class="section-content">
8282
<div class="bk-form">
83-
<label>活动的文本框：<input value="2333" title="2333"/></label>
84-
<label>禁用的文本框：<input value="2333" title="2333" disabled/></label>
85-
<label>只读的文本框：<input value="2333" title="2333" readonly/></label>
86-
<label>带按钮的文本框：<input value="2333" title="2333"/><button class="btn small blue">提交</button></label>
87-
<label><input type="checkbox"/>多选选项</label>
88-
<label><input type="radio"/>单选选项</label>
89-
<label>滑动条：<input type="range" name="points" min="1" max="10" value="5"/></label>
83+
<div class="bk-form-group">
84+
<label>活动的文本框：<input type="text" value="2333" title="2333"/></label>
85+
<label>禁用的文本框：<input type="text" value="2333" title="2333" disabled/></label>
86+
<label>只读的文本框：<input type="text" value="2333" title="2333" readonly/></label>
87+
<label class="submit">带按钮的文本框：<input type="text" value="2333" title="2333"/><button class="btn small blue">提交</button></label>
88+
<label><input type="checkbox"/>多选选项</label>
89+
<label><input type="radio"/>单选选项</label>
90+
<label>滑动条：<input type="range" name="points" min="1" max="10" value="5"/></label>
91+
<label>滑动按钮：<div class="sw-btn"></div></label>
92+
<textarea placeholder="自定义文本框"></textarea>
93+
</div>
9094
</div>
9195
</div>
9296
</section>
@@ -110,7 +114,7 @@ <h3>单行：</h3>
110114
<label><input type="radio" name="radio"/>单选选项 3</label>
111115
</div>
112116
</form>
113-
<pre><code>&lt;form class="bk-form"&gt;
117+
<pre>&lt;form class="bk-form"&gt;
114118
&lt;h3&gt;多行：&lt;/h3&gt;
115119
&lt;div class="bk-form-group"&gt;
116120
&lt;label&gt;&lt;input type="checkbox"/&gt;多选选项 1&lt;/label&gt;
@@ -123,7 +127,7 @@ <h3>单行：</h3>
123127
&lt;label&gt;&lt;input type="radio" name="radio"/&gt;单选选项 2&lt;/label&gt;
124128
&lt;label&gt;&lt;input type="radio" name="radio"/&gt;单选选项 3&lt;/label&gt;
125129
&lt;/div&gt;
126-
&lt;/form&gt;</code></pre>
130+
&lt;/form&gt;</pre>
127131
</div>
128132
</section>
129133
<section id="alert">
@@ -133,24 +137,24 @@ <h2>弹框与遮罩</h2>
133137
<div class="section-content">
134138
<blockquote>PS：弹框与遮罩采用了 Kico Style 内置的动画，如果您未使用内置的动画，则失去相应效果。</blockquote>
135139
<p><a class="btn blue" onclick="overlay_test_a()">点击弹出遮罩，并设定在3秒后删除</a></p>
136-
<pre><code>overlay(3000);</code></pre>
140+
<pre>&lt;script&gt;overlay(3000);&lt;/script&gt;</pre>
137141
<br/>
138142
<blockquote>PS：这段代码等价于“alert_box("这是一个弹窗测试", 1000, true);”</blockquote>
139143
<p><a class="btn blue" onclick="alert_test_a()">点击弹出弹窗，弹出遮罩，并设定在1秒后删除</a></p>
140-
<pre><code>alert_box("这是一个弹窗测试", 1000);</code></pre>
144+
<pre>&lt;script&gt;alert_box("这是一个弹窗测试", 1000);&lt;/script&gt;</pre>
141145
<br/>
142146
<p><a class="btn blue" onclick="alert_test_b()">点击弹出弹窗，并设定在1秒后删除</a></p>
143-
<pre><code>alert_box("这是一个弹窗测试", 1000, false);</code></pre>
147+
<pre>&lt;script&gt;alert_box("这是一个弹窗测试", 1000, false);&lt;/script&gt;</pre>
144148
<br/>
145-
<blockquote>PS：可使用 "red"、"yellow"、"blue"、"green" 类名，实现不同颜色的弹窗</blockquote>
149+
<blockquote>PS：可使用 <code>red</code>、<code>yellow</code>、<code>blue</code>、<code>green</code> 类名，实现不同颜色的弹窗</blockquote>
146150
<p><a class="btn blue" onclick="alert_test_c()">点击弹出绿色弹窗，并设定在1秒后删除</a></p>
147-
<pre><code>alert_box("这是一个弹窗测试", 1000, true, "green");</code></pre>
151+
<pre>&lt;script&gt;alert_box("这是一个弹窗测试", 1000, true, "green");&lt;/script&gt;</pre>
148152
<div class="bk-table">
149-
<table>
153+
<table class="border">
150154
<thead>
151155
<tr>
152-
<td>参数</td>
153-
<td>说明</td>
156+
<th>参数</th>
157+
<th>说明</th>
154158
</tr>
155159
</thead>
156160
<tbody>

0 commit comments

Comments
 (0)