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

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

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

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

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

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

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

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

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

javascript - 百度地図は最初に中心点を設定しますが、ボタンを使用して対応する中心点に移動するにはどうすればよいですか? ? ? ?

これを実現するには、青島または厦門のボタンをクリックして、青島 (または対応する) の座標点の位置に切り替えます。現在、初期化された地図の中心点は新疆に設定されています。これが地図を初期化する方法です $(" .btn-Qing").on('click', function () { {code...} }) これは私が単純に書いたものです...

三叔 2017-07-05 11:06:47 0  2  1035

Vanilla JS setTimeout(): 間違った動作の特定

ハンバーガー メニューのアニメーションを HTML、CSS、およびバニラ JavaScript で作成しました。期待される結果 ハンバーガー メニュー ボタンをクリックすると、次のイベントが発生します。 ハンバーガー メニュー アイコンをクリックすると、メインが 180 度回転し、2000 ミリ秒で高さに沿って縮小します。 2000 ミリ秒が経過すると、メニューが表示され、ハンバーガー アイコンが X に変わります。終了ボタンをクリックしてください: ページをさらに 180 度回転します メニューをオーバーレイします メニューを非表示にします: display:none; 終了ボタンをハンバー...

P粉797855790 2024-04-02 20:44:40 0  1  493

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

JavaScriptを使用して画像をコピーする

最近、授業とは違う小さなプロジェクトを実践してみようと思いました。これには単純な目標があります。画像とその隣にボタンを配置します。ボタンが押されるたびに、ボタン自体の前に、最初のボタンと同じクラスとコンテンツを持つ img タグが作成されます。 //FromHTMLconstcontent=document.querySelector('#content');constaddBtn=document.querySelector('#btn-

P粉757432491 2024-01-10 17:37:09 0  2  513

Vuetify の画像/アイコン上のクリック可能なボタン

この UI でボタン <v-btn>​​<v-img>...<v-img></v-btn>​​ を作成するにはどうすればよいですか?

P粉463824410 2023-12-12 11:09:05 0  1  537

HTML マークアップで SVG を直接使用すると、ボタンに役割を割り当てたり、必要なホバー効果を付与したりすることができません

2 つの機能を実行するアイコンを持つコンテナがあります: ボタンのように動作します (キーボード/スクリーン リーダーなどを介してアクセス可能) ホバー/フォーカスで赤になります。 マークアップ内で SVG を直接使用すると、ホバー効果が停止します。期待どおりに機能しますが、img タグを使用する場合のように SVG にボタンの役割を割り当てることはできません: .container{height:500px;width:400px;background-color:lightblue;position:relative;}.favorite

P粉940538947 2023-09-06 20:29:59 0  1  612

コンポーネントのデカップリングを実現する正しい方法

2つのコンポーネント間の通信(Vue2を使用)を扱っています。そのうちの1つはボタンであり、初期、読み込み、完了(成功または失敗)などの状態を持つことができます。ボタンの各状態に対して、異なるテキストが表示される場合があります。アイコン (読み込み中: スピン アイコン、成功完了: チェックマーク、エラー完了: x)、ボタン コンポーネントを使用するフォームもあります。フォーム送信の現在の状態に基づいてボタンの状態を変更する方法がわかりません。以下のコードを参照してください。私のボタンコンポーネント: <template><buttonclass=&quo

P粉476475551 2023-09-14 10:57:11 0  1  600

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  537

javascript - JQueryはドットマークボタンから現在の要素のIDを取得する方法（動的データのIDを取得する方法）

1. 画面内の画像や表示される候補情報はすべてDataListで反復処理されており、マークボタンをクリックすることで対応する検査時間や科目コードなどを取得することが目的です。これを実現するには、マーク ボタンをクリックして、現在の候補者の情報を処理のためにバックグラウンドに送り返します。 JSはどうでしょうか...

PHP中文网 2017-05-19 10:18:00 0  2  787

python2.7で「開始」ボタンをクリックした後、tkinterのボタン（図の赤い部分）がクリックできないのはなぜですか？

python2.7で「開始」ボタンをクリックした後、tkinterのボタン（図の赤い部分）がクリックできないのはなぜですか？ 「開始」ボタンをクリックした後、tkinter の最小化、最大化、閉じるボタンをクリックするにはどうすればよいですか?コードは次のとおりです: {コード...}

