PageHeader constructor

PageHeader({
  1. required String title,
  2. String? description,
  3. Object? breadcrumbs,
  4. Object? actions,
  5. String? className,
  6. Map<String, Object?> props = const {},
  7. Map<String, Object?> style = const {},
  8. DartStyle? dartStyle,
})

Creates a page header for a top-level screen.

Implementation

PageHeader({
  required String title,
  String? description,
  Object? breadcrumbs,
  Object? actions,
  String? className,
  Map<String, Object?> props = const {},
  Map<String, Object?> style = const {},
  DartStyle? dartStyle,
}) : super(
        'header',
        props: mergeComponentProps(
          props,
          className: className,
          defaultStyle: const {
            'display': 'flex',
            'align-items': 'flex-start',
            'justify-content': 'space-between',
            'gap': '16px',
            'margin-bottom': '20px',
          },
          dartStyle: dartStyle,
          style: style,
        ),
        children: [
          FlintElement(
            'div',
            props: const {
              'style': {'display': 'grid', 'gap': '6px'},
            },
            children: [
              if (breadcrumbs != null) toFlintNode(breadcrumbs),
              FlintElement(
                'h1',
                props: const {
                  'style': {
                    'margin': 0,
                    'font-size': '28px',
                    'line-height': 1.2,
                  },
                },
                children: normalizeChildren(title, const []),
              ),
              if (description != null)
                FlintElement(
                  'p',
                  props: const {
                    'style': {'margin': 0, 'color': '#667085'},
                  },
                  children: normalizeChildren(description, const []),
                ),
            ],
          ),
          if (actions != null) toFlintNode(actions),
        ],
      );