Tag Component Demo

A component that renders a Bootstrap Tag element using OverReact’s statically-typed React prop API.

Contents

Basic example

Tags scale to match the size of the immediate parent element by using relative font sizing and em units.

Rendering OverReact Demo . . . 
import 'package:over_react/over_react.dart';

import '../../demo_components.dart';

ReactElement tagBasicDemo() => Fragment()(
  Dom.h1()('Example heading ', Tag()('New')),
  Dom.h2()('Example heading ', Tag()('New')),
  Dom.h3()('Example heading ', Tag()('New')),
  Dom.h4()('Example heading ', Tag()('New')),
  Dom.h5()('Example heading ', Tag()('New')),
  Dom.h6()('Example heading ', Tag()('New'))
);
import 'package:over_react/over_react.dart';
part 'tag.over_react.g.dart';

UiFactory<TagProps> Tag = _$Tag;

mixin TagProps on UiProps {
  /// The skin / "context" for the [Tag].
  ///
  /// See: <https://getbootstrap.com/docs/4.4/components/tag/#contextual-variations>.
  ///
  /// Default: [TagSkin.DEFAULT]
  TagSkin skin;

  /// Whether to render the [Tag] with rounded corners that make it look
  /// more like a "pill" (a.k.a Bootstrap v3 "badge")
  ///
  /// See: <https://getbootstrap.com/docs/4.4/components/tag/#pill-tags>.
  ///
  /// Default: false
  bool isPill;
}

class TagComponent extends UiComponent2<TagProps> {
  @override
  get defaultProps => (newProps()
    ..skin = TagSkin.DEFAULT
    ..isPill = false
  );

  @override
  render() {
    var classes = forwardingClassNameBuilder()
      ..add('tag')
      ..add('tag-pill', props.isPill)
      ..add(props.skin.className);

    return (Dom.span()
      ..modifyProps(addUnconsumedDomProps)
      ..className = classes.toClassName()
    )(props.children);
  }
}

class TagSkin extends ClassNameConstant {
  const TagSkin._(String name, String className) : super(name, className);

  /// [className] value: 'tag-default'
  static const TagSkin DEFAULT =
      TagSkin._('DEFAULT', 'tag-default');

  /// [className] value: 'tag-primary'
  static const TagSkin PRIMARY =
      TagSkin._('PRIMARY', 'tag-primary');

  /// [className] value: 'tag-danger'
  static const TagSkin DANGER =
      TagSkin._('DANGER', 'tag-danger');

  /// [className] value: 'tag-success'
  static const TagSkin SUCCESS =
      TagSkin._('SUCCESS', 'tag-success');

  /// [className] value: 'tag-warning'
  static const TagSkin WARNING =
      TagSkin._('WARNING', 'tag-warning');

  /// [className] value: 'tag-info'
  static const TagSkin INFO =
      TagSkin._('INFO', 'tag-info');
}

Contextual skins

Set props.skin to style a Tag using contextual colors.

Rendering OverReact Demo . . . 
import 'package:over_react/over_react.dart';

import '../../demo_components.dart';

ReactElement tagContextualDemo() => Dom.div()(
  (Tag()..skin = TagSkin.DEFAULT)('Default'),
  (Tag()..skin = TagSkin.PRIMARY)('Primary'),
  (Tag()..skin = TagSkin.SUCCESS)('Success'),
  (Tag()..skin = TagSkin.INFO)('Info'),
  (Tag()..skin = TagSkin.WARNING)('Warning'),
  (Tag()..skin = TagSkin.DANGER)('Danger')
);

Pill tags

Set props.isPill to make tags more rounded. Useful if you miss the badges from Bootstrap v3.

Rendering OverReact Demo . . . 
import 'package:over_react/over_react.dart';

import '../../demo_components.dart';

ReactElement tagPillsDemo() => Dom.div()(
  (Tag()
    ..isPill = true
    ..skin = TagSkin.DEFAULT
  )('Default'),
  (Tag()
    ..isPill = true
    ..skin = TagSkin.PRIMARY
  )('Primary'),
  (Tag()
    ..isPill = true
    ..skin = TagSkin.SUCCESS
  )('Success'),
  (Tag()
    ..isPill = true
    ..skin = TagSkin.INFO
  )('Info'),
  (Tag()
    ..isPill = true
    ..skin = TagSkin.WARNING
  )('Warning'),
  (Tag()
    ..isPill = true
    ..skin = TagSkin.DANGER
  )('Danger')
);