Topbar constructor

Topbar({ String? title, String? subtitle, Object? leading, Object? actions, Object? user, String? className, Map<String, Object?> props = const {}, Map<String, Object?> style = const {}, DartStyle? dartStyle, })

Creates a topbar for app shells and dashboards.

Implementation

Topbar({
  String? title,
  String? subtitle,
  Object? leading,
  Object? actions,
  Object? user,
  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': 'center',
            'justify-content': 'space-between',
            'gap': '16px',
            'min-height': '64px',
            'padding': '0 24px',
            'border-bottom': '1px solid #e4e7ec',
            'background': '#ffffff',
          },
          dartStyle: dartStyle,
          style: style,
        ),
        children: [
          FlintElement(
            'div',
            props: const {
              'style': {
                'display': 'flex',
                'align-items': 'center',
                'gap': '12px',
                'min-width': 0,
              },
            },
            children: [
              if (leading != null) toFlintNode(leading),
              if (title != null || subtitle != null)
                FlintElement(
                  'div',
                  props: const {
                    'style': {'min-width': 0},
                  },
                  children: [
                    if (title != null)
                      FlintElement(
                        'h1',
                        props: const {
                          'style': {
                            'margin': 0,
                            'font-size': '18px',
                            'line-height': 1.3,
                          },
                        },
                        children: normalizeChildren(title, const []),
                      ),
                    if (subtitle != null)
                      FlintElement(
                        'p',
                        props: const {
                          'style': {
                            'margin': 0,
                            'color': '#667085',
                            'font-size': '13px',
                          },
                        },
                        children: normalizeChildren(subtitle, const []),
                      ),
                  ],
                ),
            ],
          ),
          FlintElement(
            'div',
            props: const {
              'style': {
                'display': 'flex',
                'align-items': 'center',
                'gap': '10px',
              },
            },
            children: [
              if (actions != null) toFlintNode(actions),
              if (user != null) toFlintNode(user),
            ],
          ),
        ],
      );