2026年4月22日

Lit Webコンポーネント：リアクティブプロパティ付きインタラクティブトグルスイッチ

提示词

Create an interactive toggle switch web component using Lit that demonstrates reactive properties, event handling, and styling with CSS custom properties. The component should have a smooth animation when toggled and emit custom events.

代码预览

用AI自定义代码

AI根据您的指示重写代码。预览免费，复制和下载需¥100解锁。

オリジナル

AIとの対話に追加する一言

プロンプトと一緒にコピーして、AIがより正確に意図を汲み取れるようにします

このコードをそのまま使いたいので、CDNリンクも含めた完全なHTMLファイルとして出力してください。

初心者なので、各行にコメントを追加して、何をしているか説明してください。

このコードをWordPressのテーマに組み込む方法も教えてください。

動作確認済みのコードをお願いします。エラーが出る場合の対処法も含めて。

このチュートリアルでは、Litを使用して再利用可能でインタラクティブなトグルスイッチWebコンポーネントを作成する方法を実演します。Litは、宣言的なテンプレート構文を使用して高速でリアクティブなWebコンポーネントを構築するための軽量ライブラリです。

実装されている主な機能：

リアクティブプロパティ: 型宣言と属性へのリフレクションを備えたLitのリアクティブプロパティシステムを使用
カスタムイベント: スイッチの状態が変化したときにカスタム’toggle-change’イベントを発行
CSSカスタムプロパティ: カスタマイズ可能なスタイリングとテーマ設定のためにCSS変数を使用
アクセシビリティ: 適切なARIA属性とキーボードナビゲーションサポートを含む
アニメーション: CSSトランジションを使用したスムーズな遷移アニメーション
サイズバリアント: CSSカスタムプロパティを通じて小、中、大のサイズをサポート

コンポーネントプロパティ：

checked: Boolean – スイッチの初期状態
disabled: Boolean – ユーザー操作を無効化
color-on: String – ‘オン’状態のカスタムカラー
color-off: String – ‘オフ’状態のカスタムカラー
size: String – サイズバリアント（’small’、’medium’、’large’）

使用例：

<toggle-switch 
  checked
  color-on="#2196f3"
  color-off="#90a4ae"
  size="large"
></toggle-switch>

这个提示对您有帮助吗？

评论将在审核后显示

この記事が役に立ったら投げ銭で応援

Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済

開発者が選ぶ最強ツール集

運営者が毎日使っているツール・ガジェット 6選

見る