Angular スケルトンローダーコンポーネント | ng-hub-ui-skeleton
再利用可能なプリセット、インライン DSL テンプレート、レスポンシブな値、シマー状態向けの CSS 変数を備えた Angular のスケルトン読み込みプレースホルダー。
概要
チームがこのライブラリを探す理由
読み込み状態を、その場限りのシマーマークアップに崩れさせるのではなく、体系的・再利用可能・プロダクト対応に保ちたいとき、この Angular スケルトンライブラリを選んでください。
インストール
npm install ng-hub-ui-skeletonジャンプ
最適な用途
- カードとフィード
- データテーブル
- フォーム
- ダッシュボード
について skeleton
ng-hub-ui-skeleton は、読み込みプレースホルダーを設計するための構造化された手段を Angular チームに提供します。一般的な UI パターン向けの同梱プリセット、カスタム形状向けのコンパクトな DSL、同じスケルトンを複数のレイアウトに適応させるレスポンシブな値です。
機能ガイド
プリセットカタログ
ローディング状態は通常、孤立したプレースホルダーではなく繰り返し現れる業務 UI であるため、付属のカタログは意図的に幅広く作られています。card、list-item、table-row、detail-view、form-section、dashboard-widget、stat-card、chart-panel、profile-summary、master-detail、kanban-card、feed-item、search-result、table-toolbar、filter-bar、empty-state-skeleton が含まれます。その狙いは、機能ごとに同じ shimmer ブロックを作り直すのではなく、チームが本番志向のローディング語彙から始められるようにすることです。実際には、テーブル中心の画面は `table-toolbar` と繰り返しの `table-row` から始められ、ダッシュボード画面は `stat-card`、`chart-panel`、`dashboard-widget` を組み合わせられ、コンテンツ主導のフローは新しいレイアウトマークアップをゼロから書くことなく `card`、`feed-item`、`search-result` を利用できます。
サンプル:
Preset Catalogue Gallery
Shows the bundled presets together so teams can choose the closest starting point before authoring custom templates.
card
Content card with media, title and body lines.
list-item
Compact row with avatar and text.
table-row
Tabular data row placeholder.
detail-view
Detail screen with media and metadata.
form-section
Form group with responsive fields.
dashboard-widget
Panel with chart or metric content.
stat-card
Quick KPI summary card.
chart-panel
Large chart region with legend rows.
profile-summary
Profile hero with avatar and stats.
master-detail
List and detail layout together.
kanban-card
Small board card loading state.
feed-item
Activity or timeline row.
search-result
Search result with metadata lines.
table-toolbar
Toolbar with title, filters and actions.
filter-bar
Row of filter controls.
empty-state-skeleton
Illustrative empty or onboarding state.
card
Dense card variant for tighter layouts.
コード
Import:
Template:
Component:
Bundled Card Preset
Renders the built-in card skeleton with the default shimmer appearance.
コード
Import:
Template:
Component:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
コード
Import:
Template:
Component:
コンパクトな DSL によるオーサリング
このライブラリは Angular コードベース内での高速なイテレーションに最適化されているため、インラインテンプレートはコンパクトな Emmet ライクの構文を使用します。兄弟の合成には `+`、ネストには `>` を使い、修飾子は括弧の中に置き、繰り返しには `*N` を使用し、パラメータは `{{param}}` で補間されます。これにより、チームはプルリクエストでも読みやすいコンパクトなオーサリング面を得られ、オブジェクトツリー全体を書き直すことなく小さな変更が可能になります。重要なのは構文の巧妙さではなく、レイアウトの意図がコンポーネントの利用箇所に近いまま保たれ、差分・リファクタリング・レビューが容易であることです。
サンプル:
Compact DSL Patterns
Explains the core DSL building blocks with visual outputs for structure, params and responsive tokens.
Structure
`+` creates siblings and `>` nests children.
Params & repeats
Use {{param}} placeholders and *N repeaters to scale rows quickly.
Responsive values
Switch spacing or columns inline with compact breakpoint tokens.
コード
Import:
Template:
Component:
Inline Emmet-like Template
Defines a custom skeleton shape inline with params interpolation.
コード
Import:
Template:
Component:
バリアントとレスポンシブレイアウト
スケルトンが実際の UI と無関係であるとユーザーは気づくため、ローディング状態はレイアウトの密度やブレークポイントを無視すべきではありません。プリセットは `compact` などのバリアントを公開でき、個々の修飾子の値はコンパクトなレスポンシブトークンを使ってブレークポイントごとに切り替えられます。これにより、1つのセマンティックなスケルトン定義を保ちつつ、モバイル・タブレット・デスクトップのコンテキストにわたって幅・列数・余白・サイズを適応させることが可能になります。実際の結果として、テンプレートの重複が減り、プレースホルダーの段階と実際にレンダリングされたインターフェースとの整合性が大幅に向上します。
サンプル:
Compact Variant
Compares the default card preset with its compact variant for denser interfaces.
コード
Import:
Template:
Component:
Responsive Table Layout
Uses responsive values inside the built-in presets to adapt from compact to wider layouts.
コード
Import:
Template:
Component:
プログラムによる登録とテーマ設定
付属のプリセットは出発点であり、上限ではありません。チームは Angular の依存性注入を通じてプロジェクト固有のプリセットを登録し、組み込みカタログとまったく同じように名前で利用できます。これは、製品が独自の繰り返されるスケルトン言語を持つ場合に極めて重要です。視覚的な調整は CSS 変数に保たれるため、shimmer の強度・ベースカラー・ハイライトカラー・余白・角丸は、ハードコードされた値を機能コンポーネントに漏らすことなくデザインシステムと整合させられます。この分離は重要です。構造はプリセットと DSL に属し、視覚的なポリシーはテーマ設定に属します。
サンプル:
Programmatic Custom Preset
Registers a local preset and consumes it by name just like the bundled catalogue.
コード
Import:
Template:
Component:
Dashboard Composition
Composes several presets to mock an analytics dashboard during loading.
コード
Import:
Template:
Component:
主な機能
最近の変更
Version 0.1.0 - 4/14/26, 12:00 AM
added: Initial runtime skeleton library for Angular with bundled presets and a compact DSL parser.
added: Programmatic preset registration through dependency injection.
added: Responsive property values and compact preset variants.
added: Documentation page, overview content and live examples in the main ng-hub-ui site.