Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improved code example align for FAB element. #19

Open
wants to merge 2 commits into
base: release_1.6.0
Choose a base branch
from
Open

Improved code example align for FAB element. #19

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3cb30b
Improved code example align for FAB element.
Jun 16, 2016
0645477
Correct Licence Indent on FABView.ui.xml
Jul 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
292 changes: 200 additions & 92 deletions src/main/java/gwt/material/design/demo/client/application/components/fabs/FABView.ui.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,106 +19,214 @@
-->
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:m="urn:import:gwt.material.design.client.ui"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:demo="urn:import:gwt.material.design.demo.client.ui">
<ui:style>
xmlns:m="urn:import:gwt.material.design.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:demo="urn:import:gwt.material.design.demo.client.ui">
<ui:style>

</ui:style>
<g:HTMLPanel>
<m:MaterialTitle title="Fixed Action Button"
description="If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page." />
<m:MaterialFAB depth="995">
<m:MaterialButton type="FLOATING" backgroundColor="blue"
iconType="POLYMER" size="LARGE" />
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="green" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="red" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="orange" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
</m:MaterialFABList>
</m:MaterialFAB>

</ui:style>
<g:HTMLPanel>
<m:MaterialTitle title="Fixed Action Button" description="If you want a fixed floating action button, you can add multiple actions that will appear on hover. Our demo is in the bottom righthand corner of the page."/>
<m:MaterialFAB depth="995">
<m:MaterialButton type="FLOATING" backgroundColor="blue" iconType="POLYMER" size="LARGE"/>
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="green" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="red" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="orange" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
</m:MaterialFABList>
</m:MaterialFAB>
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
&emsp;&lt;m:MaterialFAB>
<br />
&emsp;&lt;m:MaterialAnchorButton type="FLOATING"
backgroundColor="blue" iconType="POLYMER" size="LARGE"/>
<br />
&emsp;&lt;m:MaterialFABList>
<br />
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT"
backgroundColor="blue" iconType="POLYMER"/>
<br />
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT"
backgroundColor="green" iconType="POLYMER"/>
<br />
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT"
backgroundColor="red" iconType="POLYMER"/>
<br />
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT"
backgroundColor="orange" iconType="POLYMER"/>
<br />
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT"
backgroundColor="blue" iconType="POLYMER"/>
<br />
&emsp;&lt;/m:MaterialFABList>
<br />
&lt;/m:MaterialFAB>
<br />
</demo:PrettyPre>

<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
&emsp;&lt;m:MaterialFAB><br/>
&emsp;&lt;m:MaterialAnchorButton type="FLOATING" backgroundColor="blue" iconType="POLYMER" size="LARGE"/><br/>
&emsp;&lt;m:MaterialFABList><br/>
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/><br/>
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="green" iconType="POLYMER"/><br/>
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="red" iconType="POLYMER"/><br/>
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="orange" iconType="POLYMER"/><br/>
&emsp;&emsp;&lt;m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/><br/>
&emsp;&lt;/m:MaterialFABList><br/>
&lt;/m:MaterialFAB><br/>
</demo:PrettyPre>
<m:MaterialTitle title="Open / Close FAB"
description="You can also open the Fixed Action Button Menu programatically." />
<m:MaterialButton text="Open" ui:field="btnOpen"
backgroundColor="blue" />
<m:MaterialButton text="Close" ui:field="btnClose"
backgroundColor="white" textColor="black" />
<m:MaterialRow>
<m:MaterialColumn grid="l6 m6 s12" layoutPosition="RELATIVE"
height="80px">
<m:MaterialFAB ui:field="fab" axis="HORIZONTAL" depth="995"
layoutPosition="ABSOLUTE" right="0">
<m:MaterialButton type="FLOATING" backgroundColor="blue"
iconType="POLYMER" size="LARGE" />
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="green" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="red" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="orange" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
</m:MaterialFABList>
</m:MaterialFAB>
</m:MaterialColumn>
</m:MaterialRow>

<m:MaterialTitle title="Open / Close FAB" description="You can also open the Fixed Action Button Menu programatically."/>
<m:MaterialButton text="Open" ui:field="btnOpen" backgroundColor="blue" />
<m:MaterialButton text="Close" ui:field="btnClose" backgroundColor="white" textColor="black"/>
<m:MaterialRow>
<m:MaterialColumn grid="l6 m6 s12" layoutPosition="RELATIVE" height="80px">
<m:MaterialFAB ui:field="fab" axis="HORIZONTAL" depth="995" layoutPosition="ABSOLUTE" right="0">
<m:MaterialButton type="FLOATING" backgroundColor="blue" iconType="POLYMER" size="LARGE"/>
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="green" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="red" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="orange" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
</m:MaterialFABList>
</m:MaterialFAB>
</m:MaterialColumn>
</m:MaterialRow>
<demo:PrettyPre>
&emsp;@UiField MaterialFAB fab;
<br />
<br />

<demo:PrettyPre>
&emsp;@UiField MaterialFAB fab;<br/><br/>
fab.openFAB();
<br />
fab.closeFAB();
<br />
</demo:PrettyPre>

fab.openFAB();<br/>
fab.closeFAB();<br/>
</demo:PrettyPre>
<m:MaterialTitle title="FAB Type : Horizontal"
description="Creating a horizontal FAB is easy! Just add axis='HORIZONTAL'." />
<m:MaterialRow>
<m:MaterialColumn grid="l6 m6 s12" layoutPosition="RELATIVE"
height="80px">
<m:MaterialFAB axis="HORIZONTAL" depth="995"
layoutPosition="ABSOLUTE" right="0">
<m:MaterialButton type="FLOATING" backgroundColor="blue"
iconType="POLYMER" size="LARGE" />
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="green" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="red" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="orange" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
</m:MaterialFABList>
</m:MaterialFAB>
</m:MaterialColumn>
</m:MaterialRow>

