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

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

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

React JSで、ボタン内のアイコンをクリックしてもボタンの値を取得できません

React JSで、ボタン内のアイコンをクリックしてもボタンの値を取得できません

P粉364129744 2023-07-22 09:47:02 0  1  505

React ボタンがページにコンポーネントを追加しない

[項目の追加] ボタンをクリックすると、入力フィールドのあるポップアップ フォームがトリガーされるはずですが、フォームがレンダリングされません。ボタンを使用して、レンダリング時に空白のページを表示するだけです。 import'./App.css';constInventoryManager=()=>{dispatch(addItem(newItem));//入力フィールドをリセットsetItemName('');setItemDescription('');setItemPrice(''

P粉731861241 2024-03-20 10:46:45 0  1  426

アイコンをクリックすること (ボタンの残りの部分はクリックしないこと) が、JavaScript の購読ボタンが機能する唯一の方法です。

ユーザー プロファイルを購読するボタンがありますが、これは rssfontAwesome アイコンをクリックした場合にのみ機能し、ボタンの残りの部分は機能しません。ボタン要素をクリックイベントとして設定するためにいくつかのオーバーライドを試しましたが、まったく機能しません。次のコードは、アイコン要素がクリックされた場合にのみ機能します: <buttonclass='subscribe-buttonprofile-subscribe'><?phpif($profile->userSubscribed):

P粉742550377 2024-01-16 14:13:18 0  1  487

Elementorモバイルメニューにソーシャルメディアアイコンを追加

WordPress の Elementor メニューにソーシャル メディア アイコンを追加するソリューションを探しています。何か案は？ハンバーガーのアイコンを使用してその上にポップアップを追加することもできますが、それは最後の手段です。

P粉521697419 2023-08-30 18:40:44 0  1  497

Woocommerce のクリア バリエーション リンクをカートに追加ボタンに移動します

製品バリアントが選択されたときにクリア オプションが表示されないように、テーマの PHP ファイルから「クリア」リンクを削除しました。リンクは現在削除されており、これは目標の一部でしたが、[Clear] リンクは引き続き [カートに追加] ボタンに影響を及ぼし、製品バリエーションが選択されるとボタンが約 30 ピクセル下に移動します。 WooCommerce プラグインのバリエーション サンプルを使用して、製品バリエーションのボタンの外観を実装しています。バリアント サンプル プラグインを使用していない場合は、リストの右側に明確なリンクが表示されますが、プラグインを使用すると、リンクが下に表示...

P粉018653751 2024-02-21 15:13:11 0  1  524

woocommerceの「カートに追加」ボタンの機能を商品ページのみに転送するように変更する

こんにちは、「カートに追加」ボタンの機能を変更して、商品ページにのみ転送し、カートには追加しないようにしたいと思っています。 add_filter('woocommerce_loop_add_to_cart_link','redirect_to_product_page',10,2);functionredirect_to_product_page($link,$product) ){global$woocommerce;$product_cat=w

P粉009828788 2023-09-12 09:47:11 0  1  569

vue.jsで表示されたテキストをコピーするボタンを追加するにはどうすればよいですか?

vue.js のコード カタログ アプリケーションのクリップボードにビューからコードのスニペットをコピーできるボタンを追加しようとしています。 vue クリップボード ライブラリを使用し、サンプル コンポーネントでこれを実行しようとすると: <divclass="full-screen-code-snippet">{{example.codeSnippet}}</div><divclass="full-screen-copy -b

P粉297434909 2024-03-28 12:57:15 0  1  498

javascript - ボタンリンクを使用して DIV 画像に DIV を追加するにはどうすればよいですか?

ボタンリンクを使用して DIV 画像に DIV を追加するにはどうすればよいですか?示されているように、完全なコードを教えていただける方はいらっしゃいますか? ありがとうございます。

代言 2017-07-05 10:38:37 0  4  894

イメージタグの周囲にアンカータグを追加する際の問題

私の FlexGallery は正常に動作していますが、唯一の問題は、<img> タグの前後に <a> タグを追加すると、すべてが台無しになってしまうことです。フルサイズの画像を開くことができるように <img> タグを <a> タグで囲むと、デザイン全体が台無しになってしまいます。CSS の何かが台無しになっていると確信しています。どうすれば修正できますか。 ,ボディ ,h1,h2,セクション,div{マージン:0;パディング:0;}ボディ{最大

P粉998100648 2024-03-22 09:43:59 0  1  489

bodyタグのbackground-imageプロパティにアニメーションを追加する: ステップバイステップガイド

styleタグで背景画像を使用しています。 <style>body{background-image:url("img.jpg");background-size:cover;transition:background-image4slinear;}</style>ページに別の div を追加せずに画像をフェードインさせたい。この目標は達成できるでしょうか？

P粉347804896 2024-03-29 21:59:19 0  2  478

Filepond は画像をレンダリングする前に認証ヘッダーを追加します

Vue アプリケーションで filepond プラグインを使用しています。私のアプリケーション要件に完全に適合します。現在、バックエンド サービスは JWT 認証経由で画像を提供しています。カスタムヘッダーをファイルプールに追加してコンポーネントに画像をロードするにはどうすればよいですか?これが私が達成したことです<file-pondref="file"name="filepond":label-idle="placeholder"accepted-fi

P粉201448898 2024-03-27 13:06:23 0  1  498

単一製品ページのカスタム フィールドを含む Ajax の [カートに追加] ボタンの重要性

単一の商品ページの「カートに追加」ボタンを編集しようとしています。 LoicTheAztec のソリューションを使用してカスタム Ajax 呼び出しが正常に追加されました。コードは問題なく実行されます。ただし、ソリューションのコード内の $product_id を製品のカスタム フィールド値 ("custom_id") に変更する必要があります。 $custom_data 変数を次のように解析してみてください: $cart_item_key=WC()->cart->add_to_cart($custom

P粉959676410 2023-09-01 16:28:19 0  1  557

JavaScript を使用してボタン イベントを切り替えるアイコンを追加する

functiontoggledDeleteAllBtn(){if($('.customer_checkbox:checked').length>0){$('#sel_button').text('Deletedallselected('+$('.customer_checkbox:checked').length+')');}else{$('#sel_button').text('Delet

P粉541565322 2023-09-05 00:08:30 0  1  536

javascript - テーブルとフォームの関連付けに関する質問

図に示すように: 目的: 1. 上の追加ボタンをクリックし、左側のテーブルに trtd の列を追加します 追加された trtd の内容はオブジェクト内にあるので、それを直接保存します。 (実装済み) 2. 左側のテーブルのtrtdを選択すると、右側にtrtdを追加できます(右側の追加ボタンはまだ書かれていません) (わかりません...

phpcn_u1582 2017-06-08 11:02:54 0  1  670

2 番目の「カートに追加」を追加する機能を追加するチェックボックスを備えた製品タブを Woocommerce に追加します。

助けが必要です。ご尽力いただき、ありがとうございます。私の問題は、インストールされたプラグインが製品ページの標準の「カートに追加」ボタンを置き換えることです。これを変更したくないので、その下に 2 つ目の [カートに追加] ボタンを追加する必要があります。無料の製品サンプル用の別のプラグインには、通常の「カートに追加」ボタンが必要です。

P粉262113569 2023-07-31 15:01:29 0  1  586

Vue js - 編集可能な HTML コンテンツ ボックスにテキストとドロップダウン ボックスを追加します

Vue.jsを使用しています。編集可能な HTML div にテキストとドロップダウン ボックスを追加しようとしています。ボタンを使用してドロップダウンボックスを追加したいと考えています。このドロップダウン ボックスは、カーソルを置いた場所と同じように、テキスト内のどこにでも追加できます。現在、ほぼ動作していますが、問題は見つかりません。複数のドロップダウン ボックスを入力して追加しても問題が見つかりません。

P粉288069045 2023-07-27 17:02:54 0  1  596

React props をオプションにし、他の props に基づいて TypeScript で必須にする

ユーザーが使用するプロップによって提供されるタイプに基づいて、通常のボタン、アイコン ボタン、またはアイコンのみのボタンを返す React ボタン コンテナ コンポーネントがあります。 ButtonContainer コンポーネントと Props の関連する型定義は次のとおりです。 typeButtonWrapperProp={label?:string;icon?:React.ReactNode;onClick:()=>void;type:'text'|'icon'|'iconOnly'; }exp

P粉738046172 2023-09-17 13:42:00 0  1  708

ReactJSで値が変更されたときのレンダリングを実装する方法

お気に入りに追加 (ローカル ストレージに追加してもカウントは更新されません) をクリックすると、参照ボタンをクリックするとカウントが更新されます。電子商取引プロジェクトでこれを行っているので、ウィッシュ リストがあります。アイテムを追加します ウィッシュリストに移動するときに、アイテムをローカル ストレージに追加します。ウィッシュリストに追加したアイテムの数を表示する必要があります。値 (ローカル ストレージ) が変更されたときにタイトルを自動的にレンダリングする方法がわかりません。 onClick Calling cou 経由でボタンを追加しました。アイテムをウィッシュリストに追加しても何...

P粉685757239 2023-09-15 22:36:49 0  1  826

c# - REACTコンポーネントのスタイルの問題

図に示されている 3 つのボタン コンポーネントの場合、ネイティブ JS と REACT を使用して、ボタンの 1 つをクリックしてスタイルを変更する簡単な方法を記述するにはどうすればよいでしょうか?他のボタンをクリックすると、同じ効果が得られます (つまり、他の 2 つのボタンのスタイルをクリアし、クリック ボタンのスタイルを追加します)。

巴扎黑 2017-07-05 10:50:54 0  3  900