btxui 1.0.1

package/pages/example/global_style/special.vue

@@ -0,0 +1,37 @@
+<template>
+  <article>
+      <p>BTX·UI 还预置了一些特殊样式。</p>
+      <table class="table">
+          <thead>
+          <tr>
+              <th>样式类</th>
+              <th>效果</th>
+          </tr>
+          </thead>
+          <tbody>
+          <tr>
+              <td><code>.bg-none</code></td>
+              <td>背景点透效果</td>
+          </tr>
+          <tr>
+              <td><code>.bg-use</code></td>
+              <td>背景常规效果（非点透）</td>
+          </tr>
+          <tr>
+              <td><code>.touch-none</code></td>
+              <td>元素触控禁止</td>
+          </tr>
+          <tr>
+              <td><code>.select-none</code></td>
+              <td>元素长按选中禁止</td>
+          </tr>
+          </tbody>
+      </table>
+    </article>
+</template>
+
+<script>
+export default {
+  name: "special"
+};
+</script>

package/pages/example/global_style/table.vue

@@ -0,0 +1,298 @@
+<template>
+    <article>
+        <section>
+            <h5>表格</h5>
+            <p>框架预置了常用的表格样式，通过为 <code>&lt;table&gt;</code> 添加 <code>.table</code> 样式类来实现。</p>
+            <p>【示例】：</p>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Skill</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Neo</td>
+                    <td>javascript</td>
+                </tr>
+                <tr>
+                    <td>Lucy</td>
+                    <td>java</td>
+                </tr>
+                <tr>
+                    <td>Nick</td>
+                    <td>python</td>
+                </tr>
+                <tr>
+                    <td>Tommy</td>
+                    <td>dart + flutter</td>
+                </tr>
+                </tbody>
+            </table>
+            <p></p>
+        </section>
+
+        <!--宽松尺寸表格-->
+        <section>
+            <p>宽松尺寸表格：</p>
+            <p>通过添加 <code>easy</code> 属性来实现。</p>
+            <p>【示例】：</p>
+            <table class="table" easy>
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Skill</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Neo</td>
+                    <td>javascript</td>
+                </tr>
+                <tr>
+                    <td>Lucy</td>
+                    <td>java</td>
+                </tr>
+                <tr>
+                    <td>Nick</td>
+                    <td>python</td>
+                </tr>
+                <tr>
+                    <td>Tommy</td>
+                    <td>dart + flutter</td>
+                </tr>
+                </tbody>
+            </table>
+            <p></p>
+        </section>
+
+        <!--紧凑尺寸表格-->
+        <section>
+            <p>紧凑尺寸表格：</p>
+            <p>通过添加 <code>compact</code> 属性来实现。</p>
+            <p>【示例】：</p>
+            <table class="table" compact>
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Skill</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Neo</td>
+                    <td>javascript</td>
+                </tr>
+                <tr>
+                    <td>Lucy</td>
+                    <td>java</td>
+                </tr>
+                <tr>
+                    <td>Nick</td>
+                    <td>python</td>
+                </tr>
+                <tr>
+                    <td>Tommy</td>
+                    <td>dart + flutter</td>
+                </tr>
+                </tbody>
+            </table>
+            <p></p>
+        </section>
+
+        <!--线框表格-->
+        <section>
+            <p>线框表格：</p>
+            <p>通过添加 <code>border</code> 属性来实现，线框颜色可以通过框架预置色彩进行设置。</p>
+            <p>【示例】：</p>
+            <table class="table" border>
+                <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Skill</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>Neo</td>
+                    <td>javascript</td>
+                </tr>
+                <tr>
+                    <td>Lucy</td>
+                    <td>java</td>
+                </tr>
+                <tr>
+                    <td>Nick</td>
+                    <td>python</td>
+                </tr>
+                <tr>
+                    <td>Tommy</td>
+                    <td>dart + flutter</td>
+                </tr>
+                </tbody>
+            </table>
+            <p></p>
+        </section>
+
+        <!--响应式表格-->
+        <section>
+            <p>响应式表格：</p>
+            <p>通过添加 <code>response</code> 属性来实现，该属性实际只控制单元格文本内容不自动换行，要真正实现响应式效果需要对表格包裹一层结构，并通过设置 <code>.auto-h-scroll</code>
+                样式类实现。</p>
+            <p>【示例】：</p>
+            <div class="grid">
+                <div class="col-6 pad-r-1">
+                    <div class="auto-h-scroll">
+                        <table class="table" response>
+                            <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Skill</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr>
+                                <td>Neo</td>
+                                <td>javascript</td>
+                            </tr>
+                            <tr>
+                                <td>Lucy</td>
+                                <td>java</td>
+                            </tr>
+                            <tr>
+                                <td>Nick</td>
+                                <td>python</td>
+                            </tr>
+                            <tr>
+                                <td>Tommy</td>
+                                <td>dart + flutter</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="pcenter mrg-t-2 fsize-d9">表格宽度未溢出</div>
+                </div>
+                <div class="col-6 pad-l-1">
+                    <div class="auto-h-scroll">
+                        <table class="table" response>
+                            <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Skill</th>
+                                <th>Age</th>
+                                <th>Home</th>
+                                <th>Website</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                            <tr>
+                                <td>Neo</td>
+                                <td>javascript</td>
+                                <td>24</td>
+                                <td>Australia</td>
+                                <td>http://www.javascript.75sea.com</td>
+                            </tr>
+                            <tr>
+                                <td>Lucy</td>
+                                <td>java</td>
+                                <td>27</td>
+                                <td>Britain</td>
+                                <td>http://www.java.75sea.com</td>
+                            </tr>
+                            <tr>
+                                <td>Nick</td>
+                                <td>python</td>
+                                <td>31</td>
+                                <td>Britain</td>
+                                <td>http://www.python.75sea.com</td>
+                            </tr>
+                            <tr>
+                                <td>Tommy</td>
+                                <td>dart + flutter</td>
+                                <td>27</td>
+                                <td>Norway</td>
+                                <td>http://www.dart.75sea.com</td>
+                            </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div class="pcenter mrg-t-1 fsize-d9">表格宽度溢出，出现横向滚动条</div>
+                </div>
+            </div>
+            <p></p>
+        </section>
+
+        <!--暗色表格-->
+        <section>
+            <p>暗色表格：</p>
+            <p>通过添加 <code>dark</code> 属性来实现。暗色表格也可同时启用线框样式。</p>
+            <p>【示例】：</p>
+            <div class="grid">
+                <div class="col-6 pad-r-1">
+                    <table class="table" dark>
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Skill</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>Neo</td>
+                            <td>javascript</td>
+                        </tr>
+                        <tr>
+                            <td>Lucy</td>
+                            <td>java</td>
+                        </tr>
+                        <tr>
+                            <td>Nick</td>
+                            <td>python</td>
+                        </tr>
+                        <tr>
+                            <td>Tommy</td>
+                            <td>dart + flutter</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div class="col-6 pad-l-1">
+                    <table class="table" dark border>
+                        <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Skill</th>
+                        </tr>
+                        </thead>
+                        <tbody>
+                        <tr>
+                            <td>Neo</td>
+                            <td>javascript</td>
+                        </tr>
+                        <tr>
+                            <td>Lucy</td>
+                            <td>java</td>
+                        </tr>
+                        <tr>
+                            <td>Nick</td>
+                            <td>python</td>
+                        </tr>
+                        <tr>
+                            <td>Tommy</td>
+                            <td>dart + flutter</td>
+                        </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    export default {
+        name: "Table"
+    };
+</script>

