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 gwt.material.design.client.base.MaterialWidget; 024import gwt.material.design.client.constants.CssName; 025 026//@formatter:off 027 028/** 029 * MaterialColumn is a panel that act as a fluid panel to easily sets your desired column. 030 * We are using 12 grid layout with screens small, medium and large. 031 * Just set grid='s12 m12 l12' to define your grid layout values. 032 * <p> 033 * <p> 034 * <h4>UiBinder Usage:</h4> 035 * <pre> 036 * {@code 037 * <m:MaterialColumn grid='s12 m6 l4'/> 038 * Small Device - 12 grid 039 * Medium Device - 6 grid 040 * Large Device - 4 grid 041 * } 042 * </pre> 043 * 044 * @author kevzlou7979 045 * @author Ben Dol 046 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#grid">Material Column</a> 047 * @see <a href="https://material.io/guidelines/components/grid-lists.html">Material Design Specification</a> 048 */ 049//@formatter:on 050public class MaterialColumn extends MaterialWidget { 051 052 public MaterialColumn() { 053 super(Document.get().createDivElement(), CssName.COL); 054 } 055 056 public MaterialColumn(int small, int medium, int large) { 057 this(); 058 setGrid("s" + small + " m" + medium + " l" + large); 059 } 060}