A component that renders a Bootstrap Tag element using OverReact’s statically-typed React prop API.
Tags scale to match the size of the immediate parent element by using relative font sizing
and em
units.
part of over_react.web.demos;
ReactElement tagBasicDemo() => Dom.div()(
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'))
);
part of over_react.web.demo_components;
/// Bootstrap's `Tag` component renders a small and adaptive tag
/// for adding context to just about any content.
///
/// See: <http://v4-alpha.getbootstrap.com/components/tag/>
@Factory()
UiFactory<TagProps> Tag;
@Props()
class TagProps extends UiProps {
/// The skin / "context" for the [Tag].
///
/// See: <http://v4-alpha.getbootstrap.com/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: <http://v4-alpha.getbootstrap.com/components/tag/#pill-tags>.
///
/// Default: false
bool isPill;
}
@Component()
class TagComponent extends UiComponent<TagProps> {
@override
Map getDefaultProps() => (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()
..addProps(copyUnconsumedDomProps())
..className = classes.toClassName()
)(props.children);
}
}
/// Contextual skin options for a [Tag] component.
class TagSkin extends ClassNameConstant {
const TagSkin._(String name, String className) : super(name, className);
/// [className] value: 'tag-default'
static const TagSkin DEFAULT =
const TagSkin._('DEFAULT', 'tag-default');
/// [className] value: 'tag-primary'
static const TagSkin PRIMARY =
const TagSkin._('PRIMARY', 'tag-primary');
/// [className] value: 'tag-danger'
static const TagSkin DANGER =
const TagSkin._('DANGER', 'tag-danger');
/// [className] value: 'tag-success'
static const TagSkin SUCCESS =
const TagSkin._('SUCCESS', 'tag-success');
/// [className] value: 'tag-warning'
static const TagSkin WARNING =
const TagSkin._('WARNING', 'tag-warning');
/// [className] value: 'tag-info'
static const TagSkin INFO =
const TagSkin._('INFO', 'tag-info');
}
Set props.skin
to style a Tag
using contextual colors.
part of over_react.web.demos;
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')
);
Set props.isPill
to make tags more rounded. Useful if you miss the badges from Bootstrap v3.
part of over_react.web.demos;
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')
);