forked from Workiva/over_react
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
DOCS: Add ListGroup / ListGroupItem / Tag components & demos
- Loading branch information
1 parent
6b35e07
commit ff894b3
Showing
44 changed files
with
1,679 additions
and
14 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
#!/usr/bin/env bash | ||
|
||
pub build --mode=debug | ||
|
||
|
||
# Generate html includes that can be passed in as jekyll include parameters for demo-code-example.html | ||
|
||
# | ||
# ListGroup / ListGroupItem | ||
# | ||
cp -r web/src/demo_components/list_group.dart docs/_includes/component-demo-code-ex/list_group.dart.html | ||
cp -r web/src/demo_components/list_group_item.dart docs/_includes/component-demo-code-ex/list_group_item.dart.html | ||
|
||
cp -r web/demos/list-group/list-group-basic.dart docs/_includes/component-demo-code-ex/list-group-basic.dart.html | ||
cp -r web/demos/list-group/list-group-tags.dart docs/_includes/component-demo-code-ex/list-group-tags.dart.html | ||
cp -r web/demos/list-group/list-group-anchors-and-buttons.dart docs/_includes/component-demo-code-ex/list-group-anchors-and-buttons.dart.html | ||
cp -r web/demos/list-group/list-group-contextual.dart docs/_includes/component-demo-code-ex/list-group-contextual.dart.html | ||
cp -r web/demos/list-group/list-group-header.dart docs/_includes/component-demo-code-ex/list-group-header.dart.html | ||
|
||
|
||
# | ||
# Tag | ||
# | ||
cp -r web/src/demo_components/tag.dart docs/_includes/component-demo-code-ex/tag.dart.html | ||
|
||
cp -r web/demos/tag/tag-basic.dart docs/_includes/component-demo-code-ex/tag-basic.dart.html | ||
cp -r web/demos/tag/tag-contextual.dart docs/_includes/component-demo-code-ex/tag-contextual.dart.html | ||
cp -r web/demos/tag/tag-pills.dart docs/_includes/component-demo-code-ex/tag-pills.dart.html |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,80 @@ | ||
--- | ||
title: ListGroup Component Demo | ||
lead: We should really type something else here, to help the peoples with the understanding. | ||
lead: A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/list-group/" target="bs">Bootstrap List Group</a> using a statically-typed React prop API. | ||
layout: demo | ||
slug: list-group | ||
parent_slug: demos | ||
baseurl: ../../ | ||
dart_src: ../../web/demos/list-group/index.dart | ||
dart_src: ../../build/web/demos/list-group/index.dart | ||
--- | ||
|
||
<h2 id="contents" class="docs-heading">Contents</h2> | ||
|
||
<ul> | ||
<li> | ||
<a href="#basic-example">Basic example</a> | ||
</li> | ||
<li> | ||
<a href="#tags">Tags</a> | ||
</li> | ||
<li> | ||
<a href="#anchors-and-buttons">Anchors and buttons</a> | ||
</li> | ||
<li> | ||
<a href="#contextual-skins">Contextual skins</a> | ||
</li> | ||
<li> | ||
<a href="#headers">Headers</a> | ||
</li> | ||
</ul> | ||
|
||
|
||
<h2 id="basic-example" class="docs-heading">Basic example</h2> | ||
<p>The most basic <code>ListGroup</code> component is simply list <code>ListGroupItem</code> components.</p> | ||
<p>The components encapsulate the complexity of the underlying HTML, ensuring that all the | ||
default CSS classes and other HTML attributes are present, leaving you with minimal markup.</p> | ||
{% include demo-code-example.html | ||
name='list-group-basic' | ||
consumption_code_file_name='list-group-basic' | ||
component_file_name='list_group' | ||
component_name='ListGroup' | ||
component_two_file_name='list_group_item' | ||
component_two_name='ListGroupItem' | ||
%} | ||
|
||
|
||
<h2 id="tags" class="docs-heading">Tags</h2> | ||
<p>Nest a <code><a href="../tag/">Tag</a></code> component within any `ListGroupItem` to show unread counts, activity, | ||
etc.</p> | ||
{% include demo-code-example.html | ||
name='list-group-tags' | ||
consumption_code_file_name='list-group-tags' | ||
%} | ||
|
||
|
||
<h2 id="anchors-and-buttons" class="docs-heading">Anchors and buttons</h2> | ||
<p>Set <code>props.onClick</code> to render an HTML <code><button></code> element, or <code>props.href</code> | ||
to render an HTML <code><a></code> element with hover, disabled, and active states.</p> | ||
<p>Set <code>props.isDisabled</code> to disable an item, and <code>isActive</code> to make an item appear active.</p> | ||
{% include demo-code-example.html | ||
name='list-group-anchors-and-buttons' | ||
consumption_code_file_name='list-group-anchors-and-buttons' | ||
%} | ||
|
||
|
||
<h2 id="contextual-skins" class="docs-heading">Contextual skins</h2> | ||
<p>Set <code>props.skin</code> to style a <code>ListGroupItem</code> using contextual colors.</p> | ||
{% include demo-code-example.html | ||
name='list-group-contextual' | ||
consumption_code_file_name='list-group-contextual' | ||
%} | ||
|
||
<h2 id="headers" class="docs-heading">Headers</h2> | ||
<p>Set <code>props.header</code> to render a <code>ListGroupItem</code> that has a distinct header and body content | ||
region.</p> | ||
|
||
<p>Optionally, set <code>props.headerSize</code> to modify the size of the header itself.</p> | ||
{% include demo-code-example.html | ||
name='list-group-header' | ||
consumption_code_file_name='list-group-header' | ||
%} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
--- | ||
title: Tag Component Demo | ||
lead: A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/tag/" target="bs">Bootstrap Tag</a> using a statically-typed React prop API. | ||
layout: demo | ||
slug: tag | ||
parent_slug: demos | ||
baseurl: ../../ | ||
dart_src: ../../build/web/demos/tag/index.dart | ||
--- | ||
|
||
<h2 id="contents" class="docs-heading">Contents</h2> | ||
|
||
<ul> | ||
<li> | ||
<a href="#basic-example">Basic example</a> | ||
</li> | ||
<li> | ||
<a href="#contextual-skins">Contextual skins</a> | ||
</li> | ||
<li> | ||
<a href="#pill-tags">Pill tags</a> | ||
</li> | ||
</ul> | ||
|
||
|
||
<h2 id="basic-example" class="docs-heading">Basic example</h2> | ||
<p>Tags scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.</p> | ||
{% include demo-code-example.html | ||
name='tag-basic' | ||
consumption_code_file_name='tag-basic' | ||
component_file_name='tag' | ||
component_name='Tag' | ||
%} | ||
|
||
|
||
<h2 id="contextual-skins" class="docs-heading">Contextual skins</h2> | ||
<p>Set <code>props.skin</code> to style a <code>Tag</code> using contextual colors.</p> | ||
{% include demo-code-example.html | ||
name='tag-contextual' | ||
consumption_code_file_name='tag-contextual' | ||
%} | ||
|
||
|
||
<h2 id="pill-tags" class="docs-heading">Pill tags</h2> | ||
<p>Set <code>props.isPill</code> to make tags more rounded. Useful if you miss the badges from Bootstrap v3.</p> | ||
{% include demo-code-example.html | ||
name='tag-pills' | ||
consumption_code_file_name='tag-pills' | ||
%} |
29 changes: 29 additions & 0 deletions
29
docs/_includes/component-demo-code-ex/list-group-anchors-and-buttons.dart.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
part of over_react.web.demos; | ||
|
||
ReactElement listGroupAnchorsAndButtonsDemo() => | ||
ListGroup()( | ||
(ListGroupItem() | ||
..isActive = true | ||
..href = '#' | ||
)('Cras justo odio'), | ||
(ListGroupItem() | ||
..onClick = (_) {} | ||
)('Dapibus ac facilisis in'), | ||
(ListGroupItem() | ||
..onClick = (_) {} | ||
)('Morbi leo risus'), | ||
(ListGroupItem() | ||
..onClick = (_) {} | ||
)('Porta ac consectetur ac'), | ||
(ListGroupItem() | ||
..isDisabled = true | ||
..onClick = (_) {} | ||
)('Vestibulum at eros') | ||
); | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
9 changes: 9 additions & 0 deletions
9
docs/_includes/component-demo-code-ex/list-group-basic.dart.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
part of over_react.web.demos; | ||
|
||
ReactElement listGroupBasicDemo() => | ||
ListGroup()( | ||
ListGroupItem()('Dapibus ac facilisis in'), | ||
ListGroupItem()('Cras sit amet nibh libero'), | ||
ListGroupItem()('Porta ac consectetur ac'), | ||
ListGroupItem()('Vestibulum at eros') | ||
); |
21 changes: 21 additions & 0 deletions
21
docs/_includes/component-demo-code-ex/list-group-contextual.dart.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
part of over_react.web.demos; | ||
|
||
ReactElement listGroupContextualSkinDemo() => | ||
ListGroup()( | ||
(ListGroupItem() | ||
..onClick = (_) {} | ||
..skin = ListGroupItemSkin.SUCCESS | ||
)('Dapibus ac facilisis in'), | ||
(ListGroupItem() | ||
..onClick = (_) {} | ||
..skin = ListGroupItemSkin.INFO | ||
)('Cras sit amet nibh libero'), | ||
(ListGroupItem() | ||
..onClick = (_) {} | ||
..skin = ListGroupItemSkin.WARNING | ||
)('Porta ac consectetur ac'), | ||
(ListGroupItem() | ||
..onClick = (_) {} | ||
..skin = ListGroupItemSkin.DANGER | ||
)('Vestibulum at eros') | ||
); |
17 changes: 17 additions & 0 deletions
17
docs/_includes/component-demo-code-ex/list-group-disabled-item.dart.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
part of over_react.web.demos; | ||
|
||
ReactElement listGroupDisabledItemDemo() => | ||
ListGroup()( | ||
(ListGroupItem()..isDisabled = true)('Cras justo odio'), | ||
ListGroupItem()('Dapibus ac facilisis in'), | ||
ListGroupItem()('Morbi leo risus'), | ||
ListGroupItem()('Porta ac consectetur ac'), | ||
ListGroupItem()('Vestibulum at eros') | ||
); | ||
|
||
|
||
|
||
|
||
|
||
|
||
|
29 changes: 29 additions & 0 deletions
29
docs/_includes/component-demo-code-ex/list-group-header.dart.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
part of over_react.web.demos; | ||
|
||
ReactElement listGroupHeaderDemo() => | ||
ListGroup()( | ||
(ListGroupItem() | ||
..header = 'List group item heading' | ||
..onClick = (_) {} | ||
..isActive = true | ||
)( | ||
'Donec id elit non mi porta gravida at eget metus. ' | ||
'Maecenas sed diam eget risus varius blandit.' | ||
), | ||
(ListGroupItem() | ||
..header = 'List group item heading' | ||
..headerSize = ListGroupItemHeaderElementSize.H4 | ||
..onClick = (_) {} | ||
)( | ||
'Donec id elit non mi porta gravida at eget metus. ' | ||
'Maecenas sed diam eget risus varius blandit.' | ||
), | ||
(ListGroupItem() | ||
..header = 'List group item heading' | ||
..headerSize = ListGroupItemHeaderElementSize.H3 | ||
..onClick = (_) {} | ||
)( | ||
'Donec id elit non mi porta gravida at eget metus. ' | ||
'Maecenas sed diam eget risus varius blandit.' | ||
) | ||
); |
26 changes: 26 additions & 0 deletions
26
docs/_includes/component-demo-code-ex/list-group-tags.dart.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
part of over_react.web.demos; | ||
|
||
ReactElement listGroupTagsDemo() => | ||
ListGroup()( | ||
ListGroupItem()( | ||
(Tag() | ||
..className = 'float-xs-right' | ||
..isPill = true | ||
)(14), | ||
'Cras justo odio' | ||
), | ||
ListGroupItem()( | ||
(Tag() | ||
..className = 'float-xs-right' | ||
..isPill = true | ||
)(2), | ||
'Dapibus ac facilisis in' | ||
), | ||
ListGroupItem()( | ||
(Tag() | ||
..className = 'float-xs-right' | ||
..isPill = true | ||
)(1), | ||
'Morbi leo risus' | ||
) | ||
); |
49 changes: 49 additions & 0 deletions
49
docs/_includes/component-demo-code-ex/list_group.dart.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,49 @@ | ||
part of over_react.web.demo_components; | ||
|
||
/// Bootstrap's `ListGroup` component is flexible and powerful for | ||
/// displaying lists of [ListGroupItem] components. | ||
/// | ||
/// See: <http://v4-alpha.getbootstrap.com/components/list-group/> | ||
@Factory() | ||
UiFactory<ListGroupProps> ListGroup; | ||
|
||
@Props() | ||
class ListGroupProps extends UiProps { | ||
/// The HTML element type for the [ListGroup], specifying its | ||
/// DOM representation when rendered. | ||
/// | ||
/// Default: [ListGroupElementType.DIV] | ||
ListGroupElementType elementType; | ||
} | ||
|
||
@Component() | ||
class ListGroupComponent extends UiComponent<ListGroupProps> { | ||
@override | ||
Map getDefaultProps() => (newProps() | ||
..elementType = ListGroupElementType.DIV | ||
); | ||
|
||
@override | ||
render() { | ||
var classes = forwardingClassNameBuilder() | ||
..add('list-group'); | ||
|
||
return (props.elementType.componentBuilderFactory() | ||
..addProps(copyUnconsumedDomProps()) | ||
..className = classes.toClassName() | ||
)(props.children); | ||
} | ||
} | ||
|
||
/// Options for the [Element] that will be used when | ||
/// rendering a [ListGroup] component. | ||
class ListGroupElementType { | ||
final BuilderOnlyUiFactory<DomProps> componentBuilderFactory; | ||
ListGroupElementType._internal(this.componentBuilderFactory); | ||
|
||
/// A [Dom.ul] (HTML `<ul>` element) | ||
static final ListGroupElementType UL = new ListGroupElementType._internal(Dom.ul); | ||
|
||
/// A [Dom.div] (HTML `<div>` element) | ||
static final ListGroupElementType DIV = new ListGroupElementType._internal(Dom.div); | ||
} |
Oops, something went wrong.