ProgressBar constructor

ProgressBar({ required num value, num max = 100, String? label, Tone tone = Tone.primary, String? className, Map<String, Object?> props = const {}, Map<String, Object?> style = const {}, DartStyle? dartStyle, })

Creates a progress bar for value out of max.

Implementation

ProgressBar({
  required num value,
  num max = 100,
  String? label,
  Tone tone = Tone.primary,
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
}) : super(
        'div',
        props: mergeComponentProps(
          {
            ...props,
            'role': 'progressbar',
            'aria-valuenow': value,
            'aria-valuemin': 0,
            'aria-valuemax': max,
            if (label != null) 'aria-label': label,
          },
          className: className,
          defaultStyle: const {'display': 'grid', 'gap': '6px'},
          dartStyle: dartStyle,
          style: style,
        ),
        children: [
          if (label != null) FlintText(label),
          FlintElement(
            'div',
            props: const {
              'style': {
                'height': '8px',
                'border-radius': '999px',
                'background': '#eaecf0',
                'overflow': 'hidden',
              },
            },
            children: [
              FlintElement(
                'span',
                props: {
                  'style': {
                    'display': 'block',
                    'height': '100%',
                    'width': '${_percent(value, max)}%',
                    'background': toneSolid(tone),
                  },
                },
              ),
            ],
          ),
        ],
      );