サンプルコード– tag –

material-tableのページネーションをクリックすると以下のエラーが出るようになりました。 Unhandled Runtime Error TypeError: _this.props.onChangePage is not a function このエラーが発生する環境は以下の通りです。 material-ui v4.12.2 v5以降mater...

Next.jsのLinkとMaterial-UIのLinkは通常併用できません。しかし、ちょっとした工夫でこれらを併用できます。 Next.jsとMaterial-UIのLinkを用いて作るリンクのコンポーネントの要件は次のとおりです。 リンクができるNext.jsのLinkが機能するMaterial-UI...

フォームなどを作っている時に、ユーザーにブラウザバックやリロードなどの操作をしてほしくないときがあります。 その理由は入力したデータが保存される前で、ブラウザバックやリロードなどによってデータが消えてしまうからです。 この記事ではreactでブ...

この記事ではユーザーがイベントを起こしてから、一定の時間新たにイベントがなければ任意のアクションを発火させる方法をご紹介します。 使用用途としてはテキストフォーム入力後1.5秒後に値を送信、またはバリデーションを想定しています。この用途では...

この記事ではタブでコンテンツを切り替えるデモとソースコードを紹介します。 【デモ】 See the Pen xxRNvXV by りーほー@プログラマ投資家 (@notover9) on CodePen. 【サンプルコード】 <div class="js-tab-panel"> <div class="...

この記事はReact Hook Form v6を用いて Material UI v4のCheckboxを制御した記事です。 React Hook Form v7をお使いの方はReact Hook Form v7でMaterial UI v4のCheckboxを制御を参考にしてください。 React Hook FormでMaterial UIのText FieldやRadioを...

TailWind CSSはユーティリティファーストでレイアウトを少し変更したい場合などとても便利です。 しかし、TailWind CSSを使ってコンポーネント作る場合は、たくさんのクラスを組み合わせる必要があり、Bootstarapなどに比べると難易度が上がってしまいます...

WordPressにカスタム投稿を作成する方法は プラグインを使うコードを使う の2通りあります。 この記事ではカスタム投稿をコードを使って追加する方法を紹介します。 プラグインでカスタム投稿を追加する場合は「Custom Post Type UI」プラグインをインスト...

【やりたいこと】 ModelFormで表示しているフォームにURLのGETパラメータを初期値として表示したい 【サンプルコード】 viewからformに渡す CreateViewを継承したクラスでModelFormにデータを渡すにはget_form_kwargsを使います。 get_form_kwargs() ここ...

【完成形】 このようにコレクションをタブで切り替えてを表示したい。 【サンプルコード】 jsでイベントをフックするクラスはjs-*と命名しています。 既存のテンプレートをカスタマイズしやすいようにCSSはtailwindcssを使っています。 お使いのshopifyテ...