しかたらむーの てっくぶろ

組み込みソフトの古参エンジニアがモダンなフロントエンドエンジニアに転生 その進化の記録です

Typescript

Vue.js + TypescriptでSVGアイコンを操作してみる

はじめに 出来上がりはこんな感じ! SVGアイコンの準備 SVGアイコンの埋め込み方 クリックベントの補足と伝搬 クリックしても… 出来上がり! 謝辞 はじめに 前回はPNG形式のアイコンを操作する方法を紹介しました。ですが、PNGやJPGの様な画像形式のアイコン…

Vue.js + Typescriptで自前のアイコンを操作する

はじめに 出来上がりはこんな感じ! アイコンの準備 表示してみる クリックイベントをハンドルする 見栄えが… もっとカッチョよくするには 謝辞 はじめに アプリの必須アイテム アイコン。複習もかね、Vue+Typescriptでアイコンを表示しクリックイベントを…

Vue.js + Typescriptで作る『モーダルダイアログ』

はじめに 出来上がりはこんな感じ! モーダルダイアログの出し方(考え方) 開発環境 プロジェクトの作成 コンポーネントの構成 親コンポーネント(ModalDialogSample.vue) HTML Script 子コンポーネント(ModalDialog.vue) HTML Script 出来上がり! 謝辞 …

Vue.js + Typescript『リストに条件付きStyle』で行の背景色を変えてみる!

はじめに 出来上がりはこんな感じ 背景色の変え方 変更内容 行ごとの背景色 選択行の背景色 出来上がり! まとめ はじめに 前回の記事【Vue+TypeScriptで作る『レスポンシブでスクローラブルなリスト』】 techblo.shikataramuno.com では、メンバをリスト表…

Vue.js + Typescriptで作る『レスポンシブでスクローラブルなリスト』

~ 目次 ~ はじめに 出来上がりはこんな感じ 仕様 開発環境 プロジェクトの作成 クラス設計 HTML(構造)の設計 ファイル構成 Member クラス SrotOrder クラス ResponsiveScrollableGrid コンポーネント Appコンポーネント 出来上がり! 次への展開 はじめに …