zackey推し

IT系のこと書くぞい

【Vue Material】ハッシュタグを実装する場合はChips(チップス)を使えばいいっぽい

f:id:kic-yuuki:20190803130045p:plain

最近、仕事で久しぶりに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いただけると助かります。