btxui 1.0.2 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. package/demo.html +1 -0
  2. package/index.common.js +93 -0
  3. package/index.common.js.map +1 -0
  4. package/index.umd.js +104 -0
  5. package/index.umd.js.map +1 -0
  6. package/index.umd.min.js +2 -0
  7. package/index.umd.min.js.map +1 -0
  8. package/package.json +12 -23
  9. package/README.md +0 -42
  10. package/app.vue +0 -162
  11. package/assets/css/_main.js +0 -73
  12. package/assets/css/btx.min.css +0 -1
  13. package/assets/css/btx.mob.min.css +0 -1
  14. package/assets/css/btx.pad.min.css +0 -1
  15. package/assets/css/btx.webapp.min.css +0 -1
  16. package/assets/css/custom_fonts/iconfont.css +0 -37
  17. package/assets/css/custom_fonts/iconfont.eot +0 -0
  18. package/assets/css/custom_fonts/iconfont.svg +0 -47
  19. package/assets/css/custom_fonts/iconfont.ttf +0 -0
  20. package/assets/css/custom_fonts/iconfont.woff +0 -0
  21. package/assets/css/custom_fonts/iconfont.woff2 +0 -0
  22. package/assets/css/res-l.css +0 -47
  23. package/assets/css/res-m.css +0 -47
  24. package/assets/css/res-s.css +0 -61
  25. package/assets/custom_fonts/iconfont.css +0 -37
  26. package/assets/custom_fonts/iconfont.eot +0 -0
  27. package/assets/custom_fonts/iconfont.svg +0 -47
  28. package/assets/custom_fonts/iconfont.ttf +0 -0
  29. package/assets/custom_fonts/iconfont.woff +0 -0
  30. package/assets/custom_fonts/iconfont.woff2 +0 -0
  31. package/assets/js/Btx.js +0 -196
  32. package/assets/js/Utils.js +0 -421
  33. package/assets/js/fastclick.js +0 -802
  34. package/assets/js/lazy.min.js +0 -2
  35. package/assets/js/touchwipe.js +0 -111
  36. package/assets/server.js +0 -8
  37. package/assets/start_site_code_str.js +0 -119
  38. package/cdn/css/btx.min.css +0 -1
  39. package/cdn/css/btx.min.css.map +0 -1
  40. package/cdn/fonts/iconfont.ttf +0 -0
  41. package/cdn/fonts/iconfont.woff +0 -0
  42. package/cdn/fonts/iconfont.woff2 +0 -0
  43. package/components/BTXUI/app/app-wid.vue +0 -182
  44. package/components/BTXUI/btn/btn-wid.vue +0 -128
  45. package/components/BTXUI/carousel/carousel-wid.vue +0 -138
  46. package/components/BTXUI/checkbox/checkbox-wid.vue +0 -72
  47. package/components/BTXUI/confirm/confirm-wid.vue +0 -279
  48. package/components/BTXUI/content/content-checkbox-wid.vue +0 -44
  49. package/components/BTXUI/content/content-node-wid.vue +0 -114
  50. package/components/BTXUI/content/content-tag-wid.vue +0 -25
  51. package/components/BTXUI/content/content-wid.vue +0 -254
  52. package/components/BTXUI/core/anis/ani-fail.vue +0 -46
  53. package/components/BTXUI/core/anis/ani-loading.vue +0 -32
  54. package/components/BTXUI/core/anis/ani-notic.vue +0 -47
  55. package/components/BTXUI/core/anis/ani-success.vue +0 -48
  56. package/components/BTXUI/core/b-drag.vue +0 -258
  57. package/components/BTXUI/core/b-grid.vue +0 -84
  58. package/components/BTXUI/core/b-hot.vue +0 -171
  59. package/components/BTXUI/core/b-icon.vue +0 -76
  60. package/components/BTXUI/core/b-img.vue +0 -84
  61. package/components/BTXUI/core/b-input.vue +0 -198
  62. package/components/BTXUI/core/b-list.vue +0 -276
  63. package/components/BTXUI/core/b-text/doc.ts +0 -9
  64. package/components/BTXUI/core/b-text/index.vue +0 -16
  65. package/components/BTXUI/core/b-textarea.vue +0 -58
  66. package/components/BTXUI/core/b-video.vue +0 -35
  67. package/components/BTXUI/core/b-view/doc.ts +0 -10
  68. package/components/BTXUI/core/b-view/index.vue +0 -20
  69. package/components/BTXUI/core/b-webview.vue +0 -20
  70. package/components/BTXUI/core/lib/ChapterLink.js +0 -49
  71. package/components/BTXUI/core/lib/Search.vue +0 -60
  72. package/components/BTXUI/core/styles/doc.ts +0 -55
  73. package/components/BTXUI/core/styles/index.vue +0 -98
  74. package/components/BTXUI/core/styles/prestyles.ts +0 -471
  75. package/components/BTXUI/core/styles/theme.ts +0 -29
  76. package/components/BTXUI/drawer/drawer-wid.vue +0 -165
  77. package/components/BTXUI/drawer/title-tag-wid.vue +0 -114
  78. package/components/BTXUI/form/form-select-wid.vue +0 -57
  79. package/components/BTXUI/form/form-wid.vue +0 -324
  80. package/components/BTXUI/formPannel/form-pannel-wid.vue +0 -133
  81. package/components/BTXUI/imgsUpload/imgs-upload-wid.vue +0 -149
  82. package/components/BTXUI/index.js +0 -83
  83. package/components/BTXUI/pageFlip/page-flip-wid.vue +0 -206
  84. package/components/BTXUI/pannel/pannel-wid.vue +0 -167
  85. package/components/BTXUI/range/range-wid.vue +0 -134
  86. package/components/BTXUI/search/search-wid.vue +0 -80
  87. package/components/BTXUI/select/select-wid.vue +0 -186
  88. package/components/BTXUI/slider/slider-wid.vue +0 -444
  89. package/components/BTXUI/tab/tab-wid.vue +0 -109
  90. package/components/BTXUI/table/table-wid.vue +0 -324
  91. package/components/BTXUI/tag/tag-wid.vue +0 -183
  92. package/components/BTXUI/tags/tags-wid.vue +0 -121
  93. package/components/BTXUI/tooltip/tooltip-wid.vue +0 -146
  94. package/components/BTXUI/upload/upload-wid.vue +0 -215
  95. package/components/BTXUI/waterfall/waterfall-wid.vue +0 -166
  96. package/components/header-info.vue +0 -167
  97. package/composables/@types.ts +0 -4
  98. package/composables/api.ts +0 -18
  99. package/env.d.ts +0 -5
  100. package/main.js +0 -16
  101. package/nuxt.config.ts +0 -51
  102. package/pages/article.vue +0 -16
  103. package/pages/download.vue +0 -50
  104. package/pages/example/app_wid/app/data_demo.vue +0 -9
  105. package/pages/example/app_wid/app/download_demo.vue +0 -9
  106. package/pages/example/app_wid/app/list_demo.vue +0 -11
  107. package/pages/example/app_wid/app/system_demo.vue +0 -9
  108. package/pages/example/app_wid/app_wid_demo.vue +0 -198
  109. package/pages/example/app_wid/btn_wid_demo.vue +0 -179
  110. package/pages/example/app_wid/carousel_wid_demo.vue +0 -152
  111. package/pages/example/app_wid/checkbox_wid_demo.vue +0 -65
  112. package/pages/example/app_wid/confirm_wid_demo.vue +0 -197
  113. package/pages/example/app_wid/content_wid_demo.vue +0 -369
  114. package/pages/example/app_wid/drawer_wid_demo.vue +0 -155
  115. package/pages/example/app_wid/form_pannel_wid_demo.vue +0 -338
  116. package/pages/example/app_wid/form_wid_demo.vue +0 -550
  117. package/pages/example/app_wid/imgs_upload_wid_demo.vue +0 -159
  118. package/pages/example/app_wid/index.js +0 -158
  119. package/pages/example/app_wid/page_flip_wid_demo.vue +0 -99
  120. package/pages/example/app_wid/pannel_wid_demo.vue +0 -177
  121. package/pages/example/app_wid/range_wid_demo.vue +0 -101
  122. package/pages/example/app_wid/search_wid_demo.vue +0 -75
  123. package/pages/example/app_wid/select_wid_demo.vue +0 -217
  124. package/pages/example/app_wid/slider_wid_demo.vue +0 -143
  125. package/pages/example/app_wid/tab_wid_demo.vue +0 -170
  126. package/pages/example/app_wid/table_wid_demo.vue +0 -377
  127. package/pages/example/app_wid/tag_wid_demo.vue +0 -133
  128. package/pages/example/app_wid/tags_wid_demo.vue +0 -143
  129. package/pages/example/app_wid/tooltip_wid_demo.vue +0 -117
  130. package/pages/example/app_wid/upload_wid_demo.vue +0 -123
  131. package/pages/example/base_wid/b_drag_demo.vue +0 -159
  132. package/pages/example/base_wid/b_grid_demo.vue +0 -225
  133. package/pages/example/base_wid/b_hot_demo.vue +0 -135
  134. package/pages/example/base_wid/b_icon_demo.vue +0 -80
  135. package/pages/example/base_wid/b_img_demo.vue +0 -95
  136. package/pages/example/base_wid/b_input_demo.vue +0 -171
  137. package/pages/example/base_wid/b_list_demo.vue +0 -241
  138. package/pages/example/base_wid/b_style_demo.vue +0 -928
  139. package/pages/example/base_wid/b_text_demo.vue +0 -36
  140. package/pages/example/base_wid/b_textarea_demo.vue +0 -64
  141. package/pages/example/base_wid/b_video_demo.vue +0 -42
  142. package/pages/example/base_wid/b_view_demo.vue +0 -36
  143. package/pages/example/base_wid/index.js +0 -76
  144. package/pages/example/content.js +0 -49
  145. package/pages/example/global_style/animation.vue +0 -197
  146. package/pages/example/global_style/color.vue +0 -134
  147. package/pages/example/global_style/decoration.vue +0 -546
  148. package/pages/example/global_style/icon.vue +0 -345
  149. package/pages/example/global_style/index.js +0 -52
  150. package/pages/example/global_style/layout.vue +0 -846
  151. package/pages/example/global_style/special.vue +0 -37
  152. package/pages/example/global_style/table.vue +0 -298
  153. package/pages/example/global_style/text.vue +0 -159
  154. package/pages/index.vue +0 -43
  155. package/pages/level_widget.vue +0 -11
  156. package/pages/start.vue +0 -200
  157. package/plugins/index.ts +0 -2
  158. package/public/favicon.gif +0 -0
  159. package/public/fonts/iconfont.ttf +0 -0
  160. package/public/fonts/iconfont.woff +0 -0
  161. package/public/fonts/iconfont.woff2 +0 -0
  162. package/public/img/banner.jpg +0 -0
  163. package/public/img/banner2.jpg +0 -0
  164. package/public/img/bg_pattern.png +0 -0
  165. package/public/img/btx.jpg +0 -0
  166. package/public/img/btx_ui.jpg +0 -0
  167. package/public/img/dir.png +0 -0
  168. package/public/img/f.png +0 -0
  169. package/public/img/head.jpg +0 -0
  170. package/public/img/head2.jpg +0 -0
  171. package/public/img/home_ico.png +0 -0
  172. package/public/img/icons.svg +0 -164
  173. package/public/img/mechanism/b-style.png +0 -0
  174. package/public/img/mechanism/slider-wid.png +0 -0
  175. package/public/img/mechanism/upload-wid.png +0 -0
  176. package/public/img/transform_origin.png +0 -0
  177. package/sass/animation.scss +0 -400
  178. package/sass/btx.mob.scss +0 -10
  179. package/sass/btx.pad.scss +0 -3
  180. package/sass/btx.scss +0 -22
  181. package/sass/btx.webapp.scss +0 -22
  182. package/sass/colors.scss +0 -65
  183. package/sass/decoration.scss +0 -220
  184. package/sass/flex.scss +0 -29
  185. package/sass/icons.scss +0 -100
  186. package/sass/layout.scss +0 -88
  187. package/sass/reset.scss +0 -111
  188. package/sass/response/flex_mixin.scss +0 -91
  189. package/sass/response/layout_mixin.scss +0 -227
  190. package/sass/response/main.scss +0 -59
  191. package/sass/response/text_mixin.scss +0 -65
  192. package/sass/scroll.scss +0 -100
  193. package/sass/special.scss +0 -13
  194. package/sass/table.scss +0 -103
  195. package/sass/text.scss +0 -86
  196. package/sass/webpack.config.js +0 -31
  197. package/tsconfig.json +0 -4
