Buttons

Variations on Material Design buttons.

Colored fab

Colored FAB

With ripple

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createFab;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonFabColor.COLORED;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.HAS_RIPPLE;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.google.gwt.core.client.EntryPoint;

/** Colored Fab buttons demo. */
public class ColoredFabDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    // the icon inside the buttons
    final String ico = "add";

    // colored fab button with an add icon
    get("ctnr_01").add(createFab(COLORED, NONE, ico));

    // colored fab button with an add icon and ripple
    get("ctnr_02").add(createFab(COLORED, HAS_RIPPLE, ico));
  }
}

Plain fab

Plain FAB

With ripple

Disabled

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createFab;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonFabColor.FAB_NO_COLOR;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.HAS_RIPPLE;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.github.ilyes4j.gwt.mdl.components.buttons.Button;
import com.google.gwt.core.client.EntryPoint;

/** Plain Fab buttons demo. */
public class PlainFabDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    // the icon inside the buttons
    final String ico = "add";

    // Plain fab button with an add icon
    get("ctnr_03").add(createFab(FAB_NO_COLOR, NONE, ico));

    // Plain fab button with an add icon and ripple
    get("ctnr_04").add(createFab(FAB_NO_COLOR, HAS_RIPPLE, ico));

    // Disabled fab button with an add icon
    Button btnFab = createFab(FAB_NO_COLOR, NONE, ico);
    btnFab.setEnabled(false);
    get("ctnr_05").add(btnFab);
  }
}

Raised

Raised Button

With ripple

Disabled

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createRaised;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.BTN_NO_COLOR;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.HAS_RIPPLE;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.github.ilyes4j.gwt.mdl.components.buttons.Button;
import com.google.gwt.core.client.EntryPoint;

/** Raised buttons demo. */
public class RaisedButtonDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    final String txt = "Button";

    // create a plain raised button
    get("ctnr_06").add(createRaised(BTN_NO_COLOR, NONE, txt));

    // create a plain raised button with ripple
    get("ctnr_07").add(createRaised(BTN_NO_COLOR, HAS_RIPPLE, txt));

    // create a plain raised disabled button
    Button btnRaised = createRaised(BTN_NO_COLOR, NONE, txt);
    btnRaised.setEnabled(false);
    get("ctnr_08").add(btnRaised);
  }
}

Raised Colored

Colored button

Accent colored

With ripple

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createRaised;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.ACCENT;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.PRIMARY;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.HAS_RIPPLE;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.google.gwt.core.client.EntryPoint;

/** Raised colored buttons demo. */
public class RaisedColoredDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    // the text inside the buttons
    final String txt = "Button";

    // create a colored button with a ripple
    get("ctnr_09").add(createRaised(PRIMARY, NONE, txt));

    // create an accent colored button
    get("ctnr_10").add(createRaised(ACCENT, NONE, txt));

    // create an accent colored button with a ripple
    get("ctnr_11").add(createRaised(ACCENT, HAS_RIPPLE, txt));
  }
}

Flat

Flat button

With ripple

Disabled

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createFlat;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.BTN_NO_COLOR;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.HAS_RIPPLE;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.github.ilyes4j.gwt.mdl.components.buttons.Button;
import com.google.gwt.core.client.EntryPoint;

/** Flat buttons demo. */
public class FlatButtonDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    // the text inside the buttons
    final String txt = "Button";

    // create a flat button
    get("ctnr_12").add(createFlat(BTN_NO_COLOR, NONE, txt));

    // create a flat button with a ripple
    get("ctnr_13").add(createFlat(BTN_NO_COLOR, HAS_RIPPLE, txt));

    // create disabled flat button
    Button btnFlat = createFlat(BTN_NO_COLOR, NONE, txt);
    btnFlat.setEnabled(false);
    get("ctnr_14").add(btnFlat);
  }
}

Flat colored

Primary colored flat

Accent colored

With ripple

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createFlat;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.ACCENT;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.PRIMARY;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.HAS_RIPPLE;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.google.gwt.core.client.EntryPoint;

/** Flat colored buttons demo. */
public class FlatColoredDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    // the text inside the buttons
    final String txt = "Button";

    // create a primary colored flat button
    get("ctnr_15").add(createFlat(PRIMARY, NONE, txt));

    // create an accent colored flat button
    get("ctnr_16").add(createFlat(ACCENT, NONE, txt));

    // create an accent colored flat button with a ripple
    get("ctnr_17").add(createFlat(ACCENT, HAS_RIPPLE, txt));
  }
}

Icon

Icon button

Colored

Accent

With ripple

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createIcon;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.ACCENT;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.BTN_NO_COLOR;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonColor.PRIMARY;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.HAS_RIPPLE;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.google.gwt.core.client.EntryPoint;

/** Icon buttons demo. */
public class IconButtonDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    // the icon inside the buttons
    final String ico = "mood";

    // create an icon button
    get("ctnr_18").add(createIcon(BTN_NO_COLOR, NONE, ico));

    // create a colored icon button
    get("ctnr_19").add(createIcon(PRIMARY, NONE, ico));

    // create an accent colored icon button
    get("ctnr_20").add(createIcon(ACCENT, NONE, ico));

    // create an accent colored icon button with ripple
    get("ctnr_21").add(createIcon(ACCENT, HAS_RIPPLE, ico));
  }
}

Mini fab

Mini FAB

Colored

package com.github.ilyes4j.gwt.mdl.demo.modules.buttons;

import static com.github.ilyes4j.gwt.mdl.components.buttons.Button.createMiniFab;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonFabColor.COLORED;
import static com.github.ilyes4j.gwt.mdl.components.buttons.ButtonFabColor.FAB_NO_COLOR;
import static com.github.ilyes4j.gwt.mdl.components.ripples.Ripple.NONE;
import static com.google.gwt.user.client.ui.RootPanel.get;

import com.google.gwt.core.client.EntryPoint;

/** Mini Fab buttons demo. */
public class MiniFabDemo implements EntryPoint {

  /** When the page loads add the buttons. */
  public final void onModuleLoad() {

    // the icon inside the buttons
    final String ico = "add";

    // create a mini fab
    get("ctnr_22").add(createMiniFab(FAB_NO_COLOR, NONE, ico));

    // create a colored mini fab
    get("ctnr_23").add(createMiniFab(COLORED, NONE, ico));
  }
}