最近、仕事で久しぶりにVue.jsを使ってUIを作っています。
CSSフレームワークとしては、Material DesginのコンポーネントをVue.jsで使用可能にした「Vue Material」を使用しています。
ハッシュタグを登録するようなUIを実装しようとしているのですが、ハッシュタグっぽいコンポーネントの正式な名称がわからず、ちょっと困ったため、メモとして記事に残しておきたいと思います。
Material Designとは?
(念のため)
Googleが提唱しているデザインです。(Webだけでなく、Android / iOS / Flutterと別れているんですね、初めて知った...)Material Design Liteというものもあるっぽいですね。
細かいことは、先人がありがたく残してくださった記事をご参照ください。
カタログ(UIコンポーネントの一覧)
Material Designは、フラットなUIなデザインというふわっとした理解だけだったため、各コンポーネントの正式名称を把握していませんでした。
色々とググった結果、以下のカタログ(UIコンポーネントの一覧)を見ると、コンポーネントの名称・意味合いが理解できそうです。
Material Components Web | Catalog
null
ハッシュタグの実装は、Chips(チップス)を使うのがよさそう
自分がハッシュタグとイメージしているコンポーネントは、Chips(チップス)というコンポーネント名でした。
角が丸いブロックのことで、Gmailを使われている方は宛先欄などにて、よく見かけるコンポーネントかと思います。
Vue MaterialでもChipsのコンポーネントが用意されていましたので、ざざっと導入してみました。
いい感じっぽいです。これで進めようかなと思います。
終わり
今後、コンポーネントの名称がわからなかった場合は、Material Designのカタログを見ればいいという教訓を得られました。
他にこれの方が参考になるよって文献がありましたら、FBいただけると助かります。