WeUI基本スタイルライブラリ - モバイル端末のインタフェースを書きます - コードワールド

WeUIスタイルライブラリは、設計チームがマイクロ手紙ページや小型マイクロチャンネルマイクロチャンネル公式プログラムに合わせたマイクロチャネルネイティブ視覚体験、との基本的な、一貫性のあるのセットです。
以下のような最後の外観で基本ライブラリパターンで見てみましょう。
画像のキャプション

これらの密集は、スタイルライブラリを圧縮されています。ただ死のトライポフォビアああに心配密なルックス。心配、あなたは上読んでくださいしないでください。
私たちが見ることができる、慎重に見て、スタイルライブラリには、多くのスタイルを書くようなものです。言い換えれば、限り、我々はHTMLページでこれらのスタイルを使用して、ページAを構築することができます。[ただ、ラベルの多くはスタイルを定義する必要がなくなり、クラスの名前を書くことは、それを大量に保存されていません？]
これに上WeUIの導入は、ここで我々は乾物に満ちています。

あなたは、ページを書き始める前に

WeUIスタイルライブラリをダウンロードするには、スタイルライブラリは、もちろん、必要性を持っているために、私は2つのダウンロードアドレスを提供します。

GitHubのは、テンセントダウンロードです：https://github.com/weui/weui
私はGitHubの上weui.min.cssを置くことをもう一つのスタイル：HTTPS：//raw.githubusercontent ...

私たちのスタイルライブラリのページのための基盤の導入に次。
私は地元のスタイルライブラリに基づいてこれを入れて、その導入します。

<link rel="stylesheet" href="./css/weui.min.css">

よりよいこの基本的なスタイルライブラリの使用を説明するために、私は2つの例を紹介します。シングルページアプリケーションページとポップアップボックス。

シングルページアプリケーションのページ

画像のキャプション

私たちは、このページを模倣し、VUE敬礼します。
ページ全体を通して、次のモジュールに分割することができます。

一番上の配置のロゴ
データを表示するための2個の中央のセル、すなわちセル、
下部には、タブバーのナビゲーションバーを併設しています

コードの導入：

<div style="height:100%">
    <div class="center">
    </div>
    <div class="weui-cells">
    </div>
    <div class="weui-cells">
    </div>
    <p class="vue-version">current vue version 2.5.2</p>
    <div class="weui-tabbar">
    </div>
</div>

画像のトップインサートはライン上の絵の比較的単純な、直接の紹介です。当社は、中間細胞にコンテンツを追加することについて話しています。
私たちは、構造は3つのレベルに分けられ、それは典型的な左右形式で、セルを参照してください、

weui-cell__hd：我々は、細胞のヘッドであるクラス名を、定義するように、左は画像、WeUIスタイルライブラリです
中间是一段文字，也就是这个单元格的身体：weui-cell__bd
最右边是一个小箭头，也就是单元格的尾部：weui-cell__ft

引入代码：

<div class="weui-cells">
    <!-- _access能显示一个箭头 -->
    <a href="#" class="weui-cell weui-cell_access">
    <div class="weui-cell__hd">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="">
    </div>
    <div class="weui-cell__bd">
    <p>Live Demo</p>
    </div>
    <div class="weui-cell__ft"></div>
    </a>
</div>

这样，我们就写完了一个单元格。
第二个单元格有两个小格怎么办呢？
不要紧，weui-cell是单元格中的一个小格子，有多少个小格子就嵌套在一个weui-cells中就可以了，每一格weui-cell还是按照上面的左中右方式进行命名：

<div class="weui-cells">
    <a href="" class="weui-cell weui-cell_access">
    <span class="weui-cell__hd"></span>
    <span class="weui-cell__bd"></span>
    <span class="weui-cell__ft">
        <!-- weui-badge是显示在箭头前面的红色提示小框 -->
        <div class="weui-badge"></div>
    </span>
    </a>
    <a href="" class="weui-cell weui-cell_access">
    <span class="weui-cell__hd"></span>
    <span class="weui-cell__bd"></span>
    <span class="weui-cell__ft"></span>
    </a>
</div>

接下来是最底部的tabbar。
最尾部的导航条类名为weui-tabbar，里面有三项内容，也就是有三个weui-tabbar__item。

