フォームブリッジの数値フィールドに単位をつけてみた

はじめに

フォームブリッジで単位をつけたい時、みなさんはどのように設定しますか？

ラベルで表現することもできますが、ラベルだとスマホのサイズにした時には下図のようになってしまいます。

それを今回は下図のように単位を付ける方法を考えてみました。

今回は上図のような単位の付け方についてシェアしたいと思います。

方法

おそらくいくつかの方法があるかと思いますが、今回はCSSカスタマイズを使って表現してみたいと思います。

結論から言うと、以下のコードを入れるだけでできます。

div[data-vv-name="フィールドコード"] > .el-input-number__decrease {
  display: none;
}
div[data-vv-name="フィールドコード"] > .el-input-number__increase {
  display: none;
}
div[data-vv-name="フィールドコード"] {
  width: 120px !important;
  position: relative;
}
div[data-vv-name="フィールドコード"] ::after {
  display: block;
  content: "単位";
  position: absolute;
  top: 0.5rem;
  right: -2.5rem;
}

上記のコードのフィールドコードの部分に、数値フィールドのフィールドコードを入力した活用ください。

少し解説します。

まず上図の6行までのコードは、数値フィールドの「+」と「ー」のボタンを非表示にしています。

/* マイナスのボタンを非表示にする */
div[data-vv-name="フィールドコード"] > .el-input-number__decrease {
  display: none;
}
/* プラスのボタンを非表示にする */
div[data-vv-name="フィールドコード"] > .el-input-number__increase {
  display: none;
}

これは単位の表示には関係ないので、ボタンが気にならない場合はそのままでも構いません

次に、7から10行目までのコードですが、当該フィールドコードの数値フィールドの大きさを指定して、その位置を取得します。

/* マイナスのボタンを非表示にする */
div[data-vv-name="フィールドコード"] {
  width: 120px !important;
  position: relative;
}

最後に、11から17行目までのコードですが、当該フィールドコードのフィールドの後に、単位を追加して、その位置を指定しております。

/* 数値フィールドの後の指定の位置に単位を追加 */
div[data-vv-name="フィールドコード"] ::after {
  display: block;
  content: "単位";
  position: absolute;
  top: 0.5rem;
  right: -2.5rem;
}

さいごに

正直、これ以外にもさまざまな方法があるかと思いますが、単位を表示したいなと思っている方に向けてとりあえずの方法を提案できればと思いましたので、参考になれば幸いです。

ひょっとしたら今後のフォームブリッジのアップデートで、数値フィールドで単位が追加できる仕様になって、この記事が不要になるかもしれませんが、逆にそれを期待したいと思います。