جدول البيانات والقائمة المقسّمة لـ Angular | ng-hub-ui-paginable
جدول بيانات وقائمة مقسّمة لـ Angular مع تقسيم من جانب الخادم وفرز وتصفية وتحديد وقوالب ومتغيرات CSS.
الأنماط
الميكسنات والأنماط
Override any of the `--hub-list-*` design tokens in a single include. Every parameter is OPTIONAL and defaults to `null`: only the parameters you pass are emitted, so the rest keep the component's defaults. Token-based and self-contained (no Bootstrap dependencies). Covers both the `list` and the `cards` display modes.
Theming with hub-table-theme
Invoice | Client | Amount | Status |
|---|---|---|---|
| INV-001 | Acme Corp | $1,240.00 | Paid |
| INV-002 | Globex | $820.50 | Pending |
| INV-003 | Initech | $3,010.00 | Paid |
| INV-004 | Umbrella | $540.00 | Overdue |
| ميكسن | المعاملات | الوصف |
|---|---|---|
| Theming | ||
hub-list-theme() | $accent--hub-list-accent$bg--hub-list-bg$item-bg--hub-list-item-bg$item-color--hub-list-item-color$item-border-color--hub-list-item-border-color$hover-bg--hub-list-item-hover-bg$selected-bg--hub-list-item-selected-bg$selected-color--hub-list-item-selected-color$border-radius--hub-list-border-radius$item-border-radius--hub-list-item-border-radius$item-padding-x--hub-list-item-padding-x$item-padding-y--hub-list-item-padding-y$gap--hub-list-items-gap$cards-bg--hub-list-cards-bg$cards-border-color--hub-list-cards-border-color$cards-border-radius--hub-list-cards-border-radius$cards-padding-x--hub-list-cards-padding-x$cards-padding-y--hub-list-cards-padding-y$cards-min-column-width--hub-list-cards-min-column-width$cards-gap--hub-list-cards-gap$footer-gap--hub-list-bottom-bar-gap$footer-justify--hub-list-bottom-bar-justify-content$footer-align--hub-list-bottom-bar-align-items$footer-wrap--hub-list-bottom-bar-wrap | One-call theming for `<hub-list>` (list & cards layouts) |
hub-table-theme() | $accent--hub-table-accent$bg--hub-table-bg--hub-table-container-bg$color--hub-table-color--hub-table-container-color$border-color--hub-table-border-color$hover-bg--hub-table-hover-bg$hover-color--hub-table-hover-color$selected-bg--hub-table-selected-bg$selected-color--hub-table-selected-color$striped-bg--hub-table-striped-bg$striped-color--hub-table-striped-color$border-width--hub-table-border-width$border-radius--hub-table-border-radius$cell-padding-x--hub-table-cell-padding-x$cell-padding-y--hub-table-cell-padding-y$footer-gap--hub-table-bottom-bar-gap$footer-justify--hub-table-bottom-bar-justify-content$footer-align--hub-table-bottom-bar-align-items$footer-wrap--hub-table-bottom-bar-wrap | One-call theming for `<hub-table>` |
متغيّرات CSS
نسّق كل بكسل عبر 245 متغيّرات CSS. تجاوزها عند :root أو حدّد نطاقها على غلاف.
Table
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-table-container-bg | var(--hub-ref-color-white, #fff) | color | Background of the outer container |
--hub-table-container-color | var(--hub-sys-text-primary, #212529) | color | Base text color of the container |
--hub-table-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of container and cells |
--hub-table-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Border radius of the container |
--hub-table-border-width | var(--hub-ref-border-width, 1px) | length | Border thickness |
--hub-table-row-divider-color | var(--hub-table-border-color) | color | Color of the divider between body rows (independent of the outer frame/vertical borders) |
--hub-table-container-max-block-size | none | length | Max block-size (height) of the scroll container; set it together with options.scrollable to cap the body height and engage the sticky header |
--hub-table-container-overflow | auto | string | Scroll behaviour of the built-in table container; [stickyHeader] flips it to visible so the header pins to the consumer's own scroll ancestor |
--hub-table-head-sticky-top | 0 | length | Sticky offset of the header while the body scrolls (options.scrollable), e.g. to clear a toolbar above the table |
--hub-table-container-gap | var(--hub-ref-space-3, 1rem) | length | Gap between top bar, table and bottom bar |
--hub-table-top-bar-gap | var(--hub-ref-space-3, 1rem) | length | Gap between elements in the top action bar |
--hub-table-batch-actions-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between batch action buttons |
--hub-table-bottom-bar-gap | var(--hub-ref-space-3, 1rem) | length | Gap between elements in the bottom bar |
--hub-table-bottom-bar-justify-content | space-around | string | justify-content of the bottom bar flex container |
--hub-table-bottom-bar-align-items | center | string | align-items of the bottom bar flex container |
--hub-table-bottom-bar-wrap | wrap | string | flex-wrap of the bottom bar |
--hub-table-bottom-bar-paginator-order | 1 | number | Flex order of the paginator slot in the bottom bar |
--hub-table-bottom-bar-settings-order | 2 | number | Flex order of the settings slot in the bottom bar |
--hub-table-bottom-bar-info-order | 3 | number | Flex order of the info slot in the bottom bar |
--hub-table-bottom-bar-paginator-flex | 0 0 auto | number | Flex shorthand for the paginator slot |
--hub-table-bottom-bar-settings-flex | 0 0 auto | number | Flex shorthand for the settings slot |
--hub-table-bottom-bar-info-flex | 0 0 auto | number | Flex shorthand for the info slot |
--hub-table-icon-color | currentColor | color | Fill color for inline SVG mask icons |
--hub-table-icon-size | 1em | length | Size for inline SVG mask icons |
--hub-table-icon-sort | url("data:image/svg+xml,…") | url | Sort icon (unsorted state) |
--hub-table-icon-sort-up | url("data:image/svg+xml,…") | url | Sort ascending icon |
--hub-table-icon-sort-down | url("data:image/svg+xml,…") | url | Sort descending icon |
--hub-table-icon-caret-up | url("data:image/svg+xml,…") | url | Row-expander caret icon (expanded) — overridable like the sort icons |
--hub-table-icon-caret-down | url("data:image/svg+xml,…") | url | Row-expander caret icon (collapsed) |
--hub-table-icon-search | url("data:image/svg+xml,…") | url | Table search icon (SVG, overridable via mask-image) |
--hub-table-icon-filter | url("data:image/svg+xml,…") | url | Table filter icon (SVG, overridable via mask-image) |
--hub-table-icon-eraser | url("data:image/svg+xml,…") | url | Table eraser icon (SVG, overridable via mask-image) |
--hub-table-icon-info | url("data:image/svg+xml,…") | url | Table info icon (SVG, overridable via mask-image) |
--hub-table-icon-chevron-up | url("data:image/svg+xml,…") | url | Table chevron-up icon (SVG, overridable via mask-image) |
--hub-table-icon-chevron-down | url("data:image/svg+xml,…") | url | Table chevron-down icon (SVG, overridable via mask-image) |
--hub-table-icon-chevron-left | url("data:image/svg+xml,…") | url | Table chevron-left icon (SVG, overridable via mask-image) |
--hub-table-icon-chevron-right | url("data:image/svg+xml,…") | url | Table chevron-right icon (SVG, overridable via mask-image) |
--hub-table-icon-angle-left | url("data:image/svg+xml,…") | url | Table angle-left icon (SVG, overridable via mask-image) |
--hub-table-icon-angle-right | url("data:image/svg+xml,…") | url | Table angle-right icon (SVG, overridable via mask-image) |
--hub-table-icon-angle-double-left | url("data:image/svg+xml,…") | url | Table angle-double-left icon (SVG, overridable via mask-image) |
--hub-table-icon-angle-double-right | url("data:image/svg+xml,…") | url | Table angle-double-right icon (SVG, overridable via mask-image) |
--hub-table-icon-ellipsis-v | url("data:image/svg+xml,…") | url | Table ellipsis-v icon (SVG, overridable via mask-image) |
--hub-table-icon-trash | url("data:image/svg+xml,…") | url | Table trash icon (SVG, overridable via mask-image) |
--hub-table-icon-plus | url("data:image/svg+xml,…") | url | Table plus icon (SVG, overridable via mask-image) |
--hub-table-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent for the selected row — re-based per variant |
--hub-table-accent-subtle | color-mix(in oklch, var(--hub-table-accent) 12%, var(--hub-sys-surface-page, #ffffff)) | color | Soft accent tint for the selected-row background |
--hub-table-selected-bg | var(--hub-table-accent-subtle) | color | Selected row background (soft accent tint) |
--hub-table-selected-color | var(--hub-sys-text-primary, #212529) | color | Selected row text color |
--hub-table-selected-bar-width | 0 | length | Width of the optional accent bar on the selected row's leading edge (0 = hidden) |
--hub-table-selected-bar-color | var(--hub-table-accent) | color | Colour of the selected-row accent bar |
--hub-table-accent-bg | transparent | color | Accent layer applied via box-shadow inset on cells |
--hub-table-active-bg | var(--hub-sys-state-active-bg, rgba(0,0,0,0.1)) | color | Cell background in active row state |
--hub-table-active-color | var(--hub-sys-text-primary, #212529) | color | Cell text color in active row state |
--hub-table-bg | var(--hub-ref-color-white, #fff) | color | Base background of table cells |
--hub-table-head-bg | var(--hub-table-bg, var(--hub-ref-color-white, #fff)) | color | Header (thead) surface; defaults to the table surface so a sticky header stays opaque over the scrolling body |
--hub-table-head-color | var(--hub-table-color, var(--hub-sys-text-primary, #212529)) | color | Header (thead) text color |
--hub-table-head-font-size | inherit | length | Header (thead) cell font size |
--hub-table-head-font-weight | bold | number | Header (thead) cell font weight (defaults to the browser th weight; set to var(--hub-ref-font-weight-semibold, 600) for the DS look) |
--hub-table-head-padding-x | var(--hub-table-cell-padding-x) | length | Header (thead) cell horizontal padding |
--hub-table-head-padding-y | var(--hub-table-cell-padding-y) | length | Header (thead) cell vertical padding |
--hub-table-head-position | sticky | string | CSS position of the header when [stickyHeader] is set; override to static to opt a table out |
--hub-table-bg-state | initial | color | State layer (active/hover) applied over cell background via cascade |
--hub-table-bg-type | initial | color | Variant layer (striped) applied over cell background via cascade |
--hub-table-cell-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal cell padding |
--hub-table-cell-padding-x-sm | var(--hub-ref-space-2, 0.5rem) | length | Horizontal cell padding in compact mode |
--hub-table-cell-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical cell padding |
--hub-table-cell-padding-y-sm | var(--hub-ref-space-1, 0.25rem) | length | Vertical cell padding in compact mode |
--hub-table-cell-vertical-align | middle | string | Vertical alignment of cell content |
--hub-table-color | var(--hub-sys-text-primary, #212529) | color | Base text color of cells |
--hub-table-color-state | initial | color | State layer (active/hover) applied over cell text color via cascade |
--hub-table-color-type | initial | color | Variant layer (striped) applied over cell text color via cascade |
--hub-table-group-separator-color | var(--hub-sys-border-color-default, #dee2e6) | color | Color of the row-group divider border |
--hub-table-search-button-bg | var(--hub-table-container-bg, var(--hub-ref-color-white, #fff)) | color | Background of the search trigger button |
--hub-table-search-button-border-color | var(--hub-table-border-color) | color | Border of the search trigger button |
--hub-table-search-button-color | var(--hub-table-container-color, var(--hub-sys-text-primary, #212529)) | color | Text/icon color of the search trigger button |
--hub-table-search-input-bg | var(--hub-table-container-bg, var(--hub-ref-color-white, #fff)) | color | Background of the search input field |
--hub-table-search-input-border-color | var(--hub-table-border-color) | color | Border of the search input field |
--hub-table-search-input-color | var(--hub-table-container-color, var(--hub-sys-text-primary, #212529)) | color | Text color of the search input field |
--hub-table-filter-button-active-bg | color-mix(in oklch, var(--hub-sys-color-success, #198754) 10%, transparent) | color | Background of filter button when filters are active |
--hub-table-filter-button-active-border-color | var(--hub-sys-color-success, #198754) | color | Border of filter button when filters are active |
--hub-table-filter-button-hover-bg | rgba(0, 0, 0, 0.05) | color | Background of filter button on hover |
--hub-table-filter-button-icon-active-color | var(--hub-sys-color-success, #198754) | color | Icon color inside filter button when filters are active |
--hub-table-filter-button-icon-color | var(--hub-sys-text-muted, #6c757d) | color | Default icon color inside filter button |
--hub-table-hover-bg | var(--hub-sys-state-hover-bg, rgba(0,0,0,0.075)) | color | Cell background on row hover |
--hub-table-hover-color | var(--hub-sys-text-primary, #212529) | color | Cell text color on row hover |
--hub-table-striped-bg | var(--hub-sys-state-striped-bg, rgba(0,0,0,0.05)) | color | Cell background for striped rows |
--hub-table-striped-color | var(--hub-sys-text-primary, #212529) | color | Cell text color for striped rows |
--hub-table-filter-count-bg | var(--hub-sys-color-success, #198754) | color | Background of the active-filters count badge |
--hub-table-filter-count-color | var(--hub-ref-color-white, #fff) | color | Text color of the active-filters count badge |
--hub-table-batch-actions-btn-icon-gap | var(--hub-ref-space-1, 0.25rem) | length | Batch action button icon gap |
--hub-table-batch-actions-margin-inline-end | auto | length | Batch actions inline-end margin |
--hub-table-filter-button-border-color | transparent | color | Filter button border color |
--hub-table-filter-button-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Filter button border radius |
--hub-table-filter-button-border-width | 1px | length | Filter button border width |
--hub-table-filter-button-gap | var(--hub-ref-space-2, 0.5rem) | length | Filter button content gap |
--hub-table-filter-button-padding-x | 0.75rem | length | Filter button horizontal padding |
--hub-table-filter-button-padding-y | 0.375rem | length | Filter button vertical padding |
--hub-table-filter-button-transition | all 0.2s ease | transition | Filter button transition |
--hub-table-filter-count-border-radius | var(--hub-ref-radius-pill, 50rem) | length | Filter count badge border radius |
--hub-table-filter-count-font-size | 0.7rem | length | Filter count badge font size |
--hub-table-filter-count-font-weight | var(--hub-ref-font-weight-bold, 700) | number | Filter count badge font weight |
--hub-table-filter-count-padding-x | 0.4em | length | Filter count badge horizontal padding |
--hub-table-filter-count-size | 1.25rem | length | Filter count badge size |
--hub-table-search-border-radius | var(--hub-table-border-radius) | length | Search field border radius |
--hub-table-search-border-width | var(--hub-table-border-width) | length | Search field border width |
--hub-table-search-button-min-width | 2.75rem | length | Search button minimum width |
--hub-table-search-input-font-size | 1rem | length | Search input font size |
--hub-table-search-input-padding-x | 0.75rem | length | Search input horizontal padding |
--hub-table-search-input-padding-y | 0.375rem | length | Search input vertical padding |
--hub-table-top-bar-align-items | center | string | Top bar cross-axis alignment |
--hub-table-top-bar-justify-content | end | string | Top bar content justification |
--hub-table-top-bar-wrap | wrap | string | Top bar flex wrapping |
List
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-list-checkbox-size | 1rem | length | Size of the selection checkbox |
--hub-list-chevron-size | var(--hub-ref-icon-size, 1em) | length | Size of the expand/collapse icon |
--hub-list-bg | transparent | color | Background of the whole list component (host); transparent by default |
--hub-list-border-radius | var(--hub-ref-radius-md, 0.375rem) | length | Border radius of the list component surface |
--hub-list-padding-x | var(--hub-ref-space-0, 0) | length | Horizontal padding of the list component surface |
--hub-list-padding-y | var(--hub-ref-space-0, 0) | length | Vertical padding of the list component surface |
--hub-list-gap | var(--hub-ref-space-4, 1.5rem) | length | Gap between top bar, items collection and bottom bar |
--hub-list-items-bg | transparent | color | Background of the items collection (<ul>) |
--hub-list-items-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between list items |
--hub-list-empty-bg | var(--hub-ref-surface-2, #f8f9fa) | color | Background of the empty state |
--hub-list-empty-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of the empty state |
--hub-list-empty-color | var(--hub-sys-text-muted, #6c757d) | color | Text color of the empty state |
--hub-list-item-bg | var(--hub-sys-surface-page, #ffffff) | color | Background of an item (solid surface, like table rows) |
--hub-list-item-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border color of an item |
--hub-list-item-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Border radius of an item |
--hub-list-item-color | var(--hub-sys-text-primary, #212529) | color | Text color of an item |
--hub-list-item-gap | var(--hub-ref-space-2, 0.5rem) | length | Internal gap inside an item |
--hub-list-item-hover-bg | var(--hub-ref-surface-2, #f8f9fa) | color | Background of an item on hover |
--hub-list-item-padding-x | var(--hub-ref-space-3, 1rem) | length | Horizontal padding of an item |
--hub-list-item-padding-y | var(--hub-ref-space-2, 0.5rem) | length | Vertical padding of an item |
--hub-list-children-gap | var(--hub-list-item-padding-y) | length | Top margin separating a nested children list from its parent item |
--hub-list-accent | var(--hub-sys-color-primary, #0d6efd) | color | Semantic accent for the selected item — re-based per variant (list & cards) |
--hub-list-item-selected-bg | var(--hub-list-accent) | color | Background of a selected item |
--hub-list-item-selected-color | var(--hub-list-accent-on) | color | Text color of a selected item |
--hub-list-bottom-bar-gap | var(--hub-ref-space-3, 1rem) | length | Gap between elements in the bottom bar |
--hub-list-bottom-bar-justify-content | space-around | string | justify-content of the bottom bar |
--hub-list-bottom-bar-align-items | center | string | align-items of the bottom bar |
--hub-list-bottom-bar-wrap | wrap | string | flex-wrap of the bottom bar |
--hub-list-bottom-bar-paginator-order | 1 | number | Flex order of the paginator slot in the bottom bar |
--hub-list-bottom-bar-settings-order | 2 | number | Flex order of the settings slot in the bottom bar |
--hub-list-bottom-bar-info-order | 3 | number | Flex order of the info slot in the bottom bar |
--hub-list-bottom-bar-paginator-flex | 0 0 auto | number | Flex shorthand for the paginator slot |
--hub-list-bottom-bar-settings-flex | 0 0 auto | number | Flex shorthand for the settings slot |
--hub-list-bottom-bar-info-flex | 0 0 auto | number | Flex shorthand for the info slot |
--hub-list-search-btn-bg | var(--hub-ref-surface-2, #f8f9fa) | color | Background of the search trigger button |
--hub-list-search-btn-color | var(--hub-sys-text-primary, #212529) | color | Icon/text color of the search trigger button |
--hub-list-search-input-bg | var(--hub-sys-surface-page, #ffffff) | color | Background of the search input |
--hub-list-search-input-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border of the search input |
--hub-list-search-input-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Border radius of the search input |
--hub-list-search-input-color | var(--hub-sys-text-primary, #212529) | color | Text color of the search input |
--hub-list-action-btn-bg | var(--hub-sys-surface-page, #ffffff) | color | Action button background color |
--hub-list-action-btn-border-color | var(--hub-list-item-border-color) | color | Action button border color |
--hub-list-action-btn-border-radius | var(--hub-list-item-border-radius) | length | Action button border radius |
--hub-list-action-btn-color | var(--hub-list-item-color) | color | Action button text color |
--hub-list-action-btn-hover-bg | var(--hub-list-item-hover-bg) | color | Action button hover background |
--hub-list-action-btn-padding-x | 0.75rem | length | Action button horizontal padding |
--hub-list-action-btn-padding-y | 0.375rem | length | Action button vertical padding |
--hub-list-batch-actions-gap | var(--hub-ref-space-2, 0.5rem) | length | Batch actions group gap |
--hub-list-cards-bg | var(--hub-list-item-bg, transparent) | color | Card background color |
--hub-list-cards-border-color | var(--hub-list-item-border-color) | color | Card border color |
--hub-list-cards-border-radius | var(--hub-list-item-border-radius) | length | Card border radius |
--hub-list-cards-border-width | var(--hub-list-item-border-width, 1px) | length | Card border width |
--hub-list-cards-color | var(--hub-list-item-color) | color | Card text color |
--hub-list-cards-column-gap | var(--hub-list-cards-gap) | length | Card grid column gap |
--hub-list-cards-columns | auto-fit | number | Card grid column count |
--hub-list-cards-gap | var(--hub-list-items-gap) | length | Card grid gap |
--hub-list-cards-hover-bg | var(--hub-list-item-hover-bg) | color | Card hover background color |
--hub-list-cards-hover-shadow | var(--hub-list-cards-shadow) | shadow | Card hover box shadow |
--hub-list-cards-min-column-width | 18rem | length | Card minimum column width |
--hub-list-cards-padding-x | var(--hub-list-item-padding-x) | length | Card horizontal padding |
--hub-list-cards-padding-y | var(--hub-list-item-padding-y) | length | Card vertical padding |
--hub-list-drag-handle-color | var(--hub-sys-text-muted, #6c757d) | color | Drag handle colour |
--hub-list-drag-handle-cursor | grab | string | Drag handle cursor |
--hub-list-drag-handle-size | var(--hub-ref-icon-size, 1em) | length | Drag handle size |
--hub-list-item-dragging-opacity | 0.5 | number | Opacity of the item being dragged |
--hub-list-item-dragging-cursor | grabbing | string | Cursor while dragging an item |
--hub-list-drop-target-outline-color | var(--hub-list-accent) | color | Drop-target outline colour |
--hub-list-drop-target-outline-width | 2px | length | Drop-target outline width |
--hub-list-placeholder-bg | var(--hub-ref-surface-2, #f8f9fa) | color | Drop placeholder background |
--hub-list-placeholder-border-color | var(--hub-list-accent) | color | Drop placeholder border colour |
--hub-list-placeholder-border-width | 2px | length | Drop placeholder border width |
--hub-list-placeholder-border-style | dashed | border | Drop placeholder border style |
--hub-list-placeholder-border-radius | var(--hub-list-item-border-radius) | length | Drop placeholder border radius |
--hub-list-placeholder-min-height | 2.5rem | length | Drop placeholder minimum height |
--hub-list-ghost-opacity | 0.85 | number | Drag ghost opacity |
--hub-list-ghost-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Drag ghost shadow |
--hub-list-connector-color | var(--hub-sys-border-color-default, #dee2e6) | color | Color of the opt-in connector line between consecutive items (connected) |
--hub-list-connector-width | 2px | length | Thickness of the item connector line |
--hub-list-connector-style | solid | string | Border-style of the item connector (e.g. dashed) |
--hub-list-connector-offset | var(--hub-list-item-padding-x, var(--hub-ref-space-3, 1rem)) | length | Inline offset of the connector from the item's leading edge |
--hub-list-cards-row-gap | var(--hub-list-cards-gap) | length | Card grid row gap |
--hub-list-cards-shadow | none | shadow | Card box shadow |
--hub-list-cards-transition | background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out | transition | Card hover transition |
--hub-list-empty-padding-x | var(--hub-ref-space-3, 1rem) | length | Empty state horizontal padding |
--hub-list-empty-padding-y | var(--hub-ref-space-3, 1rem) | length | Empty state vertical padding |
--hub-list-item-border-width | 1px | length | List item border width |
--hub-list-search-border-color | var(--hub-list-search-input-border-color) | color | Search field border color |
--hub-list-search-border-radius | var(--hub-list-search-input-border-radius) | length | Search field border radius |
--hub-list-search-border-width | 1px | length | Search field border width |
--hub-list-search-button-min-width | 2.75rem | length | Search button minimum width |
--hub-list-search-input-font-size | 1rem | length | Search input font size |
--hub-list-search-input-padding-x | 0.75rem | length | Search input horizontal padding |
--hub-list-search-input-padding-y | 0.375rem | length | Search input vertical padding |
--hub-list-top-bar-align-items | center | string | Top bar cross-axis alignment |
--hub-list-top-bar-gap | var(--hub-ref-space-2, 0.5rem) | length | Top bar content gap |
--hub-list-top-bar-justify-content | end | string | Top bar content justification |
--hub-list-top-bar-wrap | wrap | string | Top bar flex wrapping |
Paginator
Design tokens read by this component. Override them on the host element (or any ancestor) to customize; every default falls back to the ng-hub-ui-ds layer.
| المتغيّر | الافتراضي | النوع | الوصف |
|---|---|---|---|
--hub-paginator-font-size | var(--hub-ref-font-size-base, 1rem) | length | Base font size of the paginator |
--hub-paginator-gap | var(--hub-ref-space-1, 0.25rem) | length | Gap between pagination items |
--hub-paginator-icon-color | var(--hub-sys-text-primary, #212529) | color | Fill color of navigation icons |
--hub-paginator-icon-size | 1em | length | Size of navigation icons |
--hub-paginator-info-color | var(--hub-sys-text-muted, #6c757d) | color | Color of the row summary text |
--hub-paginator-label-color | var(--hub-sys-text-muted, #6c757d) | color | Color of the items-per-page label |
--hub-paginator-link-active-bg | var(--hub-sys-color-primary, #0d6efd) | color | Background of active page link |
--hub-paginator-link-active-border-color | var(--hub-sys-color-primary, #0d6efd) | color | Border of active page link |
--hub-paginator-link-active-color | var(--hub-ref-color-white, #fff) | color | Text color of active page link |
--hub-paginator-link-bg | var(--hub-sys-surface-page, #ffffff) | color | Background of default page link |
--hub-paginator-link-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border of default page link |
--hub-paginator-link-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Border radius of page links |
--hub-paginator-link-color | var(--hub-sys-color-primary, #0d6efd) | color | Text color of default page link |
--hub-paginator-link-disabled-bg | var(--hub-ref-surface-2, #f8f9fa) | color | Background of disabled page link |
--hub-paginator-link-disabled-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border of disabled page link |
--hub-paginator-link-disabled-color | var(--hub-sys-text-muted, #6c757d) | color | Text color of disabled page link |
--hub-paginator-link-hover-bg | var(--hub-ref-surface-2, #f8f9fa) | color | Background of page link on hover |
--hub-paginator-link-hover-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border of page link on hover |
--hub-paginator-link-hover-color | var(--hub-sys-color-primary, #0d6efd) | color | Text color of page link on hover |
--hub-paginator-select-bg | var(--hub-sys-surface-page, #ffffff) | color | Background of the items-per-page select |
--hub-paginator-select-border-color | var(--hub-sys-border-color-default, #dee2e6) | color | Border of the items-per-page select |
--hub-paginator-select-border-radius | var(--hub-ref-radius-sm, 0.25rem) | length | Border radius of the items-per-page select |
--hub-paginator-select-color | var(--hub-sys-text-primary, #212529) | color | Text color of the items-per-page select |
--hub-paginator-select-padding-x | var(--hub-ref-space-2, 0.5rem) | length | Horizontal padding of the items-per-page select |
--hub-paginator-select-padding-y | var(--hub-ref-space-1, 0.25rem) | length | Vertical padding of the items-per-page select |
--hub-paginator-settings-gap | var(--hub-ref-space-2, 0.5rem) | length | Gap between label and select in the settings row |
--hub-paginator-icon-angle-left | url("data:image/svg+xml,…") | url | Icon for the previous-page button |
--hub-paginator-icon-angle-right | url("data:image/svg+xml,…") | url | Icon for the next-page button |
--hub-paginator-icon-angle-double-left | url("data:image/svg+xml,…") | url | Icon for the first-page button |
--hub-paginator-icon-angle-double-right | url("data:image/svg+xml,…") | url | Icon for the last-page button |
--hub-paginator-link-border-width | 1px | length | Page link border width |
--hub-paginator-link-focus-shadow | 0 0 0 var(--hub-sys-focus-ring-width, 0.25rem) var(--hub-sys-focus-ring-color, rgba(13, 110, 253, 0.25)) | shadow | Page link focus ring shadow |
--hub-paginator-link-padding-x | 0.75rem | length | Page link horizontal padding |
--hub-paginator-link-padding-y | 0.375rem | length | Page link vertical padding |
--hub-paginator-select-border-width | 1px | length | Page-size select border width |
--hub-paginator-transition | color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out | transition | Paginator element transitions |