package/pages/example/base_wid/b_style_demo.vue DELETED
@@ -1,928 +0,0 @@
1
- <template>
2
- <article>
3
- <header-info v-bind="header_info" />
4
-
5
- <!--文本相关样式-->
6
- <section>
7
- <p>文本相关样式：</p>
8
- <table response class="table">
9
- <thead>
10
- <tr>
11
- <th>样式值</th>
12
- <th>效果</th>
13
- <th>值备注</th>
14
- </tr>
15
- </thead>
16
- <tbody>
17
- <tr>
18
- <td><code>pleft</code></td>
19
- <td>文本左对齐</td>
20
- <td>-</td>
21
- </tr>
22
- <tr>
23
- <td><code>pright</code></td>
24
- <td>文本右对齐</td>
25
- <td>-</td>
26
- </tr>
27
- <tr>
28
- <td><code>pcenter</code></td>
29
- <td>文本居中对齐</td>
30
- <td>-</td>
31
- </tr>
32
- <tr>
33
- <td><code>pjustify</code></td>
34
- <td>文本两端对齐</td>
35
- <td>-</td>
36
- </tr>
37
- <tr>
38
- <td><code>font-*</code></td>
39
- <td>指定字体</td>
40
- <td>字体名（需引入对应字体样式文件）</td>
41
- </tr>
42
- <tr>
43
- <td><code>fsize-*</code></td>
44
- <td>字符间距</td>
45
- <td>任意合法值，缺省单位 em</td>
46
- </tr>
47
- <tr>
48
- <td><code>lspace-*</code></td>
49
- <td>字符间距</td>
50
- <td>任意合法值，缺省单位 rem</td>
51
- </tr>
52
- <tr>
53
- <td><code>resize</code></td>
54
- <td>重置初始字号及行高</td>
55
- <td>-</td>
56
- </tr>
57
- <tr>
58
- <td><code>ellipsis</code></td>
59
- <td>单行文本溢出省略</td>
60
- <td>-</td>
61
- </tr>
62
- <tr>
63
- <td><code>no-wrap</code></td>
64
- <td>文本禁止换行</td>
65
- <td>-</td>
66
- </tr>
67
- </tbody>
68
- </table>
69
- <p></p>
70
- </section>
71
-
72
- <!--颜色相关样式-->
73
- <section>
74
- <p>颜色相关样式：</p>
75
- <p>可以使用框架预置主题色，包括：none、main、sub、light、dgray、mgray、lgray、dark、red、green、blue、yellow、neutral。色值效果可参考 <b>"全局样式 - 色彩"</b>，此外其它任意标准 web 色彩模式都可以直接使用。</p>
76
- <p>主题色支持扩展及修改，通常可在全局文件 <b>main.js</b> 引入 <code>BTXUI/core/styles/theme.js</code> 模块，执行 <code>append(colors)</code> 方法扩展。</p>
77
- <p>【exp】扩展深红色：<code>Theme.append({ deep_red: "#ae0014" })</code></p>
78
- <table class="table">
79
- <thead>
80
- <tr>
81
- <th>样式值</th>
82
- <th>效果</th>
83
- <th>值备注</th>
84
- </tr>
85
- </thead>
86
- <tbody>
87
- <tr>
88
- <td><code>bg-color-*</code></td>
89
- <td>背景色</td>
90
- <td>任意合法值或主题色</td>
91
- </tr>
92
- <tr>
93
- <td><code>color-*</code></td>
94
- <td>文字色</td>
95
- <td>任意合法值或主题色</td>
96
- </tr>
97
- <tr>
98
- <td><code>line-*</code></td>
99
- <td>描边色</td>
100
- <td>任意合法值或主题色</td>
101
- </tr>
102
- <tr>
103
- <td><code>alpha-*</code></td>
104
- <td>不透明度</td>
105
- <td>值域范围：0 - 1</td>
106
- </tr>
107
- </tbody>
108
- </table>
109
- <p></p>
110
- </section>
111
-
112
- <!--布局相关样式-->
113
- <section>
114
- <p>布局相关样式：</p>
115
- <table class="table">
116
- <thead>
117
- <tr>
118
- <th>样式值</th>
119
- <th>效果</th>
120
- <th>值备注</th>
121
- </tr>
122
- </thead>
123
- <tbody>
124
- <tr>
125
- <td><code>show</code></td>
126
- <td>显示元素</td>
127
- <td>-</td>
128
- </tr>
129
- <tr>
130
- <td><code>hide</code></td>
131
- <td>隐藏元素</td>
132
- <td>-</td>
133
- </tr>
134
- <tr>
135
- <td><code>flex</code></td>
136
- <td>弹性布局容器</td>
137
- <td>-</td>
138
- </tr>
139
- <tr>
140
- <td><code>flex-*</code></td>
141
- <td>弹性布局容器，九宫格式布局</td>
142
- <td>值域范围：1 - 9</td>
143
- </tr>
144
- <tr>
145
- <td><code>flex-between</code></td>
146
- <td>弹性布局容器，均分排列，两端对齐</td>
147
- <td>-</td>
148
- </tr>
149
- <tr>
150
- <td><code>flex-around</code></td>
151
- <td>弹性布局容器，均分排列</td>
152
- <td>-</td>
153
- </tr>
154
- <tr>
155
- <td><code>grid</code></td>
156
- <td>弹性布局容器，可换行</td>
157
- <td>-</td>
158
- </tr>
159
- <tr>
160
- <td><code>flex-column</code></td>
161
- <td>弹性布局容器，纵向生长</td>
162
- <td>-</td>
163
- </tr>
164
- <tr>
165
- <td><code>grow-*</code></td>
166
- <td>元素自生长比率</td>
167
- <td>任意合法值</td>
168
- </tr>
169
- <tr>
170
- <td><code>order-*</code></td>
171
- <td>弹性布局项目排序</td>
172
- <td>任意合法值</td>
173
- </tr>
174
- <tr>
175
- <td><code>column-*</code></td>
176
- <td>多列布局容器</td>
177
- <td>任意合法值</td>
178
- </tr>
179
- <tr>
180
- <td><code>item</code></td>
181
- <td>多列布局元素</td>
182
- <td>-</td>
183
- </tr>
184
- <tr>
185
- <td><code>pad-*</code></td>
186
- <td>内边距</td>
187
- <td>任意合法值，缺省单位 rem</td>
188
- </tr>
189
- <tr>
190
- <td><code>pad-l-*</code></td>
191
- <td>左侧内边距</td>
192
- <td>任意合法值，缺省单位 rem</td>
193
- </tr>
194
- <tr>
195
- <td><code>pad-r-*</code></td>
196
- <td>右侧内边距</td>
197
- <td>任意合法值，缺省单位 rem</td>
198
- </tr>
199
- <tr>
200
- <td><code>pad-t-*</code></td>
201
- <td>上侧内边距</td>
202
- <td>任意合法值，缺省单位 rem</td>
203
- </tr>
204
- <tr>
205
- <td><code>pad-b-*</code></td>
206
- <td>下侧内边距</td>
207
- <td>任意合法值，缺省单位 rem</td>
208
- </tr>
209
- <tr>
210
- <td><code>pad-v-*</code></td>
211
- <td>垂直方向内边距</td>
212
- <td>任意合法值，缺省单位 rem</td>
213
- </tr>
214
- <tr>
215
- <td><code>pad-h-*</code></td>
216
- <td>水平方向内边距</td>
217
- <td>任意合法值，缺省单位 rem</td>
218
- </tr>
219
- <tr>
220
- <td><code>mrg-*</code></td>
221
- <td>外边距</td>
222
- <td>任意合法值，缺省单位 rem</td>
223
- </tr>
224
- <tr>
225
- <td><code>mrg-l-*</code></td>
226
- <td>左侧外边距</td>
227
- <td>任意合法值，缺省单位 rem</td>
228
- </tr>
229
- <tr>
230
- <td><code>mrg-r-*</code></td>
231
- <td>右侧外边距</td>
232
- <td>任意合法值，缺省单位 rem</td>
233
- </tr>
234
- <tr>
235
- <td><code>mrg-t-*</code></td>
236
- <td>上侧外边距</td>
237
- <td>任意合法值，缺省单位 rem</td>
238
- </tr>
239
- <tr>
240
- <td><code>mrg-b-*</code></td>
241
- <td>下侧外边距</td>
242
- <td>任意合法值，缺省单位 rem</td>
243
- </tr>
244
- <tr>
245
- <td><code>mrg-v-*</code></td>
246
- <td>垂直方向外边距</td>
247
- <td>任意合法值，缺省单位 rem</td>
248
- </tr>
249
- <tr>
250
- <td><code>mrg-h-*</code></td>
251
- <td>水平方向外边距</td>
252
- <td>任意合法值，缺省单位 rem</td>
253
- </tr>
254
- <tr>
255
- <td><code>max-h</code></td>
256
- <td>高度布满父容器</td>
257
- <td>-</td>
258
- </tr>
259
- <tr>
260
- <td><code>max-w</code></td>
261
- <td>宽度布满父容器</td>
262
- <td>-</td>
263
- </tr>
264
- <tr>
265
- <td><code>max</code></td>
266
- <td>宽高布满父容器</td>
267
- <td>-</td>
268
- </tr>
269
- <tr>
270
- <td><code>h-*</code></td>
271
- <td>设置高度</td>
272
- <td>任意合法值，缺省单位 rem</td>
273
- </tr>
274
- <tr>
275
- <td><code>lh-*</code></td>
276
- <td>设置行高</td>
277
- <td>任意合法值</td>
278
- </tr>
279
- <tr>
280
- <td><code>w-*</code></td>
281
- <td>设置宽度</td>
282
- <td>任意合法值，缺省单位 rem</td>
283
- </tr>
284
- <tr>
285
- <td><code>lw-*</code></td>
286
- <td>设置最小宽度</td>
287
- <td>任意合法值，缺省单位 rem</td>
288
- </tr>
289
- <tr>
290
- <td><code>rw-*</code></td>
291
- <td>设置最大宽度</td>
292
- <td>任意合法值，缺省单位 rem</td>
293
- </tr>
294
- <tr>
295
- <td><code>bh-*</code></td>
296
- <td>设置最小高度</td>
297
- <td>任意合法值，缺省单位 rem</td>
298
- </tr>
299
- <tr>
300
- <td><code>th-*</code></td>
301
- <td>设置最大高度</td>
302
- <td>任意合法值，缺省单位 rem</td>
303
- </tr>
304
- <tr>
305
- <td><code>fixed</code></td>
306
- <td>固定式定位</td>
307
- <td>-</td>
308
- </tr>
309
- <tr>
310
- <td><code>rel</code></td>
311
- <td>相对定位</td>
312
- <td>-</td>
313
- </tr>
314
- <tr>
315
- <td><code>abs</code></td>
316
- <td>绝对定位</td>
317
- <td>-</td>
318
- </tr>
319
- <tr>
320
- <td><code>z*</code></td>
321
- <td>z 轴层级</td>
322
- <td>值域范围：-1 - 10</td>
323
- </tr>
324
- <tr>
325
- <td><code>no-scroll | over-hide</code></td>
326
- <td>内容溢出隐藏</td>
327
- <td>-</td>
328
- </tr>
329
- <tr>
330
- <td><code>over-show</code></td>
331
- <td>内容溢出显示</td>
332
- <td>-</td>
333
- </tr>
334
- <tr>
335
- <td><code>over-scroll</code></td>
336
- <td>内容溢出滚动</td>
337
- <td>-</td>
338
- </tr>
339
- </tbody>
340
- </table>
341
- <p></p>
342
- </section>
343
-
344
- <!--位移及变形微调相关样式-->
345
- <section>
346
- <p>位移及变形微调相关样式：</p>
347
- <p>和全局样式稍有不同，基于百分比值的位移直接使用 "%" 单位而非 "p"。</p>
348
- <table class="table">
349
- <thead>
350
- <tr>
351
- <th>样式值</th>
352
- <th>效果</th>
353
- <th>值备注</th>
354
- </tr>
355
- </thead>
356
- <tbody>
357
- <tr>
358
- <td><code>l-*</code></td>
359
- <td>基于容器左侧水平位移</td>
360
- <td>任意合法值，缺省单位 rem</td>
361
- </tr>
362
- <tr>
363
- <td><code>r-*</code></td>
364
- <td>基于容器右侧水平位移</td>
365
- <td>任意合法值，缺省单位 rem</td>
366
- </tr>
367
- <tr>
368
- <td><code>t-*</code></td>
369
- <td>基于容器上侧垂直位移</td>
370
- <td>任意合法值，缺省单位 rem</td>
371
- </tr>
372
- <tr>
373
- <td><code>b-*</code></td>
374
- <td>基于容器下侧垂直位移</td>
375
- <td>任意合法值，缺省单位 rem</td>
376
- </tr>
377
- <tr>
378
- <td><code>translateX-*</code></td>
379
- <td>基于自身水平位移</td>
380
- <td>任意合法值，缺省单位 %</td>
381
- </tr>
382
- <tr>
383
- <td><code>translateY-*</code></td>
384
- <td>基于自身垂直位移</td>
385
- <td>任意合法值，缺省单位 %</td>
386
- </tr>
387
- <tr>
388
- <td><code>scale-*</code></td>
389
- <td>放缩</td>
390
- <td>任意合法值</td>
391
- </tr>
392
- <tr>
393
- <td><code>rotate-*</code></td>
394
- <td>旋转</td>
395
- <td>任意合法值</td>
396
- </tr>
397
- </tbody>
398
- </table>
399
- <p>此外可以通过 <code>transform-*</code> 设置任意二维变形效果；以及 <code>origin-*</code> 设置变形中心点。</p>
400
- <table class="table">
401
- <thead>
402
- <tr>
403
- <th>样式值</th>
404
- <th>效果</th>
405
- <th>示例</th>
406
- </tr>
407
- </thead>
408
- <tbody>
409
- <tr>
410
- <td><code>transform-*</code></td>
411
- <td>自由变形元素</td>
412
- <td><code>transform-scale(1.1)rotate(45deg)</code></td>
413
- </tr>
414
- <tr>
415
- <td><code>origin-*</code></td>
416
- <td>设置变形中心点</td>
417
- <td><code>origin-20px|50%</code></td>
418
- </tr>
419
- </tbody>
420
- </table>
421
- <p></p>
422
- </section>
423
-
424
- <!--背景相关样式-->
425
- <section>
426
- <p>背景相关样式：</p>
427
- <p>b-view 组件使用 bg-img 属性引入背景图片。</p>
428
- <p>相比全局样式，styles 属性支持任意合法值的背景图尺寸及定位设置，且支持 <code>bg-gradient-*</code> 线性渐变背景设置。</p>
429
- <table class="table">
430
- <thead>
431
- <tr>
432
- <th>样式值</th>
433
- <th>效果</th>
434
- <th>值备注</th>
435
- </tr>
436
- </thead>
437
- <tbody>
438
- <tr>
439
- <td><code>bg-*</code></td>
440
- <td>综合背景样式</td>
441
- <td>-</td>
442
- </tr>
443
- <tr>
444
- <td><code>bg-repeat</code></td>
445
- <td>背景图水平及垂直平铺</td>
446
- <td>-</td>
447
- </tr>
448
- <tr>
449
- <td><code>bg-repeat-x</code></td>
450
- <td>背景图水平平铺</td>
451
- <td>-</td>
452
- </tr>
453
- <tr>
454
- <td><code>bg-repeat-y</code></td>
455
- <td>背景图垂直平铺</td>
456
- <td>-</td>
457
- </tr>
458
- <tr>
459
- <td><code>bg-size-cover</code></td>
460
- <td>背景图尺寸覆盖容器</td>
461
- <td>-</td>
462
- </tr>
463
- <tr>
464
- <td><code>bg-size-contain</code></td>
465
- <td>背景图尺寸适应容器</td>
466
- <td>-</td>
467
- </tr>
468
- <tr>
469
- <td><code>bg-size-max</code></td>
470
- <td>背景图尺寸撑满容器</td>
471
- <td>-</td>
472
- </tr>
473
- <tr>
474
- <td><code>bg-size-max-h</code></td>
475
- <td>背景图高度尺寸撑满容器</td>
476
- <td>-</td>
477
- </tr>
478
- <tr>
479
- <td><code>bg-size-max-w</code></td>
480
- <td>背景图宽度尺寸撑满容器</td>
481
- <td>-</td>
482
- </tr>
483
- <tr>
484
- <td><code>bg-size-*</code></td>
485
- <td>背景图尺寸设置</td>
486
- <td>任意合法值</td>
487
- </tr>
488
- <tr>
489
- <td><code>bg-pos-*</code></td>
490
- <td>背景图九宫格定位</td>
491
- <td>值域范围：1 - 9</td>
492
- </tr>
493
- <tr>
494
- <td><code>bg-pos-*</code></td>
495
- <td>背景图定位</td>
496
- <td>任意合法值</td>
497
- </tr>
498
- <tr>
499
- <td><code>bg-gradient-*</code></td>
500
- <td>线性渐变背景</td>
501
- <td>任意合法值</td>
502
- </tr>
503
- </tbody>
504
- </table>
505
- <p></p>
506
- </section>
507
-
508
- <!--圆角相关样式-->
509
- <section>
510
- <p>圆角相关样式：</p>
511
- <table class="table">
512
- <thead>
513
- <tr>
514
- <th>样式值</th>
515
- <th>效果</th>
516
- </tr>
517
- </thead>
518
- <tbody>
519
- <tr>
520
- <td>
521
- <code>round</code>
522
- </td>
523
- <td>50% 圆角，可用于制作正圆形或椭圆形</td>
524
- </tr>
525
- <tr>
526
- <td>
527
- <code>round-lg</code>
528
- </td>
529
- <td>24px 大圆角</td>
530
- </tr>
531
- <tr>
532
- <td>
533
- <code>round-md</code>
534
- </td>
535
- <td>10px 中等圆角</td>
536
- </tr>
537
- <tr>
538
- <td>
539
- <code>round-sm</code>
540
- </td>
541
- <td>4px 小型圆角</td>
542
- </tr>
543
- <tr>
544
- <td>
545
- <code>round-t</code>
546
- </td>
547
- <td>上侧圆角</td>
548
- </tr>
549
- <tr>
550
- <td>
551
- <code>round-b</code>
552
- </td>
553
- <td>下侧圆角</td>
554
- </tr>
555
- <tr>
556
- <td>
557
- <code>round-l</code>
558
- </td>
559
- <td>左侧圆角</td>
560
- </tr>
561
- <tr>
562
- <td>
563
- <code>round-r</code>
564
- </td>
565
- <td>右侧圆角</td>
566
- </tr>
567
- </tbody>
568
- </table>
569
- <p></p>
570
- </section>
571
-
572
- <!--描边及阴影相关样式-->
573
- <section>
574
- <p>描边及阴影相关样式：</p>
575
- <table class="table">
576
- <thead>
577
- <tr>
578
- <th>样式值</th>
579
- <th>效果</th>
580
- <th>值备注</th>
581
- </tr>
582
- </thead>
583
- <tbody>
584
- <tr>
585
- <td>
586
- <code>line</code>
587
- </td>
588
- <td>设置四周实线描边</td>
589
- <td>-</td>
590
- </tr>
591
- <tr>
592
- <td>
593
- <code>line-l</code>
594
- </td>
595
- <td>设置左侧实线描边</td>
596
- <td>-</td>
597
- </tr>
598
- <tr>
599
- <td>
600
- <code>line-r</code>
601
- </td>
602
- <td>设置右侧实线描边</td>
603
- <td>-</td>
604
- </tr>
605
- <tr>
606
- <td>
607
- <code>line-t</code>
608
- </td>
609
- <td>设置上侧实线描边</td>
610
- <td>-</td>
611
- </tr>
612
- <tr>
613
- <td>
614
- <code>line-b</code>
615
- </td>
616
- <td>设置下侧实线描边</td>
617
- <td>-</td>
618
- </tr>
619
- <tr>
620
- <td>
621
- <code>dashed</code>
622
- </td>
623
- <td>设置四周虚线描边</td>
624
- <td>-</td>
625
- </tr>
626
- <tr>
627
- <td>
628
- <code>dashed-l</code>
629
- </td>
630
- <td>设置左侧虚线描边</td>
631
- <td>-</td>
632
- </tr>
633
- <tr>
634
- <td>
635
- <code>dashed-r</code>
636
- </td>
637
- <td>设置右侧虚线描边</td>
638
- <td>-</td>
639
- </tr>
640
- <tr>
641
- <td>
642
- <code>dashed-t</code>
643
- </td>
644
- <td>设置上侧虚线描边</td>
645
- <td>-</td>
646
- </tr>
647
- <tr>
648
- <td>
649
- <code>dashed-b</code>
650
- </td>
651
- <td>设置下侧虚线描边</td>
652
- <td>-</td>
653
- </tr>
654
- <tr>
655
- <td>
656
- <code>line-outside</code>
657
- </td>
658
- <td>设置外侧描边范围</td>
659
- <td>-</td>
660
- </tr>
661
- <tr>
662
- <td>
663
- <code>thick-*</code>
664
- </td>
665
- <td>设置描边粗细</td>
666
- <td>任意合法值，缺省单位 px</td>
667
- </tr>
668
- <tr>
669
- <td>
670
- <code>text-line</code>
671
- </td>
672
- <td>文字描边</td>
673
- <td>-</td>
674
- </tr>
675
- <tr>
676
- <td>
677
- <code>shadow</code>
678
- </td>
679
- <td>普通尺寸阴影</td>
680
- <td>-</td>
681
- </tr>
682
- <tr>
683
- <td>
684
- <code>shadow-no</code>
685
- </td>
686
- <td>无阴影</td>
687
- <td>-</td>
688
- </tr>
689
- <tr>
690
- <td>
691
- <code>shadow-sm</code>
692
- </td>
693
- <td>小尺寸阴影</td>
694
- <td>-</td>
695
- </tr>
696
- <tr>
697
- <td>
698
- <code>shadow-lg</code>
699
- </td>
700
- <td>大尺寸阴影</td>
701
- <td>-</td>
702
- </tr>
703
- <tr>
704
- <td>
705
- <code>shadow-relief</code>
706
- </td>
707
- <td>浮雕阴影效果</td>
708
- <td>-</td>
709
- </tr>
710
- </tbody>
711
- </table>
712
- <p></p>
713
- </section>
714
-
715
- <!--滤镜相关样式-->
716
- <section>
717
- <p>滤镜相关样式：</p>
718
- <table class="table">
719
- <thead>
720
- <tr>
721
- <th>样式类</th>
722
- <th>效果</th>
723
- <th>值备注</th>
724
- </tr>
725
- </thead>
726
- <tbody>
727
- <tr>
728
- <td>
729
- <code>.blur-no</code>
730
- </td>
731
- <td>无模糊效果</td>
732
- <td>-</td>
733
- </tr>
734
- <tr>
735
- <td>
736
- <code>.blur-sm</code>
737
- </td>
738
- <td>轻度模糊效果</td>
739
- <td>-</td>
740
- </tr>
741
- <tr>
742
- <td>
743
- <code>.blur-md</code>
744
- </td>
745
- <td>中度模糊效果</td>
746
- <td>-</td>
747
- </tr>
748
- <tr>
749
- <td>
750
- <code>.blur-lg</code>
751
- </td>
752
- <td>重度模糊效果</td>
753
- <td>-</td>
754
- </tr>
755
- <tr>
756
- <td>
757
- <code>.dark-no</code>
758
- </td>
759
- <td>原始明度效果</td>
760
- <td>-</td>
761
- </tr>
762
- <tr>
763
- <td>
764
- <code>.dark-sm</code>
765
- </td>
766
- <td>轻度低明度效果</td>
767
- <td>-</td>
768
- </tr>
769
- <tr>
770
- <td>
771
- <code>.dark-md</code>
772
- </td>
773
- <td>中度低明度效果</td>
774
- <td>-</td>
775
- </tr>
776
- <tr>
777
- <td>
778
- <code>.dark-lg</code>
779
- </td>
780
- <td>重度低明度效果</td>
781
- <td>-</td>
782
- </tr>
783
- <tr>
784
- <td>
785
- <code>.gray-no</code>
786
- </td>
787
- <td>原始纯度效果</td>
788
- <td>-</td>
789
- </tr>
790
- <tr>
791
- <td>
792
- <code>.gray-sm</code>
793
- </td>
794
- <td>轻度低纯度效果</td>
795
- <td>-</td>
796
- </tr>
797
- <tr>
798
- <td>
799
- <code>.gray-md</code>
800
- </td>
801
- <td>中度低纯度效果</td>
802
- <td>-</td>
803
- </tr>
804
- <tr>
805
- <td>
806
- <code>.gray-lg</code>
807
- </td>
808
- <td>重度低纯度效果</td>
809
- <td>-</td>
810
- </tr>
811
- </tbody>
812
- </table>
813
- <p></p>
814
- </section>
815
-
816
- <!--过渡动画相关样式-->
817
- <section>
818
- <p>过渡动画相关样式：</p>
819
- <table class="table">
820
- <thead>
821
- <tr>
822
- <th>样式值</th>
823
- <th>效果</th>
824
- <th>值备注</th>
825
- </tr>
826
- </thead>
827
- <tbody>
828
- <tr>
829
- <td>
830
- <code>trans</code>
831
- </td>
832
- <td>中速过度动画（.7s）</td>
833
- <td>-</td>
834
- </tr>
835
- <tr>
836
- <td>
837
- <code>trans-fast</code>
838
- </td>
839
- <td>快速过度动画（.4s）</td>
840
- <td>-</td>
841
- </tr>
842
- <tr>
843
- <td>
844
- <code>trans-slow</code>
845
- </td>
846
- <td>慢速过度动画（1.4s）</td>
847
- <td>-</td>
848
- </tr>
849
- <tr>
850
- <td>
851
- <code>trans-no</code>
852
- </td>
853
- <td>无过度动画</td>
854
- <td>-</td>
855
- </tr>
856
- <tr>
857
- <td>
858
- <code>trans-delay-*</code>
859
- </td>
860
- <td>动画延迟执行时间</td>
861
- <td>任意合法值，缺省单位 s</td>
862
- </tr>
863
- </tbody>
864
- </table>
865
- <p></p>
866
- </section>
867
-
868
- <!--特殊样式控制-->
869
- <section>
870
- <p>特殊样式控制：</p>
871
- <table class="table">
872
- <thead>
873
- <tr>
874
- <th>样式值</th>
875
- <th>效果</th>
876
- <th>值备注</th>
877
- </tr>
878
- </thead>
879
- <tbody>
880
- <tr>
881
- <td><code>bg-none</code></td>
882
- <td>背景点透效果</td>
883
- <td>-</td>
884
- </tr>
885
- <tr>
886
- <td><code>bg-use</code></td>
887
- <td>背景常规效果（非点透）</td>
888
- <td>-</td>
889
- </tr>
890
- <tr>
891
- <td><code>touch-none</code></td>
892
- <td>元素触控禁止</td>
893
- <td>-</td>
894
- </tr>
895
- <tr>
896
- <td><code>select-none</code></td>
897
- <td>元素长按选中禁止</td>
898
- <td>-</td>
899
- </tr>
900
- </tbody>
901
- </table>
902
- </section>
903
-
904
- </article>
905
- </template>
906
-
907
- <script>
908
- import HeaderInfo from "@/components/header-info"
909
- // import BStyle from "@/components/BTXUI/core/styles/b-style"
910
-
911
- export default {
912
- name: "b_style_demo",
913
- components: {
914
- HeaderInfo
915
- },
916
- data() {
917
- return {
918
-
919
- //初始化入参
920
- header_info: {
921
- // name: BStyle.name,
922
- // ...BStyle.introduce,
923
- }
924
-
925
- }
926
- }
927
- }
928
- </script>