package/pages/example/global_style/text.vue

@@ -0,0 +1,159 @@
+<template>
+    <article>
+        <!--标题-->
+        <section>
+            <h5>标题</h5>
+            <p>BTX·UI 重置了 <code>&lt;h1&gt;</code> - <code>&lt;h6&gt;</code> 的标题样式。使用相对单位 em，由 <code>&lt;h6&gt;</code>
+                到 <code>&lt;h1&gt;</code> 字号逐渐放大至 2 倍。</p>
+            <p>【示例】：</p>
+            <div class="flex-4 container-sm">
+                <h1 class="grow-1">h1</h1>
+                <h2 class="grow-1">h2</h2>
+                <h3 class="grow-1">h3</h3>
+                <h4 class="grow-1">h4</h4>
+                <h5 class="grow-1">h5</h5>
+                <h6>h6</h6>
+            </div>
+            <p></p>
+        </section>
+
+        <!--文本对齐-->
+        <section>
+            <h5>文本对齐</h5>
+            <table class="table">
+                <thead>
+                <tr>
+                    <th>样式类</th>
+                    <th>效果</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td><code>.pleft</code></td>
+                    <td>文本左对齐</td>
+                </tr>
+                <tr>
+                    <td><code>.pright</code></td>
+                    <td>文本右对齐</td>
+                </tr>
+                <tr>
+                    <td><code>.pcenter</code></td>
+                    <td>文本居中对齐</td>
+                </tr>
+                <tr>
+                    <td><code>.pjustify</code></td>
+                    <td>文本两端对齐</td>
+                </tr>
+                </tbody>
+            </table>
+            <p>【示例】：</p>
+            <div class="grid fsize-d9">
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-2 pleft">
+                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
+                    </div>
+                    <div class="pcenter pad-t-d5">pleft</div>
+                </div>
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-2 pright">
+                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
+                    </div>
+                    <div class="pcenter pad-t-d5">pright</div>
+                </div>
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-2 pcenter">
+                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
+                    </div>
+                    <div class="pcenter pad-t-d5">pcenter</div>
+                </div>
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-2 pjustify">
+                        在重视劳动和尊重劳动者的基础上，我们有可能来创造自己的新的道德。劳动和科学是世界上最伟大的两种力量。
+                    </div>
+                    <div class="pcenter pad-t-d5">pjustify</div>
+                </div>
+            </div>
+            <p></p>
+        </section>
+
+        <!--字号-->
+        <section>
+            <h5>字号</h5>
+            <p>通过 <code>.fsize-*</code> 可以设置元素内文本以及后代元素的文本字号，这里的字号为相对父元素的字号放缩比率。</p>
+            <p>预置的字号比率值：0 — 0.9、1 — 1.9、2、2.5、3、3.5、4、4.5、5、5.5，单位 em。数值 "." 使用 "d" 代替，"0" 使用 ""
+                空字符串代替。比如缩小为 0.9 倍，类名为 <code>.fsize-d9</code>。<code>.fsize-0</code> 可设置 0 号字。</p>
+            <p>【示例】：</p>
+            <div class="grid pcenter">
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 h-6">javascript</div>
+                    <div class="pad-t-d5 fsize-d9">初始文本大小</div>
+                </div>
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 fsize-d6 h-6">javascript
+                    </div>
+                    <div class="pad-t-d5 fsize-d9"><code>.fsize-d6</code> 缩小为 0.6 倍字号</div>
+                </div>
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 fsize-1d2 h-6">javascript
+                    </div>
+                    <div class="pad-t-d5 fsize-d9"><code>.fsize-1d2</code> 放大 1.2 倍字号</div>
+                </div>
+                <div class="col-3 pad-d5 col-6-s">
+                    <div class="bg-color-lgray round-sm pad-1 flex-4 flex-2 fsize-2 h-6">javascript
+                    </div>
+                    <div class="pad-t-d5 fsize-d9"><code>.fsize-2</code> 放大 2 倍字号</div>
+                </div>
+            </div>
+            <p></p>
+        </section>
+
+        <!--字符间距-->
+        <section>
+            <h5>字符间距</h5>
+            <p>通过 <code>.lspace-*</code> 可以设置文本内容的字符间距。默认的字符间距，框架已经进行了 1px 的初始化，预置的间距值：0 — 5，单位 px。
+            </p>
+            <p></p>
+        </section>
+
+        <!--省略文本-->
+        <section>
+            <h5>省略文本</h5>
+            <p>通过 <code>.no-wrap</code> 可以设置文本禁止换行。而 <code>.ellipsis</code> 可以设置单行文本溢出省略。</p>
+            <p>【示例】：</p>
+            <p class="ellipsis w-15">
+                <abbr title="javascript 和 php 谁是世界上最好的语言呢？">javascript 和 php 谁是世界上最好的语言呢？</abbr>
+            </p>
+            <p></p>
+        </section>
+
+        <!--代码-->
+        <section>
+            <h5>代码</h5>
+            <p>BTX·UI 重置了 <code>&lt;code&gt;</code> 样式，以实现行级代码样式。</p>
+            <p>【示例】：</p>
+            <p>在编写 javascript 代码时，可以使用 <code>console.log("调试内容")</code> 函数进行调试。</p>
+            <p></p>
+        </section>
+
+        <!--文章格式-->
+        <section>
+            <h5>文章格式</h5>
+            <p>BTX·UI 重置了 <code>&lt;article&gt;</code> 样式，以优化文章阅读格式。在 <code>&lt;article&gt;</code>包裹的内容中：</p>
+            <ol>
+                <li>基于 1.2rem 的文本大小</li>
+                <li>1.7 倍行高</li>
+                <li>标题、列表，具有下边距</li>
+                <li>拥有 "编辑模式" 样式优化</li>
+                <li>图片宽度为 100%</li>
+            </ol>
+            <p>此外还提供了 <code>.resize</code> 样式类用于恢复初始字号及行高。</p>
+        </section>
+
+    </article>
+</template>
+
+<script>
+    export default {
+        name: "Text"
+    };
+</script>

