001package gwt.material.design.client.ui;
002
003/*
004 * #%L
005 * GwtMaterial
006 * %%
007 * Copyright (C) 2015 GwtMaterialDesign
008 * %%
009 * Licensed under the Apache License, Version 2.0 (the "License");
010 * you may not use this file except in compliance with the License.
011 * You may obtain a copy of the License at
012 * 
013 *      http://www.apache.org/licenses/LICENSE-2.0
014 * 
015 * Unless required by applicable law or agreed to in writing, software
016 * distributed under the License is distributed on an "AS IS" BASIS,
017 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
018 * See the License for the specific language governing permissions and
019 * limitations under the License.
020 * #L%
021 */
022
023import com.google.gwt.dom.client.Document;
024import gwt.material.design.client.base.HasAxis;
025import gwt.material.design.client.base.HasOrientation;
026import gwt.material.design.client.base.MaterialWidget;
027import gwt.material.design.client.base.mixin.CssNameMixin;
028import gwt.material.design.client.constants.Axis;
029import gwt.material.design.client.constants.Orientation;
030
031//@formatter:off
032
033/**
034 * Cards are a convenient means of displaying content composed of different types
035 * of objects. They’re also well-suited for presenting similar objects whose size
036 * or supported actions can vary considerably, like photos with captions of variable
037 * length.
038 * <h3>UiBinder Usage:</h3>
039 * <pre>
040 *{@code<!-- Basic Card -->
041 * <m:MaterialCard backgroundColor="blue-grey darken-1" grid="l3">
042 *   <m:MaterialCardContent textColor="white">
043 *     <m:MaterialCardTitle text="Sample" iconType="POLYMER" iconPosition="RIGHT"/>
044 *     <m:MaterialLabel text="I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively." />
045 *   </m:MaterialCardContent>
046 *   <m:MaterialCardAction>
047 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
048 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
049 *   </m:MaterialCardAction>
050 * </m:MaterialCard>
051 *
052 * <!-- Image Card -->
053 * <m:MaterialCard backgroundColor="white" grid="l3">
054 *   <m:MaterialCardImage waves="LIGHT">
055 *     <m:MaterialImage url="http://assets.materialup.com/uploads/ac9bf2ac-bf1c-4dc0-b655-0e13bf523bc8/20150710-__.png"/>
056 *     <m:MaterialCardTitle text="Sample" iconPosition="RIGHT"/>
057 *   </m:MaterialCardImage>
058 *
059 *   <m:MaterialCardContent textColor="black">
060 *     <m:MaterialLabel text="I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively." />
061 *   </m:MaterialCardContent>
062 *
063 *   <m:MaterialCardAction>
064 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
065 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
066 *   </m:MaterialCardAction>
067 * </m:MaterialCard>
068 *
069 * <!-- Reveal Card -->
070 * <m:MaterialCard backgroundColor="white" grid="l3">
071 *   <m:MaterialCardImage waves="LIGHT">
072 *     <m:MaterialImage url="http://assets.materialup.com/uploads/b6992fb2-7bf4-401d-a233-e34a486b9337/gif.gif"/>
073 *   </m:MaterialCardImage>
074 *
075 *   <m:MaterialCardContent textColor="black">
076 *     <m:MaterialCardTitle text="Sample" iconType="MORE_VERT" iconPosition="RIGHT" textColor="black"/>
077 *   </m:MaterialCardContent>
078 *
079 *   <m:MaterialCardReveal>
080 *     <m:MaterialCardTitle text="Sample" iconType="CLOSE" iconPosition="RIGHT" textColor="black"/>
081 *     <m:MaterialLabel text="Here is some more information about this product that is only revealed once clicked on." />
082 *   </m:MaterialCardReveal>
083 *
084 *   <m:MaterialCardAction>
085 *     <m:MaterialLink text="Link 1" textColor="blue" iconType="POLYMER" iconPosition="LEFT"/>
086 *     <m:MaterialLink text="Link 1" textColor="blue" iconType="POLYMER" iconPosition="LEFT"/>
087 *   </m:MaterialCardAction>
088 * </m:MaterialCard>}
089 * </pre>
090 *
091 * @author kevzlou7979
092 * @author Ben Dol
093 * @see <a href="http://gwt-material-demo.herokuapp.com/#cards">Material Cards</a>
094 */
095//@formatter:on
096public class MaterialCard extends MaterialWidget implements HasAxis {
097
098    private final CssNameMixin<MaterialCard, Axis> axisMixin = new CssNameMixin<>(this);
099
100    /**
101     * Creates and empty card.
102     */
103    public MaterialCard() {
104        super(Document.get().createDivElement(), "card");
105    }
106
107    @Override
108    public void setGrid(String grid) {
109        super.setGrid(grid);
110        addStyleName("no-padding");
111    }
112
113    @Override
114    public void setAxis(Axis axis) {
115        axisMixin.setCssName(axis);
116    }
117
118    @Override
119    public Axis getAxis() {
120        return axisMixin.getCssName();
121    }
122}