ポイント
- Material Design Lite には、サーバにファイルをアップロードする <input type=”file”> タグに対応するパーツは無い。
- <input type=”file”> を実現するには、アイコンやラベルを使用して対応すること。
この悲しい結論に至るまで。
このページを見ますと、最初に次のようにあります。
Currently only text input fields will be styled. It would be great to support the styling of file input fields.
If you decide not to support this, than no styling should be done. Because currently it will be styled and the label is over the uplaod button.
適当に訳すとこのような感じかしら。
「今のところテキストの input のみが対応済みです。ファイルも対応してくれたら素敵だね。」
すると製作者側の方がこう答えます。
The textfield styling is for just that, textual inputs. You shouldn’t be using it for file inputs. As far as I know we don’t have any MD guidance for that. So let’s handle finding it in the spec or getting it specified first, then we can tackle introducing it to core.
「テキストフィールドのデザインはテキスト入力のためだけに限定するべき。」
その後、作ってみた、という方が現れます。
その方は、「でもこれが Material Design に沿っているかどうか、確信がないんだ…」とおっしゃいました。
すると別の方々が、 input のファイルは使わないほうが良さそう… という流れで続きます。
- Gmail や Hangout 、他の Google アプリもファイルアップロードのためにアイコンボタン（attach file、atachment など）を使っているよ。
- Material Design 公式からこの件についての明確な仕様は出されていないけど、アイコンやラベルを使うようアドバイスがあったよ。
- だもんで、Material Design は元々のファイル input の代わりにボタンやラベルを作るべきだね。
議論はここで途絶えております。
結局のところ、ファイルアップロードの input に対応した Material Design のパーツは今のところ無い、ということですわね＞＜。
おわりに
代わりにアイコンボタンやラベルで代用するって、どうすればいいのかしら？楽がしたくて Material Design Lite を使いたかったのですけれども、なかなかうまく行きませんわね＞＜。
以上です。