Toggle Switch con Lit Web Components: Prompt IA
VISTA DE CÓDIGO
Prompt
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>Resumen del prompt
Este prompt está diseñado para generar un componente web de tipo interruptor (toggle switch) construido con Lit, la librería de Google para crear Web Components ligeros y eficientes. La instrucción le pide al modelo que combine tres conceptos clave del desarrollo moderno: propiedades reactivas que actualizan la interfaz automáticamente, manejo de eventos personalizados para comunicarse con el resto de la aplicación, y estilos encapsulados mediante propiedades CSS personalizadas. El resultado es un componente reutilizable, autocontenido y fácil de integrar en cualquier proyecto web sin importar el framework que se use.
Este tipo de prompt es ideal para desarrolladores que quieren aprender Lit de forma práctica, crear sistemas de diseño basados en Web Components estándar, o simplemente obtener un punto de partida sólido para controles de formulario personalizados. Se recomienda ejecutarlo en modelos como GPT-4o o Claude 3.5, que ofrecen buena calidad en generación de código con TypeScript y decoradores. Para variaciones, se puede pedir que el componente soporte un modo deshabilitado, que acepte etiquetas de texto dinámicas, o que siga las pautas de accesibilidad ARIA.
¿Te resultó útil este prompt?
Comentarios
Los comentarios aparecen después de la moderación
この記事が役に立ったら投げ銭で応援
Apple Pay / Google Pay / カード (Visa/Mastercard/JCB/Amex) / Link / Alipay / WeChat Pay 対応 · Stripeで安全に決済
開発者が選ぶ最強ツール集
運営者が毎日使っているツール・ガジェット 6選