2026年4月22日

用AI生成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.

このチュートリアルでは、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>

提示词解读

这个提示词面向前端开发者，引导 AI 使用 Lit 框架生成一个完整的自定义切换开关网页组件。生成的代码示例会涵盖响应式属性声明、自定义事件派发、CSS 自定义属性（变量）控制样式等核心知识点，并附带平滑的切换动画效果，是学习 Web Components 现代开发模式的理想切入口。

无论是想快速上手 Lit 响应式系统，还是需要一个可直接嵌入项目的可复用组件，这个提示词都能给出结构清晰、可读性高的参考代码。你可以在此基础上灵活变通：修改提示词中的组件功能（比如换成评分星级或折叠面板），或者要求加入无障碍属性（ARIA）和键盘交互支持，进一步完善组件质量。推荐在支持代码生成的大语言模型（如 GPT-4 或 Claude）中运行，并将输出粘贴到支持 ES 模块的本地环境或 CodePen 中即可预览效果。

这个提示对您有帮助吗？

评论将在审核后显示

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

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

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

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

見る