<m:MaterialTitle title="FAB Type : Horizontal" description="Creating a horizontal FAB is easy! Just add axis='HORIZONTAL'."/>
<m:MaterialRow>
<m:MaterialColumn grid="l6 m6 s12" layoutPosition="RELATIVE" height="80px">
<m:MaterialFAB axis="HORIZONTAL" depth="995" layoutPosition="ABSOLUTE" right="0">
<m:MaterialButton type="FLOATING" backgroundColor="blue" iconType="POLYMER" size="LARGE"/>
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="green" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="red" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="orange" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
</m:MaterialFABList>
</m:MaterialFAB>
</m:MaterialColumn>
</m:MaterialRow>
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
&emsp;&lt;m:MaterialFAB axis="HORIZONTAL">
<br />
&emsp;&lt;-- Content here -->
<br />
&lt;/m:MaterialFAB>
<br />
</demo:PrettyPre>

<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
&emsp;&lt;m:MaterialFAB axis="HORIZONTAL"><br/>
&emsp;&lt;-- Content here --><br/>
&lt;/m:MaterialFAB><br/>
</demo:PrettyPre>
<m:MaterialTitle title="FAB Type : Click Only"
description="If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), Just add type='CLICK_ONLY' " />
<m:MaterialRow>
<m:MaterialColumn grid="l6 m6 s12" layoutPosition="RELATIVE"
height="80px">
<m:MaterialFAB type="CLICK_ONLY" axis="HORIZONTAL"
depth="995" layoutPosition="ABSOLUTE" right="0">
<m:MaterialButton type="FLOATING" backgroundColor="blue"
iconType="POLYMER" size="LARGE" />
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="green" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="red" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="orange" iconType="POLYMER" />
<m:MaterialAnchorButton type="FLOATING"
waves="LIGHT" backgroundColor="blue" iconType="POLYMER" />
</m:MaterialFABList>
</m:MaterialFAB>
</m:MaterialColumn>
</m:MaterialRow>

<m:MaterialTitle title="FAB Type : Click Only" description="If you want to disable the hover behaviour, and instead toggle the FAB menu when the user clicks on the large button (works great on mobile!), Just add type='CLICK_ONLY' "/>
<m:MaterialRow>
<m:MaterialColumn grid="l6 m6 s12" layoutPosition="RELATIVE" height="80px">
<m:MaterialFAB type="CLICK_ONLY" axis="HORIZONTAL" depth="995" layoutPosition="ABSOLUTE" right="0">
<m:MaterialButton type="FLOATING" backgroundColor="blue" iconType="POLYMER" size="LARGE"/>
<m:MaterialFABList>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="green" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="red" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="orange" iconType="POLYMER"/>
<m:MaterialAnchorButton type="FLOATING" waves="LIGHT" backgroundColor="blue" iconType="POLYMER"/>
</m:MaterialFABList>
</m:MaterialFAB>
</m:MaterialColumn>
</m:MaterialRow>
<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
&emsp;&lt;m:MaterialFAB type="CLICK_ONLY">
<br />
&emsp;&lt;-- Content here -->
<br />
&lt;/m:MaterialFAB>
<br />
</demo:PrettyPre>

<demo:PrettyPre addStyleNames="lang-xml z-depth-1">
&emsp;&lt;m:MaterialFAB type="CLICK_ONLY"><br/>
&emsp;&lt;-- Content here --><br/>
&lt;/m:MaterialFAB><br/>
</demo:PrettyPre>

</g:HTMLPanel>
<m:MaterialTitle title="FAB view- Java code example"
description="If you want to create fab view using only java."
/>

<demo:PrettyPre addStyleNames="lang-java z-depth-1">
public class Fab extends Composite {<br />
public Fab() {<br />
MaterialFAB fab = new MaterialFAB();<br /><br />

// initial/first/always visible button to be always displayed<br />
MaterialButton btnInitial = new MaterialButton();<br />
btnInitial.setIconType(IconType.ADD);<br />
btnInitial.setType(ButtonType.FLOATING);<br />
btnInitial.setSize(ButtonSize.LARGE);<br />
btnInitial.setBackgroundColor("red");<br />
fab.add(btnInitial);<br /><br />

// List of FAB buttons that will be hiden.<br />
// This FAB buttons will show up when User hover on initial button <br />
MaterialFABList fabList = new MaterialFABList();<br /><br />

// Item 1<br />
MaterialButton btnItem1 = new MaterialButton();<br />
btnItem1.setType(ButtonType.FLOATING);<br />
btnItem1.setIconType(IconType.ACCESS_ALARMS);<br />
btnItem1.setBackgroundColor("blue");<br />
fabList.add(btnItem1);<br /><br />

// Item 2<br />
MaterialButton btnItem2 = new MaterialButton();<br />
btnItem2.setType(ButtonType.FLOATING);<br />
btnItem2.setIconType(IconType.AC_UNIT);<br />
btnItem2.setBackgroundColor("purple");<br />
fabList.add(btnItem2);<br />
fab.add(fabList);<br />
initWidget(fab);<br />
}<br />
}<br />
</demo:PrettyPre>

<br />
And then in Your view use just:<br />
<demo:PrettyPre addStyleNames="lang-java z-depth-1">
yoursViewThatYouWouldLikeToAddFab.add(new Fab());
</demo:PrettyPre>

</g:HTMLPanel>
</ui:UiBinder>