漂亮男人 2017-05-27 17:39:55 0  1  870

Tab キーを使用してページ上の HTML 要素を移動します

Tab キーを使用している HTML ページで、Tab キーを使用してスクロールできません。これは、「テーブルを更新できません」ポップアップが開いたときにタブを参照しようとしているページの写真です。それをクリックしてタブを押しました。初めてタブを押すと、フォーカスが画像内の矢印要素に移動します。しかし、次にタブを押すと、要素 Page3 に移動します。上矢印アイコンは HTML で選択されている <i タグで、次の <i タグは x ボタンです。何らかの理由で、2 番目の <i タグがスキップされ、タブ キーが 2 回目に表示されたときに x ボタンに移動しません。これはそう...

P粉106301763 2024-02-03 21:30:59 0  1  480

JavaScript - 奇妙な現象が発生しました。ボタンを編集ボックスにドラッグできます

図のように、図の右下の「保存」ボタンをクリックしてエディットボックスにドラッグすることができます。ブラウザによる視覚的な検査が発生します。最適化されている場合、ボタンはドラッグできません。イベントのデフォルトの動作から始めますか?

phpcn_u1582 2017-07-04 13:45:25 0  1  948

ヘッダー画像、テキスト、ボタンをレスポンシブにする方法

Bootstrap5を使ってWebサイトを作っています。ウェブサイトのヘッダーでは、Bootstrap のカルーセルをヘッダーに使用しています。カルーセル画像では、テキストやボタンを表示することもできます。画像、テキスト、ボタンをレスポンシブにしたい。メディアクエリを使ってみましたがやり方がわかりません。 test.html<!doctypehtml><htmllang="en"><head><metacharset="ut

P粉604507867 2023-09-17 09:51:15 0  1  780

ホバー時のチルト効果のバグ

中にテキストが入った傾き効果のあるボタンがあり、ボタンにマウスを置くとボタンの横に 2 つの線が表示されます。ボタンが表示されるまでボタンの上にカーソルを置くコードがありますが、これは非常にランダムな副作用です。これは Chrome の問題だと思いますが、よくわかりません。問題の画像は次のとおりです: https://prnt.sc/hafHhDOHntco.button-skew{position:relative;width:fit-content;padding:6px40px;borde

P粉520545753 2024-03-29 13:34:50 0  1  389

Laravelのモーダルが送信時に消えないようにする方法は何ですか?

ビューページにモーダルボックスがあり、ユーザーがデータベースにデータを追加できるLaravelアプリケーションがあります。デフォルトでは、ユーザーが送信ボタンをクリックするとモーダルが消え、バックエンドがエラーを返します。エラーが発生したときにモーダルボックスを表示したままにしたいと考えています。どうすればこの目標を達成できますか?モーダル ボックスをトリガーするボタン<div><buttonclass="add"data-modal-target="#modal-box">AddNe

P粉755863750 2024-02-04 08:46:00 0  1  524

javascript - WeChat アプレットが外部地図プログラムを呼び出す

ミニプログラム内で携帯​​電話にインストールされている百度地図を呼び出したいのですが、どうすればよいですか? {コード...} このインターフェイスでは、組み込みの地図を開き、緑色のボタンをクリックしてリストをポップアップ表示し、携帯電話にインストールされている地図アプリを呼び出すことができます。このボタンの機能は自分で実装できますか?自分でボタンを定義するのと同じように...

三叔 2017-07-05 10:38:41 0  1  1129

Bootstrap 5 のナビゲーション バーのドロップダウン メニュー (折りたたみ) に機能上の問題があります。

Bootstrap5 を使用して応答性の高いメニューまたはドロップダウン ボタンを作成しようとしているときに問題が発生しました。すべて順調のようです。ナビゲーション アイコンとドロップダウン アイコンが表示されます。しかし、それらは機能しません。ナビゲーション アイコンまたはドロップダウン ボタンをクリックしても、ドロップダウン メニューが表示されません。 jquery ファイルもインクルードしたことを特に言及したいと思います。しかし、うまくいきませんでした。ここで何が起こっているのか誰か教えてもらえますか？最後に、mr-auto、ml-auto などの他のブートストラップ クラスを使用してい...

P粉322319601 2023-08-22 20:42:45 0  1  765