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 1 commit
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
317 changes: 206 additions & 111 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
@@ -1,124 +1,219 @@
<!--
#%L
GwtMaterial
%%
Copyright (C) 2015 - 2016 GwtMaterialDesign
%%
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
#L%
-->
<!-- #%L GwtMaterial %% Copyright (C) 2015 - 2016 GwtMaterialDesign %% Licensed
under the Apache License, Version 2.0 (the "License"); you may not use this
file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Revert this change

applicable law or agreed to in writing, software distributed under the License
is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. #L% -->
<!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" />

<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>