<div class="weui-tabbar">
    <a href="" class="weui-tabbar__item">
    </a>
    <a href="" class="weui-tabbar__item">
    </a>
    <a href="" class="weui-tabbar__item">
    </a>
</div>

为每一个weui-tabbar__item添加内容吧：

<div class="weui-tabbar">
    <a href="" class="weui-tabbar__item">
        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
        <p class="weui-tabbar__label">Home</p>
    </a>
    <a href="" class="weui-tabbar__item">
        <span style="position:relative;display:inline-block">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <!-- weui-badge表示一个红色的展示区 -->
            <span class="weui-badge" style="position:absolute;top:-6;right:-11px">8</span>
        </span>
        <p class="weui-tabbar__label">Demos</p>
    </a>
    <a href="" class="weui-tabbar__item">
        <span style="position:relative;display:inline-block">
            <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
            <!-- weui-badge_dot小圆点，给一个相对于span的定位，放在右上角 -->
            <span class="weui-badge weui-badge_dot" style="position:absolute;top:0;right:-6px"></span>
        </span>
        <p class="weui-tabbar__label">Donate</p>
    </a>
</div>

我放在GitHub上的项目地址：https://github.com/TeanLee/qs...
这就完成了第一个单页页面的编写。

接下来我们说说一个弹出框。

页面弹出框

放上我们要写的页面成品图：
画像のキャプション

这就是我们平常很常见的弹出框了。这里是点击了第一个按钮就弹出这个弹框，点击取消，弹框消失，当然你也可以添加别的事件，点击取消和保存都会让弹框消失并且执行相应的步骤。

首先，我们为dialog弹出框制作一个“家”，也就是dialog放置的页面：
weui-btn 是weui的基本组件是一个按钮

<div class="page dialog">
  <div class="page__hd">
    <h1 class="page__title">Dialog</h1>
    <p class="page__desc">对话框</p>
  </div>
  <div class="page__bd page__bd__spacing">
    <!-- 设置三个按钮，但是我只为第一个按钮绑定了弹框弹出的事件 -->
    <a href="#" class="weui-btn weui-btn_default" id="showIOSDialog1">IOS Dialog样式 default</a>
    <a href="#" class="weui-btn weui-btn_primary">IOS Dialog样式 primary</a>
    <a href="#" class="weui-btn weui-btn_warn">IOS Dialog样式 warn</a>
  </div>
</div>

接下来，我们的dialog就要登场了。直接把dialog的div放在放置按钮div的后面。

<div class="dialogs">
  <div id="iosDialog1" class="js_dialog" style="display: none">
      <!-- weui-mask 遮罩层 -->
    <div class="weui-mask"></div>
    <div class="weui-dialog">
      <div class="weui-dialog__hd">
        <div class="weui-dialog__title">弹窗标题</div>
      </div>
      <div class="weui-dialog__bd">
        <!-- 任何东西  说明文字， 表单 -->
        弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内
      </div>
      <!-- 弹窗底部的两个小按钮，有两个选项就放置两个 weui-dialog__btn  -->
      <div class="weui-dialog__ft">
        <a href="#" class="weui-dialog__btn weui-dialog__btn_default" id="dialogCancle">取消</a>
        <a href="#" class="weui-dialog__btn weui-dialog__btn_primary">保存</a>
      </div>
    </div>
  </div>

这里的遮罩层是为整个页面蒙上一层灰色的背景，把用户的吸引力引到弹框上。
弹框的内容还是分为三个层次：

weui-dialog__hd：弹框的头部写标题；
weui-dialog__bd：弹框的身体写具体内容；
weui-dialog__ft：弹框的尾部放置按钮；

次に、結合事象を追加し、ボックスを遊びに来て最初のボタンをクリックする最初のボタンです。

<script>
  document.getElementById('showIOSDialog1').click(function () {
    $('#iosDialog1').show();
  });
  document.getElementById('dialogCancle').click(function () {
    $('#iosDialog1').show();
  });
</script>

私はGitHubのボックスの特定のコードに爆弾を置く：HTTPS：//github.com/TeanLee/qs ...

もちろん、基本的なスタイルライブラリと多くのコンポーネントを使用することができWEU、次のように入力します。https://weui.io/ビューもっと基本的なコンポーネント。
今度はもっと一緒に学びましょう！