package/pages/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <article>
+        <p class="pcenter-s">
+            <img class="h-5 h-4-s" src="@/assets/img/btx_ui.jpg">
+        </p>
+        <p>BTX·UI 是一套基于 Vue 2.0 为开发者准备的多端组件库，可以帮助工程师快速开发。使用组件 Demo 可以快速体验交互细节。</p>
+        <div class="bg-color line line-neutral thick-1 round-sm pad-d5 grid">
+            <div class="col-4 flex-1 flex-2-s col-12-s">
+                <img src="@/assets/img/btx.jpg" class="round-sm">
+            </div>
+            <div class="col-8 flex-4 flex-2-s pcenter-s col-12-s">
+                <div class="pad-l-4 pad-l-0-s">
+                    <p><span class="alpha-d7">框架作者 - </span><br><b class="fsize-1d2">btx·STU 邢天博</b></p>
+                    <p>UI 架构师<span class="alpha-d2 mrg-h-1 mrg-h-d5-s">|</span>全栈工程师<span class="alpha-d2 mrg-h-1 mrg-h-d5-s">|</span>视觉设计师</p>
+                </div>
+            </div>
+        </div>
+        <p></p>
+
+        <!--设计原则-->
+        <section>
+            <h5>设计原则</h5>
+            <p><b class="mrg-r-1 color-sub">· 全局样式</b>BTX·UI 采用渐进式设计方案，用户可以只使用全局样式库来进行快速网页设计，并可根据需要进行响应式布局分段样式库引用；</p>
+            <p><b class="mrg-r-1 color-sub">· 主题组件</b>对于开发 webapp 类大型应用，推荐使用组件来进行开发，框架预置了一套完善的 "Level 风格主题 UI 库<span class="alpha-d6">（高阶组件库）</span>"，配合 "基础组件"<span class="alpha-d6">（主要实现基础布局）</span>，可快速构建 web 应用；</p>
+            <p><b class="mrg-r-1 color-sub">· 应用组件</b>对于定制化程度更高的应用开发，可以使用 "基础组件" + "应用组件" 配合 styles 样式实现机制，来进行底层打造。甚至可以进行二次封装，构建一套定制化主题组件；</p>
+            <p>全局样式秉持 web 开发传统的 "样式复用" 理念，而组件应用则推崇新兴的 "组件复用" 理念，根据实际应用场景可以选择不同的开发模式。此外，全局样式也可以与组件进行混合使用。</p>
+        </section>
+    </article>
+</template>

package/pages/level_widget.vue

@@ -0,0 +1,11 @@
+<template>
+    <div class="bg-color-main round-md pad-1d5 color-mgray">
+        主题组件库尚在开发中...
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "level_widget"
+    }
+</script>