This is an automated email from the ASF dual-hosted git repository.
carlosrovira pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/royale-asjs.git
The following commit(s) were added to refs/heads/develop by this push:
new 9414f16 tour-de-jewel: button play ground with more examples
9414f16 is described below
commit 9414f16201b08f9686fd288173378fd5331c0dc0
Author: Carlos Rovira <[email protected]>
AuthorDate: Tue Feb 25 00:10:38 2020 +0100
tour-de-jewel: button play ground with more examples
---
.../src/main/royale/ButtonPlayGround.mxml | 496 ++++++++++++++-------
1 file changed, 340 insertions(+), 156 deletions(-)
diff --git a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
index 10a5815..acd5a34 100644
--- a/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
+++ b/examples/royale/TourDeJewel/src/main/royale/ButtonPlayGround.mxml
@@ -57,196 +57,380 @@ limitations under the License.
</c:description>
</c:ExampleHeader>
+ <j:GridCell desktopNumerator="1" desktopDenominator="1"
tabletNumerator="1" tabletDenominator="1" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Jewel SimpleButton"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Label multiline="true">
+
<j:html><![CDATA[<p><b>SimpleButton</b> is a button without text or icons. It
supports emphasis, outlined and unboxed styles. Is the base class for
<b>Button</b>.</p>]]></j:html>
+ </j:Label>
+ <j:Group>
+ <j:beads>
+ <j:HorizontalFlowLayout
gap="3"/>
+ </j:beads>
+ <j:SimpleButton/>
+ <j:SimpleButton>
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:SimpleButton>
+ <j:SimpleButton
emphasis="{StyledUIBase.PRIMARY}"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.SECONDARY}"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.EMPHASIZED}"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.PRIMARY}" outlined="true"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.SECONDARY}" outlined="true"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.EMPHASIZED}" outlined="true"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.PRIMARY}" unboxed="true"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.SECONDARY}" unboxed="true"/>
+ <j:SimpleButton
emphasis="{StyledUIBase.EMPHASIZED}" unboxed="true"/>
+ </j:Group>
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel Button"/>
-
- <j:Button text="Default"/>
- <j:Button text="Show Width Defaults"
click="clickHandler(event)" width="250"/>
- <j:Button text="Disabled">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:Button>
- <j:Button text="Button With Multi line"
width="140">
- <j:beads>
- <j:MultiLine multiline="true"/>
- </j:beads>
- </j:Button>
- <j:Button text="Primary"
emphasis="{StyledUIBase.PRIMARY}"/>
- <j:Button text="Secondary"
emphasis="{StyledUIBase.SECONDARY}"/>
- <j:Button text="Emphasized"
emphasis="{StyledUIBase.EMPHASIZED}"/>
- <j:Button text="Disabled"
emphasis="{StyledUIBase.PRIMARY}">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:Button>
-
- <j:SimpleButton
emphasis="{StyledUIBase.EMPHASIZED}"/>
+ <j:CardHeader>
+ <html:H3 text="Jewel Button"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Button text="Default"/>
+ <j:Button text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="Primary"
emphasis="{StyledUIBase.PRIMARY}"/>
+ <j:Button text="Secondary"
emphasis="{StyledUIBase.SECONDARY}"/>
+ <j:Button text="Emphasized"
emphasis="{StyledUIBase.EMPHASIZED}"/>
+ <j:Button text="Disabled (Primary)"
emphasis="{StyledUIBase.PRIMARY}">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:Button>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
<j:Card>
- <html:H4 text="Button Sizes"/>
-
- <j:Button text="xsmall">
- <j:beads>
- <j:SizeControl
size="{SizeControl.XSMALL}"/>
- </j:beads>
- </j:Button>
- <j:Button text="small"
emphasis="{StyledUIBase.PRIMARY}">
- <j:beads>
- <j:SizeControl
size="{SizeControl.SMALL}"/>
- </j:beads>
- </j:Button>
- <j:Button text="large"
emphasis="{StyledUIBase.SECONDARY}">
- <j:beads>
- <j:SizeControl
size="{SizeControl.LARGE}"/>
- </j:beads>
- </j:Button>
- <j:Button text="xlarge"
emphasis="{StyledUIBase.EMPHASIZED}">
- <j:beads>
- <j:SizeControl
size="{SizeControl.XLARGE}"/>
- </j:beads>
- </j:Button>
+ <j:CardHeader>
+ <html:H3 text="Jewel Button Sizes"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Button text="xsmall">
+ <j:beads>
+ <j:SizeControl
size="{SizeControl.XSMALL}"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="small"
emphasis="{StyledUIBase.PRIMARY}">
+ <j:beads>
+ <j:SizeControl
size="{SizeControl.SMALL}"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="large"
emphasis="{StyledUIBase.SECONDARY}">
+ <j:beads>
+ <j:SizeControl
size="{SizeControl.LARGE}"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="xlarge"
emphasis="{StyledUIBase.EMPHASIZED}">
+ <j:beads>
+ <j:SizeControl
size="{SizeControl.XLARGE}"/>
+ </j:beads>
+ </j:Button>
+
+ <j:Button text="Show Width Defaults"
click="clickHandler(event)" width="250"/>
+
+ <j:Button text="Button With Multi line"
width="140">
+ <j:beads>
+ <j:MultiLine
multiline="true"/>
+ </j:beads>
+ </j:Button>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
<j:Card>
- <html:H4 text="Button with Icons"/>
-
- <j:IconButton text="print" emphasis="primary">
- <j:icon>
- <js:FontIcon
text="{MaterialIconType.PRINT}" material="true"/>
- </j:icon>
- </j:IconButton>
- <j:IconButton emphasis="primary">
- <j:icon>
- <js:FontIcon
text="{MaterialIconType.FACE}" material="true"/>
- </j:icon>
- </j:IconButton>
+ <j:CardHeader>
+ <html:H3 text="Jewel Button Outlined"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <!-- <j:Label multiline="true">
+ <j:html><![CDATA[<p>This Card
adds a <b>CardHeader</b> as the first element and the title is colored with
"secondary-normal", then <b>CardPrimaryContent</b> and <b>CardActions</b> card
parts. Actions use IconButton to add icons and the "outlined"
style.</p>]]></j:html>
+ </j:Label> -->
+ <j:Button text="Default"
outlined="true"/>
- <j:HGroup gap="3"
itemsHorizontalAlign="itemsCentered">
- <j:IconButton localId="ib_lor" text="Do
not disturb">
+ <j:Button text="Disabled"
outlined="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:Button>
+
+ <j:Button text="Primary"
emphasis="{StyledUIBase.PRIMARY}" outlined="true"/>
+ <j:Button text="Secondary"
emphasis="{StyledUIBase.SECONDARY}" outlined="true"/>
+ <j:Button text="Emphasized"
emphasis="{StyledUIBase.EMPHASIZED}" outlined="true"/>
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Jewel Button Unboxed"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <!-- <j:Label multiline="true">
+ <j:html><![CDATA[<p>This Card
adds a <b>CardHeader</b> as the first element and the title is colored with
"secondary-normal", then <b>CardPrimaryContent</b> and <b>CardActions</b> card
parts. Actions use IconButton to add icons and the "outlined"
style.</p>]]></j:html>
+ </j:Label> -->
+ <j:Button text="Default"
unboxed="true"/>
+
+ <j:Button text="Disabled"
unboxed="true">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:Button>
+
+ <j:Button text="Primary"
emphasis="{StyledUIBase.PRIMARY}" unboxed="true"/>
+ <j:Button text="Secondary"
emphasis="{StyledUIBase.SECONDARY}" unboxed="true"/>
+ <j:Button text="Emphasized"
emphasis="{StyledUIBase.EMPHASIZED}" unboxed="true"/>
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Jewel IconButton"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:IconButton text="print"
emphasis="primary">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.PRINT}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton emphasis="secondary">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.FACE}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton text="wifi"
emphasis="emphasized">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.WIFI}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+
+ <j:HGroup gap="3"
itemsHorizontalAlign="itemsCentered">
+ <j:IconButton localId="ib_lor"
text="Do not disturb">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:CheckBox
text="rightPosition" change="ib_lor.rightPosition = !ib_lor.rightPosition"/>
+ </j:HGroup>
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Jewel IconButton
Outlined" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:IconButton text="print"
emphasis="primary" outlined="true">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.PRINT}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton emphasis="secondary"
outlined="true">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.FACE}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton text="wifi"
emphasis="emphasized" outlined="true">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.WIFI}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+
+ <j:HGroup gap="3"
itemsHorizontalAlign="itemsCentered">
+ <j:IconButton localId="ib_lor2"
text="Do not disturb" outlined="true">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:CheckBox
text="rightPosition" change="ib_lor2.rightPosition = !ib_lor2.rightPosition"/>
+ </j:HGroup>
+ </j:CardPrimaryContent>
+ </j:Card>
+ </j:GridCell>
+
+ <j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
+ <j:Card>
+ <j:CardHeader>
+ <html:H3 text="Jewel IconButton
Unboxed" className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:IconButton text="print"
emphasis="primary" unboxed="true">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.PRINT}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:IconButton emphasis="secondary"
unboxed="true">
<j:icon>
- <js:FontIcon
text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+ <js:FontIcon
text="{MaterialIconType.FACE}" material="true"/>
</j:icon>
</j:IconButton>
- <j:CheckBox selected="true"
text="rightPosition" change="ib_lor.rightPosition = !ib_lor.rightPosition"/>
- </j:HGroup>
+ <j:IconButton text="wifi"
emphasis="emphasized" unboxed="true">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.WIFI}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+
+ <j:HGroup gap="3"
itemsHorizontalAlign="itemsCentered">
+ <j:IconButton localId="ib_lor3"
text="Do not disturb" unboxed="true">
+ <j:icon>
+ <js:FontIcon
text="{MaterialIconType.DO_NOT_DISTURB}" material="true"/>
+ </j:icon>
+ </j:IconButton>
+ <j:CheckBox
text="rightPosition" change="ib_lor3.rightPosition = !ib_lor3.rightPosition"/>
+ </j:HGroup>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
<j:Card>
- <html:H4 text="Button size"/>
-
- <j:HGroup gap="3"
itemsVerticalAlign="itemsSameHeight">
- <j:Button id="reizableButton"
text="Resize {slider_w.value}x{slider_h.value}"
emphasis="{StyledUIBase.PRIMARY}" width="140" height="50"/>
- <j:Button text="check layout"/>
- </j:HGroup>
- <j:HSlider id="slider_w" width="250"
value="140" minimum="120" maximum="350" valueChange="onValueChange(event)"/>
- <j:HSlider id="slider_h" width="250" value="50"
minimum="40" maximum="350" valueChange="onValueChange(event)"/>
- <j:Label text="Resize button to:
'{reizableButton.width}x{reizableButton.height}'"/>
+ <j:CardHeader>
+ <html:H3 text="Jewel Button Size"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:SimpleTable>
+ <j:TBody>
+ <j:TableRow>
+ <j:TableCell/>
+ <j:TableCell
align="center">
+
<j:HSlider id="slider_w" width="250" value="140" minimum="120" maximum="250"
valueChange="onValueChange(event)"/>
+ </j:TableCell>
+ </j:TableRow>
+ <j:TableRow>
+ <j:TableCell
align="center">
+
<j:VSlider id="slider_h" value="50" minimum="40" maximum="250"
valueChange="onValueChange(event)"/>
+ </j:TableCell>
+ <j:TableCell
width="270" height="270" align="center">
+
<j:Button id="reizableButton" text="Resize {slider_w.value}x{slider_h.value}"
emphasis="{StyledUIBase.PRIMARY}" width="140" height="50"/>
+ </j:TableCell>
+ </j:TableRow>
+ </j:TBody>
+ </j:SimpleTable>
+ <j:Label text="Resize button to:
'{reizableButton.width}x{reizableButton.height}'"/>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
<j:Card>
- <html:H3 text="Jewel ToggleButton"/>
-
- <j:HGroup gap="3">
- <j:ToggleButton text="Default"
change="tb_lb.text = 'selected? ' + event.target.selected"/>
- <j:Label localId="tb_lb"/>
- </j:HGroup>
- <j:ToggleButton text="Disabled">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:ToggleButton>
- <j:ToggleButton text="Button With More Text"/>
- <j:ToggleButton text="Primary"
emphasis="{StyledUIBase.PRIMARY}"/>
- <j:ToggleButton text="Secondary"
emphasis="{StyledUIBase.SECONDARY}"/>
- <j:ToggleButton text="Emphasized"
emphasis="{StyledUIBase.EMPHASIZED}"/>
- <j:ToggleButton text="Disabled"
emphasis="{StyledUIBase.PRIMARY}">
- <j:beads>
- <j:Disabled/>
- </j:beads>
- </j:ToggleButton>
- <j:ToggleButton>
- <j:icon>
- <js:ToggleFontIcon
text="{MaterialIconType.VISIBILITY}"
selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
- </j:icon>
- <j:beads>
- <j:ToolTip toolTip="show/hide FooterBar"/>
- </j:beads>
- </j:ToggleButton>
- <j:ToggleButton text="Icon and Text"
selectedText="Icon and Text" emphasis="{StyledUIBase.SECONDARY}">
- <j:icon>
- <js:ToggleFontIcon
text="{MaterialIconType.VISIBILITY}"
selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
- </j:icon>
- <j:beads>
- <j:ToolTip toolTip="show/hide FooterBar"/>
- </j:beads>
- </j:ToggleButton>
- <j:HGroup gap="3"
itemsHorizontalAlign="itemsCentered">
- <j:ToggleButton localId="tb_lor"
text="No Print" selectedText="Print">
+ <j:CardHeader>
+ <html:H3 text="Jewel ToggleButton"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:HGroup gap="3">
+ <j:ToggleButton text="Default"
change="tb_lb.text = 'selected? ' + event.target.selected"/>
+ <j:Label localId="tb_lb"/>
+ </j:HGroup>
+ <j:ToggleButton text="Disabled">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:ToggleButton>
+ <j:ToggleButton text="Button With More
Text"/>
+ <j:ToggleButton text="Primary"
emphasis="{StyledUIBase.PRIMARY}"/>
+ <j:ToggleButton text="Secondary"
emphasis="{StyledUIBase.SECONDARY}"/>
+ <j:ToggleButton text="Emphasized"
emphasis="{StyledUIBase.EMPHASIZED}"/>
+ <j:ToggleButton text="Disabled"
emphasis="{StyledUIBase.PRIMARY}">
+ <j:beads>
+ <j:Disabled/>
+ </j:beads>
+ </j:ToggleButton>
+ <j:ToggleButton>
<j:icon>
- <js:ToggleFontIcon
text="{MaterialIconType.PRINT_DISABLED}"
selectedText="{MaterialIconType.PRINT}" material="true"/>
+ <js:ToggleFontIcon
text="{MaterialIconType.VISIBILITY}"
selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
</j:icon>
+ <j:beads>
+ <j:ToolTip
toolTip="show/hide FooterBar"/>
+ </j:beads>
</j:ToggleButton>
- <j:CheckBox selected="true"
text="rightPosition" change="tb_lor.rightPosition = !tb_lor.rightPosition"/>
- </j:HGroup>
+ <j:ToggleButton text="Icon and Text"
selectedText="Icon and Text" emphasis="{StyledUIBase.SECONDARY}">
+ <j:icon>
+ <js:ToggleFontIcon
text="{MaterialIconType.VISIBILITY}"
selectedText="{MaterialIconType.VISIBILITY_OFF}" material="true"/>
+ </j:icon>
+ <j:beads>
+ <j:ToolTip
toolTip="show/hide FooterBar"/>
+ </j:beads>
+ </j:ToggleButton>
+ <j:HGroup gap="3"
itemsHorizontalAlign="itemsCentered">
+ <j:ToggleButton
localId="tb_lor" text="No Print" selectedText="Print">
+ <j:icon>
+
<js:ToggleFontIcon text="{MaterialIconType.PRINT_DISABLED}"
selectedText="{MaterialIconType.PRINT}" material="true"/>
+ </j:icon>
+ </j:ToggleButton>
+ <j:CheckBox selected="true"
text="rightPosition" change="tb_lor.rightPosition = !tb_lor.rightPosition"/>
+ </j:HGroup>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
<j:GridCell desktopNumerator="1" desktopDenominator="2"
tabletNumerator="1" tabletDenominator="2" phoneNumerator="1"
phoneDenominator="1">
<j:Card>
- <html:H3 text="Buttons with Badges"/>
-
- <j:Button text="Badge Top-Right">
- <j:beads>
- <j:Badge text="tr"
emphasis="secondary"/>
- </j:beads>
- </j:Button>
- <j:Button text="Badge Bottom-Right">
- <j:beads>
- <j:Badge text="br"
emphasis="secondary" subindex="true"/>
- </j:beads>
- </j:Button>
- <j:Button text="Badge Top-Left">
- <j:beads>
- <j:Badge text="tl"
emphasis="secondary" preindex="true"/>
- </j:beads>
- </j:Button>
- <j:Button text="Badge Bottom-Left">
- <j:beads>
- <j:Badge text="bl"
emphasis="secondary" subindex="true" preindex="true"/>
- </j:beads>
- </j:Button>
-
- <j:Button text="Badge Top-Right (Overlap)"
emphasis="primary">
- <j:beads>
- <j:Badge text="tr"
emphasis="emphasized" overlap="true"/>
- </j:beads>
- </j:Button>
- <j:Button text="Badge Bottom-Right (Overlap)"
emphasis="primary">
- <j:beads>
- <j:Badge text="br"
emphasis="emphasized" subindex="true" overlap="true"/>
- </j:beads>
- </j:Button>
- <j:Button text="Badge Top-Left (Overlap)"
emphasis="primary">
- <j:beads>
- <j:Badge text="tl"
emphasis="emphasized" preindex="true" overlap="true"/>
- </j:beads>
- </j:Button>
- <j:Button text="Badge Bottom-Left (Overlap)"
emphasis="primary">
- <j:beads>
- <j:Badge text="bl"
emphasis="emphasized" subindex="true" preindex="true" overlap="true"/>
- </j:beads>
- </j:Button>
+ <j:CardHeader>
+ <html:H3 text="Buttons with Badges"
className="primary-normal"/>
+ </j:CardHeader>
+ <j:CardPrimaryContent>
+ <j:Button text="Badge Top-Right">
+ <j:beads>
+ <j:Badge text="tr"
emphasis="secondary"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Right">
+ <j:beads>
+ <j:Badge text="br"
emphasis="secondary" subindex="true"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="Badge Top-Left">
+ <j:beads>
+ <j:Badge text="tl"
emphasis="secondary" preindex="true"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Left">
+ <j:beads>
+ <j:Badge text="bl"
emphasis="secondary" subindex="true" preindex="true"/>
+ </j:beads>
+ </j:Button>
+
+ <j:Button text="Badge Top-Right
(Overlap)" emphasis="primary">
+ <j:beads>
+ <j:Badge text="tr"
emphasis="emphasized" overlap="true"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Right
(Overlap)" emphasis="primary">
+ <j:beads>
+ <j:Badge text="br"
emphasis="emphasized" subindex="true" overlap="true"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="Badge Top-Left
(Overlap)" emphasis="primary">
+ <j:beads>
+ <j:Badge text="tl"
emphasis="emphasized" preindex="true" overlap="true"/>
+ </j:beads>
+ </j:Button>
+ <j:Button text="Badge Bottom-Left
(Overlap)" emphasis="primary">
+ <j:beads>
+ <j:Badge text="bl"
emphasis="emphasized" subindex="true" preindex="true" overlap="true"/>
+ </j:beads>
+ </j:Button>
+ </j:CardPrimaryContent>
</j:Card>
</j:GridCell>
</j:Grid>
