Vue.jsの勉強にもいい！UIコンポーネントやインタラクションを実装するチュートリアルがまとめられた -Vue.js Examples | コリスVue.jsでさまざまなUIコンポーネントやインタラクションを実装するチュートリアルやリソースがまとめられたVue.js Examplesを紹介します。 ページやアプリのレイアウトをはじめ、スクロールコンテンツ、カード型コンポーネント、オーバーレイ、フォームや検索、ナビゲーションやページネーション、Lazy Loadなど、最近見かけるものが揃っています。
疑似コードプログラミングプロセスでのJavaScriptクラスの実装例 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのほりでーです。先日、スティーブ・マコネルの『コードコンプリート』という本を読んでいて、「疑似コードプログラミングプロセス（PPP）」という章の内容に惹かれました。 疑似コードプログラミングプロセス（Pseudocode Programming Process: PPP）とは、特定の言語の実装に縛られずにあえて日本語でプログラミングすることで、実装の品質を高めるためのテクニックです。 でも、本当にそんなことをする意味ってあるんでしょうか？ それを検証するために、ちょっとしたWebのUIパーツの実装をPPPでやってみることにしました。 今回作るUIの要件 今回作るUIは、RWDサイト向けのフィルタリング機能です。パソコンではタブ状のUIによって一覧をフィルタし、スマホではセレクトボックスによって同様の機能を実現します。どういったカテゴリの種類や数が来るかは
フォームをより使いやすくするためのJavaScript/CSSツール10選
この記事はSpeckyboy Design Magazineからの翻訳転載です。配信元または著者の許可を得て配信しています。 10 JavaScript and CSS Tools to Enhance Your Forms フォームは多くのWebサイトにとって欠かせないものです。しかし私たちは、その細部にまでいつも気を配れるわけではありません。 フォームを改善する方法はたくさん存在します。バリデーションの追加や、マスクやその他のビジュアルガイドをインプットしたりすることが挙げられるでしょう。そしてこれは表面的な対処でしかありません。最終目標は、できる限り使いやすく魅力的なフォームにすることです。 この記事では、最適なフォームを作るための10の無料ツールを紹介します。 formbase formbaseは、CSS/SASSを使用してフォーム要素に改善されたデフォルト要素をもたらすパッケージ
WAI-ARIA対応のタブ型UIの作り方（React編） - ICS MEDIA
この記事は『WAI-ARIA対応のタブ型UIを実装する方法』の続きです。 WAI-ARIAはアクセシビリティーの改善に役立つと先の記事で紹介しました。この記事ではWAI-ARIAに対応したReactでのタブのユーザーインタフェースを解説します。 サンプルをGitHubにアップしているので、デモとソースコードをご覧ください。 別ウインドウで再生する GitHubでコードを確認する 前提として、create-react-appを使って環境構築したものとします。 create-react-appを使っていなくても、記事「最新版で学ぶwebpack入門 - BabelでES2018環境の構築(Reactのサンプル付き)」で紹介しているようにwebpack等で環境構築されていても構いません。 Reactでのステート管理 実装の要素としてstateに選択されたタブのIDを保持することとします。 ▼ステ
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)