Angularでの読み込みスケルトンの実装
スケルトンは、実際のコンテンツがWebページに読み込まれる前に表示されるプレースホルダー要素です。スケルトンは通常、Medium、YouTubeなどのWebサイトで見られる明るい灰色のボックスまたは円です。スケルトンは機能の視覚的な印象を伝え、スピナーよりも優れています。
スケルトンには、インラインとスタンドアロンの2種類があります。
コードをDRYに保ち、loadingプロセス中にスケルトンを作成できるようにするための構造ディレクティブを作成します。まず、長方形のスケルトンコンポーネントを作成しましょう。
幅、高さ、およびカスタムクラス名をとる長方形コンポーネントを作成しました。CSSアニメーションを少し使用すると、パルス効果が追加されます。
これで、構造ディレクティブで使用して、必要な数の長方形を作成できます。
いくつかの入力があります：loadingステータス、レンダリングする長方形の数、幅と高さ、およびカスタムクラス。loadingプロパティがtrue;の場合に提供される入力に基づいて、長方形のコンポーネントをレンダリングします。それ以外の場合は、テンプレートをレンダリングします。
これで、テンプレートで使用できます。
次は何ですか
これは、構造ディレクティブで何ができるかを示す最小限のデモンストレーションでした。その他のアイデアを以下に示します。
入力を追加して、スケルトンtypeなどのさまざまな定義済みの形状をレンダリングできます。card
エラー状態をサポートするようにディレクティブを拡張することもできます。
AngularとJSの詳細については、 MediumまたはTwitterでフォローしてください。
提案された投稿
ノーコード革命: Webflow、Framer、Bubble.io でビジネスの繁栄を解き放つ
これらの驚くべきノーコード プラットフォームの未開発の可能性を活用しながら、革新と成功のスリリングな旅に乗り出しましょう。注目すべき女性起業家であるサプナについての話をさせてください。
私が最もよく使用するコーディング リソース
今週、毎日のメールリストのメンバーからメールを受け取りました。彼らは次のことを知りたかったのです。毎日、毎週、毎月どのリソースにアクセスしていますか? 素晴らしい質問です！私のワークフローと使用している主なリソースについての洞察を共有したいと思います。
関連記事
アートは政治的ではないのでしょうか?
昨日、私たちは今年のユーロビジョン・ソング・コンテストの幕を閉じました。きらびやかでカオスなグランドフィナーレでスウェーデンの歌手ローリーンがトロフィーを持ち帰り、女性として初めて2回優勝し、ABBAがコンテストで優勝してから50年目にその栄冠をスウェーデンに持ち帰りました。 「ワーテルロー」で。彼らはポップ ミュージックの規範において最大のアーティストの 1 つになりました。
カウボーイの嘘
巨大企業はいかにしてアメリカ国民にひどい嘘を売ったのか
西のなだらかな丘陵地帯では、太陽の最初の光が平原の曇った草を照らす、まばゆいばかりの金色の朝です。真っ黒で巨大な穏やかなアンガス牛の群れが日の出を背景にシルエットを描き、誰もがよく知っている場所へ人里離れた道を進んでいます。朝食バー。
危険な会話
私たちがこの地球上で繁栄し続けたいのであれば、危険な会話をしなければなりません。私たちがこれまでやってきたこと、現在行っていること、そして現在継続して行う予定の（または計画している）ことに挑戦するものです。