Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

今回は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のラジオボタンとドロップダウンリストについて解説する予定です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした