Webコンポーネントの構築に関する考察

3751 ワード

テキストリンク

新しいWebコンポーネントを作成するときに考慮すべき点がたくさんあります.どのような属性とプロパティが必要ですか?どうやってスタイルに行くの?アクセシビリティ懸念はありますか?どのようなセキュリティ?リストが続く.今日は、新しいコンポーネントを作ろうという思考過程を例にしていきます.

デザインコンペ

上記のイメージで見ることができるように、私たちはカップルのことから成る「学習カード」を作ります.

SVGアイコン

ヘッダーとサブヘッダーによる旗

下のスロットHTML

我々がデザインを考慮するならば、我々が一緒にこのものを置く時に留意したいいくつかのことがあります.最初にオフにすると、色とアイコンが異なるサブヘッダーに一致することがわかります.それで、多分、我々は色とアイコンをセットするためにサブヘッダーをチェックしたいです.また、別のフォント、フォントサイズ、および考慮するパディングがあることに気づくかもしれません.我々がすべてを反応させて、オーバーフローをセットすることができる限り、これは比較的単純でなければなりません.

それを壊しましょう
上記のCOMPを見ると、3つの他のコンポーネントから成る1つのコンポーネントにそれを壊すことができます.

円の周りのアイコン

ヘッダー、サブヘッダー、およびアイコンコンポーネントを持つバナー

カードの「骨格」または輪郭(一番上のものと下の何かを持つコンポーネント)

これらを一緒に“学習カードを作る”

このコンポーネントを破棄することにより、将来的にこれらのコンポーネントを再利用することができます.そして、我々は、物事がどのように相互作用するかについてより多くのコントロールを持つことができます.それぞれのコンポーネントについては、まず最初に質問しなければなりません.

小道具と属性は何ですか.

デザイン懸念?

アクセシビリティ?

セキュリティ?

一度これらの質問に答えがあると、私たちは、すべての一緒に置くことができるまで、各コンポーネントに取り組む.

期待と経験
このコンポーネントは比較的簡単にまとめることが期待されます.しかし、私は挑戦的かもしれないと思ういくつかのことがあります.まず最初に、私はスロッティング内容についてあまり知りません.これは「スケルトン」/アウトラインコンポーネントで行われ、任意のHTMLをカードに配置することを確認します.第2の課題は、設計を一貫して維持することである.私たちは左下のマージンが下半分で一貫していることを望みます、そして、内容が必ず旗と底部分のために自然な方法であふれるようにしてください.カードが応答し、スロットの内容を適切にすることができれば、私はこれが原子設計の本当に良い例であると思います.
過去私はa penguin button , そして、この経験から貴重なことを学びました.そのプロジェクトの後、Webコンポーネント上で異なる属性を制御するためのプロパティを使用する方がわかりやすい.私もCSS変数を使用してコンポーネントのスタイルを制御するクールな方法を学び、WCのAPIを開きます.全体的に、私はこのカードを構築するときに貴重なコンポーネントを作成する前にそれらの最初の質問に答える方法を学んだ.