You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@royale.apache.org by ca...@apache.org on 2020/02/24 23:10:48 UTC
[royale-asjs] branch develop updated: tour-de-jewel: button play
ground with more examples
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 <ca...@apache.org>
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>