LoginSignup
0

More than 5 years have passed since last update.

Office UI Fabricのテキストボックス

Last updated at Posted at 2015-12-05

今回はOffice UI Fabtic(以下"OfficeUI")のテキストボックスを解説します。

OfficeUIのテキストボックス

OfficeUIのテキストボックスは、以下の3つのスタイル(というかクラス)で作成できます。

  • TextField-field
  • TextField-underlined
  • TextField-multiline

それぞれのテキストボックスの表示例は以下のようになります。

img001.png

上記のサンプルコードを以下に示します。


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Text Box Sample</title>
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
    <link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <style>
      .my-sample { border: thin solid; border-radius: 4px; padding: 4px; margin-top: 10px; }
    </style>
  </head>
  <body>
    <div class="ms-Grid-col ms-u-sm4 ms-u-md8 ms-u-lg12"><!-- テキストボックスを表示する -->
      <div class="ms-Grid-col ms-u-sm2 ms-u-md4 ms-u-lg6 my-sample">
        <div class="ms-TextField">
          <label class="ms-Label ">ms-TextField-field</label>
          <input class="ms-TextField-field" placeholder="ここにテキストを入力">
          <span class="ms-TextField-description">テキストフィールド入力内容の説明</span>
        </div>
      </div>
    </div>
    <div class="ms-Grid-col ms-u-sm4 ms-u-md8 ms-u-lg12"><!-- テキストボックスを表示する -->
      <div class="ms-Grid-col ms-u-sm2 ms-u-md4 ms-u-lg6 my-sample">
        <div class="ms-TextField ms-TextField--underlined">
          <label class="ms-Label ">text</label>
          <input class="ms-TextField-field" placeholder="ここにテキストを入力">
        </div>
      </div>
    </div>
    <div class="ms-Grid-col ms-u-sm4 ms-u-md8 ms-u-lg12"><!-- テキストボックスを表示する -->
      <div class="ms-Grid-col ms-u-sm2 ms-u-md4 ms-u-lg6 my-sample">
        <div class="ms-TextField ms-TextField--multiline">
          <label class="ms-Label ">ms-TextField--multiline</label>
          <textarea class="ms-TextField-field" placeholder="ここにテキストを入力"></textarea>
          <span class="ms-TextField-description">テキストフィールド入力内容の説明</span>
        </div>
      </div>
    </div>
  </body>
</html>

ちょっとサンプルコードが長いですが、テキストボックスの種類ごとに見てゆきます。

ms-TextField-field

「ms-TextField-field」クラスは一行入力用のテキストボックスです。

img002.png

表示ラベルに「is-required」を指定すると、以下のように入力必須項目であることを強調できます(赤色のアスタリスクが追加表示される)。

img004.png

ms-TextField--underlined

「ms-TextField--underlined」クラスも一行入力用のテキストボックスですが、こちらは入力欄にアンダーラインが引かれた形状になります。入力フォーム感を出したくない時に有用かもしれません。

img003.png

ただし、ms-TextField--underlinedはちょっと癖があるようです。たとえば入力欄のラベルにマルチバイト文字を指定すると縦に配置されてしまったりします。

img120.png

それから「is-required」を指定すると、改行されてからアスタリスク表示されてしまったり...。

img121.png

あとはハイフンで区切った英単語についても改行が入ってしまいます。

img122.png

というわけで、ちょっと使用する際は注意が必要そうです(見栄えはオシャレなのでこのあたりがうまく表示されて欲しいですね)。

ms-TextField--multiline

「ms-TextField--multiline」は複数行入力が可能なテキストボックスです。複数行入力可能という点を除き、使い方は「ms-TextField-field」クラスと同じです。

img010.png

まとめ

今日はOfficeUIのテキストボックスについて解説しました。
明日はOffice UI Fabricのラジオボタンとドロップダウンリストについて解説する予定です。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0