ResponsiveCards
Mixin
Mixin that allows responsive card behaviours.
It monitors column sizes using a ResizeObserver. When a columns width changes, it calculates the width of the cards in that column based on the columns width and the configured number of tasks per row (see tasksPerRow).
The card width is then used to pick a cardSizes, which applies CSS and might also affect task items.
By default the following levels are defined:
| Width | Name | Cls | Avatars | Items |
|---|---|---|---|---|
| < 50 | micro | b-micro-cards | 1 | Only resource avatars shown |
| < 75 | tiny | b-tiny-cards | 1 | |
| < 175 | small | b-small-cards | 1 | |
| < 300 | medium | b-medium-cards | 3 | |
| > 300 | large | b-large-cards | 7 |
If for example cards in a column are above 50px and below 75px wide, that column will have the b-tiny-cards CSS class applied to its element. Use it to style the cards in a suitable way for your application, perhaps by applying a smaller font size, hiding images etc.
No results
Configs
Configs are options you supply in a configuration object when creating an instance of this classProperties
Properties are getters/setters or publicly accessible variables on this class-
Identifies an object as an instance of ResponsiveCards class, or subclass thereof.
-
Identifies an object as an instance of ResponsiveCards class, or subclass thereof.