Skeleton constructor

Skeleton({
  1. String shape = 'line',
  2. int lines = 1,
  3. Object? width,
  4. Object? height,
  5. String? className,
  6. Map<String, Object?> props = const {},
  7. Map<String, Object?> style = const {},
  8. DartStyle? dartStyle,
})

Creates one or more skeleton placeholder lines.

Implementation

Skeleton({
  String shape = 'line',
  int lines = 1,
  Object? width,
  Object? height,
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
}) : super(
       'div',
       props: mergeComponentProps(
         props,
         className: className,
         defaultStyle: const {'display': 'grid', 'gap': '8px'},
         dartStyle: dartStyle,
         style: style,
       ),
       children: [
         for (var i = 0; i < lines; i++)
           FlintElement(
             'span',
             props: {
               'aria-hidden': 'true',
               'data-shape': shape,
               'style': {
                 'display': 'block',
                 'width': width == null ? '100%' : cssValue(width),
                 'height': height == null
                     ? (shape == 'circle' ? '40px' : '12px')
                     : cssValue(height),
                 'border-radius': shape == 'circle' ? '999px' : '6px',
                 'background': '#eaecf0',
               },
             },
           ),
       ],
     );