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',
                },
              },
            ),
        ],
      );