001/* 002 * #%L 003 * GwtMaterial 004 * %% 005 * Copyright (C) 2015 - 2017 GwtMaterialDesign 006 * %% 007 * Licensed under the Apache License, Version 2.0 (the "License"); 008 * you may not use this file except in compliance with the License. 009 * You may obtain a copy of the License at 010 * 011 * http://www.apache.org/licenses/LICENSE-2.0 012 * 013 * Unless required by applicable law or agreed to in writing, software 014 * distributed under the License is distributed on an "AS IS" BASIS, 015 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 016 * See the License for the specific language governing permissions and 017 * limitations under the License. 018 * #L% 019 */ 020package gwt.material.design.client.ui; 021 022import com.google.gwt.dom.client.Document; 023import com.google.gwt.dom.client.Element; 024import gwt.material.design.client.base.AbstractIconButton; 025import gwt.material.design.client.constants.ButtonType; 026import gwt.material.design.client.constants.Color; 027import gwt.material.design.client.constants.IconType; 028 029//@formatter:off 030 031/** 032 * There are 3 main button types described in material design. The raised 033 * button is a standard button that signify actions and seek to give depth 034 * to a mostly flat page. The floating circular action button is meant for 035 * very important functions. Flat buttons are usually used within elements 036 * that already have depth like cards or modals. 037 * <h3>UiBinder Usage:</h3> 038 * <pre> 039 * {@code 040 * //Raised (Default) Button 041 * <m:MaterialButton text="Button" waves="LIGHT" backgroundColor="BLUE" /> 042 * 043 * // Adding icon 044 * <m:MaterialButton text="Button" waves="LIGHT" backgroundColor="BLUE" iconType="CLOUD" iconPosition="LEFT"/> 045 * 046 * // FLOATING Button 047 * <m:MaterialButton type="FLOATING" waves="LIGHT" size="LARGE" iconType="ADD"/> 048 * 049 * // FLAT Button 050 * <m:MaterialButton text="Button" type="FLAT" waves="GREY" /> 051 * 052 * // LARGE Button 053 * <m:MaterialButton size="LARGE" text="Button" waves="LIGHT" backgroundColor="BLUE" iconType="CLOUD" iconPosition="RIGHT"/>} 054 * </pre> 055 * 056 * @author kevzlou7979 057 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#buttons">Material Button</a> 058 * @see <a href="https://material.io/guidelines/components/buttons.html">Material Design Specification</a> 059 */ 060//@formatter:on 061public class MaterialButton extends AbstractIconButton { 062 063 public MaterialButton() { 064 super(ButtonType.RAISED); 065 } 066 067 public MaterialButton(String text) { 068 this(); 069 setText(text); 070 } 071 072 public MaterialButton(String text, IconType icon) { 073 this(text); 074 setIconType(icon); 075 } 076 077 public MaterialButton(ButtonType type) { 078 super(type); 079 } 080 081 public MaterialButton(String text, IconType icon, ButtonType type) { 082 this(text, icon); 083 setType(type); 084 } 085 086 public MaterialButton(String text, ButtonType type, MaterialIcon icon) { 087 super(type, text, icon); 088 } 089 090 public MaterialButton(String text, IconType icon, ButtonType type, Color bgColor, Color textColor) { 091 this(text, icon, type); 092 setBackgroundColor(bgColor); 093 setTextColor(textColor); 094 } 095 096 @Override 097 protected Element createElement() { 098 return Document.get().createPushButtonElement(); 099 } 100}