Tailwind CSS: 錠剤の形のボタンを作成する

このボタンがあります: <buttononClick={()=>removeTask(task)}class="text-xstext-redrounded-full">削除</button> 同様のものを見てみたいと思います: https://tailwindcss.com /docs/border-radius#pill-buttons ただし、押す錠剤の形状がわかりません

P粉189606269 2024-03-26 20:59:03 0  1  452

Tanstack Table と React JS: React JS と Tanstack Table を使用するときに状態に基づいてボタンを表示/非表示にする方法

私はreactjsを持っており、tanstackテーブル（react-table）を実装しました。各行の状態に基づいてボタン/リンクを表示または非表示にするのに助けが必要です。ステータスを含む行がある場合は「承認」ボタンが表示され、そうでない場合は非表示になるとします。 ......someinitiliazedataconst[sorting,setSorting]=useState<SortingState>([]);const[rowSelection,setRowSele

P粉042455250 2023-09-02 23:04:17 0  2  734

React.StrictModeとfabric.jsのCanvasインスタンスを使用した再レンダリング

選択可能な形状をインスタンス化するファブリック キャンバスとボタンを作成しています。次の状況でコンポーネントが 2 回再レンダリングされる理由がわかりません。そのため、生地の形状をお選びいただくことができません。ただし、index.tsx ファイルから削除すると、レンダリングは 1 回だけ行われ、形状が選択可能になります。削除することもできますが、それが最善の解決策とは思えません。これはデモです: const{Fragment,StrictMode,useEffect,useRef}=React;const{cr

P粉659378577 2023-09-21 23:48:52 0  1  897

モバイル上のボタンがフォーカスまたはアクティブのままになり、CSS アニメーションで問題が発生する

ボタンをクリックするたびにアニメーションを実現しようとしていますが、デスクトップでは正常に動作しますが、モバイルでは同じ効果を実現できません。最初にボタンをクリックし、次に別の場所をクリックして CSS のフォーカスを解除し、次にボタンをもう一度クリックしてアニメーション効果を得る必要があります。以下はコードスニペットです。 .btn_container{color:#35f8ff;position:relative;display:inline-block;text-align:center;margin:2.5remauto

P粉043295337 2023-08-28 15:14:37 0  1  547

テキストとアイコンが中央に配置されたボタン

アイコンとテキストを含むボタンコンポーネントを開発しています。アイコンはボタンの左側に配置され、テキストはボタンの中央に配置されます。テキストがボタンに収まらない場合は、折り返さずに切り詰めてください。テキストを切り詰める重要な条件は、テキストがボタンの端からアイコンまでの距離と同じ距離にあることです。したがって、ボタンに均等なインライン パディングを追加することはできません。テキストが切り取られない場合は、ボタンの中央に配置されます。ただし、アイコンに重なったり、ボタンに収まりきらなかったりすると、テキストが切れてしまいます。つまり、通常の状態ではアイコンの位置は変わりませんが、テキストのス...

P粉033429162 2023-08-15 11:01:09 0  1  560

ブートストラップ ボタンがアクティブなときに各ボタンに影/境界線を追加する CSS

フロントエンドの作成には React フレームワークを使用し、デザインには Bootstrap5.3 を使用しています。私の理解では、Bootstrap は標準でシャドウ効果を削除しました。したがって、ボタンがアクティブな場合、Bootstrap v5.0 のドキュメントのように、ボタンには影や境界線が表示されません。 https://getbootstrap.com/docs/5.0/components/buttons/ 残念ながら、コードで個々のボタンを直接カスタマイズする方法がわかりません。出来ますか

P粉256487077 2023-08-17 23:54:27 0  1  531

ボタンをアクティブにするとホバー効果が誤動作する

私は Web 開発 (HTML、CSS、JS) の基礎を学ぼうとしているので、動作する Apple 電卓を作ろうとしています。小さなバグに気づくまではすべてが正常に動作していました。最初は、アクション ボタンのホバー効果がうまく機能し、ホバーするにつれて色が明るくなりました。ボタンを押すと、ボタンが明るくなり、ユーザーが別の番号 (または「等しい」ボタン) を入力して前の番号で何かを行うまで、その状態が維持されます。その後、アクションボタンは通常の色に変わります。それまでは何も問題はなかったのですが、ユーザーがボタンを押した後、

P粉548512637 2024-04-01 21:51:26 0  1  609

JavaScript - モバイル端末のペーストイベント、アプリではonpasteイベントが無効です、アプリでペーストイベントを検出する方法

モバイル端末のペーストイベント、onpasteイベントはアプリ内で無効です。つまり、検証コードを貼り付けた後、検証コードを入力するためのテキストボックスの値を監視します。が空でない場合は、「次へ」ボタンをクリックできる状態になります。そうしないと、「次へ」ボタンをクリックできなくなります。 onpaste を使用して監視します...

黄舟 2017-05-16 13:23:57 0  1  813

影付きクローンバージョンでメニューボタンをX字型に変形させるホバーエフェクトを作成します

まず初めに、タイトルが紛らわしいことを認めたいと思います。申し訳ありません。私が達成したいのは、ホバー時の次の効果です。私のウェブサイトはここです https://wordpress-493302-3130963.cloudwaysapps.com/ CSS トランジションを使用して達成したいことの半分は正常に達成されましたが、シャドウが表示されません上の画像に示されている作成ボタンのコピー。私のCSSは次のとおりです。cta-button-menu:hover{transform:rotateZ(45deg)

P粉546257913 2024-04-04 11:55:21 0  2  515

React の useState フォームと機能更新フォームが必要なのはなぜですか?

ReactHook 関数の更新に関するドキュメントを読んでいて、次の文を見つけました。更新された値は前の値に基づいているため、「+」および「-」ボタンは関数形式を使用しますが、関数更新の目的がわかりません。新しい状態を計算するときに古い状態を直接使用する場合との違い。 ReactuseStateHook の更新関数に関数更新フォームが必要なのはなぜですか?違いが明確にわかる例はありますか (したがって、直接更新を使用するとエラーが発生します)。たとえば、ドキュメントの例を次のように変更すると、 functionCounter({

P粉041856955 2023-08-24 13:38:45 0  2  542

機能アップデートの形で React useState を使用する必要があるのはなぜですか?

機能の更新に関する ReactHook のドキュメントを読んで、次の引用を見ています。更新された値は前の値に基づいているため、「+」ボタンと「-」ボタンは関数形式を使用していますが、これを必要とする目的がわかりません機能の更新は、古い状態を使用して新しい状態を計算することの違いと直接的にどのように関係しますか。 ReactuseStateHook のアップデーター関数に機能更新フォームが必要なのはなぜですか?違いが明確にわかる例はありますか (したがって、直接更新を使用するとエラーが発生します)。たとえば、この例の functionCounter( をドキュメントから変更すると、

P粉155551728 2023-10-22 15:37:50 0  2  755

Jsplumb Community Edition でノードまたはシェイプを追加できない

ドキュメントに記載されているように、@jsplumb/browser-ui を使用して Nuxtjs/Vuejs アプリケーションにいくつかのノードを作成しています。ただし、実行時にノードを作成したいと考えています。私はそれを行うことはできません。ユーザーが「AddEvent」ボタンをクリックするたびにノード/四角形を作成したいと考えています。したがって、静的な方法でノードを作成するのではなく、ボタンのクリックに基づいて動的/実行時にノードを作成したいと考えています。 jsPlumb ドキュメントを使用してこれを行う方法がわかりません。同じことを実現するための具体的なコード例がないためです。

P粉864872812 2024-03-28 21:22:23 0  1  436

ログアウト時にNuxtアプリケーションの状態をリセットするにはどうすればよいですか?

ユーザーがアプリケーションを終了すると、Ponia の永続的な authStore 状態がリセットされ、ユーザーは /login にリダイレクトされます。ただし、次のユーザーがページを更新せずにログインした場合、メイン ページにはまだページの状態が残っているため、前のユーザーのデータが表示されます。この問題はどのように解決すればよいでしょうか?ログアウト時にアプリケーションのすべての状態をリセットするにはどうすればよいですか?ある認証セッションの状態を別の認証セッションから分離するための推奨ソリューションはありますか?ページ上で「ログアウト」ボタンが押されたときにページの状態を手動でリセットし...

P粉706038741 2023-09-16 20:59:12 0  1  698

JavaScript - Chrome をバージョン 55 にアップグレードした後、ローカル サービスにアクセスできなくなるのはなぜですか?

同社はクライアント側の印刷機能を作成しており、クライアントをインストールすると、127.0.0.1:8801 サービスが開始され、Web サイト上の印刷ボタンをクリックすると、http://127.0.0.1 に対して ajax クロスドメイン リクエストが行われます。 :8801/. インストールされている場合 クライアントが接続されている場合、このインターフェイスはステータス コードを返してクライアントを呼び出します。それ以外の場合は...

typecho 2017-06-15 09:22:56 0  1  740

javascript - angularjsで特定の$index値を繰り返し取得するにはどうすればよいですか?

{code...} {code...} 私の要件は、[タイムアウト インデックスの取得] ボタンをクリックした後、これらのタイムアウトのステータスを再リクエストすることです。リクエストが成功すると、タイムアウトがオンと表示されます。循環リクエスト タイムアウトが発生する場合があるため、最大の問題はタイムアウトを変更する方法です...

阿神 2017-05-16 13:19:43 0  1  799

反応警告: useEffect の状態を更新するときに更新の深さが最大制限を超えました

ブール変数を含むオブジェクトである状態変数を更新しようとしています。データが利用可能になったら (ボタンのクリックで呼び出された API 呼び出しに応答して)、useEffect 内の状態を更新します。次に、このデータを使用して別のコンポーネントであるモーダルを呼び出します。使用可能なデータがない場合は、別のモーダルを表示します。ポップアップを閉じると、状態変数が更新されるはずです。 const[modalState,setModalState]=useState<IModalState>({sho

P粉447785031 2023-09-06 13:46:55 0  1  581

単体テストの実行時に Vue Pinia の関数が onMounted で定義されていない

コンポーネントと、状態といくつかのアクションを含む Pinia ストアがあります。コードはブラウザーと E2E (サイプレス) テストでは完全に正常に実行されますが、単体テストでは失敗します。私はvue-testing-utilsとvitestを使用しています。ボタンをクリックすると、ストアド関数は単体テストから正常に呼び出されますが、その関数がインストールされたスクリプトまたはメイン スクリプトにある場合、テストは失敗します src/components/UsersComponent.vue<scriptsetup>im

P粉103739566 2023-10-31 21:58:42 0  1  818

HTML、CSS、SVG を使用してスケーラブルな標識を作成する

道標（先端のある長方形）の形のボタンを作成したいと考えています。 _______|\|_______/各テキストの長さが異なるテキストを動的にロゴに書き込みたいと考えています。グラフィックのみを背景グラフィックとして使用してこれを試してみると、矢印はそれに応じて拡大縮小および圧縮/伸縮されます。したがって、これを行う方法は、テキストを通常の div に配置し、CSS:after を使用して矢印を SVG として追加することです。矢印は完全に塗りつぶされているはずです。つまり、フレームの問題に対処する必要はありません。 （見やすくするためにSVGを黒のままにしました）最初の問題は、矢印が常にブロ...

P粉555682718 2024-03-31 14:45:14 0  1  498

別のオプションを選択する場合、入力フィールドの種類は、ルピー記号を使用した 20 桁のルピーをサポートするか、パーセントで置き換えることができます。

固定値を選択するオプションが選択されている場合、入力フィールドのタイプはルピー値であり、ルピー記号付きの 20 桁のみがサポートされます。パーセンテージが選択されている場合、ルピー記号はパーセンテージ記号に置き換えられ、ボタンをクリックせずに値を入力できる値のタイプは 2 桁のみです。このコードは正常に動作していますが、2 つの小さな問題に直面しています。1. Web ページが次のように読み込まれる場合デフォルト値は固定値に設定されています（ただし、入力値とルピー記号は機能しません2。値が変更された場合、両方は機能しますが、値は変更された状態に自動的にリセットされません。ユーザーが単一のパーセ...

P粉022140576 2023-08-13 18:35:32 0  1  485

問題 2003 (HY000) を修正する方法: MySQL サーバー 'db_mysql:3306' に接続できません (111)

最近、FastAPIPython サーバーをコンテナ化しようとしました (レプリケーション/二重化の目的でもあります)。以前は、Docker コンテナーに MySQL サーバーだけを入れてすべて問題なかったのですが、Web サーバーもサービスにしたところ、MySQL サーバーに接続できなくなり、アプリケーションが動作しなくなりました。以下は、アプリケーション fromfastapiimportFastAPIimportmysql.connectorapp のサーバー データベース初期化コネクタのコード スニペットです。

P粉178132828 2023-09-05 11:18:47 0  1  900