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.HasAxis;
024import gwt.material.design.client.base.MaterialWidget;
025import gwt.material.design.client.base.mixin.CssNameMixin;
026import gwt.material.design.client.constants.Axis;
027import gwt.material.design.client.constants.CssName;
028import gwt.material.design.client.constants.Orientation;
029
030//@formatter:off
031
032/**
033 * Cards are a convenient means of displaying content composed of different types
034 * of objects. They’re also well-suited for presenting similar objects whose size
035 * or supported actions can vary considerably, like photos with captions of variable
036 * length.
037 * <h3>UiBinder Usage:</h3>
038 * <pre>
039 * {@code <!-- Basic Card -->
040 * <m:MaterialCard backgroundColor="BLUE_GREY_DARKEN_1" grid="l3">
041 *   <m:MaterialCardContent textColor="WHITE">
042 *     <m:MaterialCardTitle text="Sample" iconType="POLYMER" iconPosition="RIGHT"/>
043 *     <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." />
044 *   </m:MaterialCardContent>
045 *   <m:MaterialCardAction>
046 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
047 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
048 *   </m:MaterialCardAction>
049 * </m:MaterialCard>
050 *
051 * <!-- Image Card -->
052 * <m:MaterialCard backgroundColor="WHITE" grid="l3">
053 *   <m:MaterialCardImage waves="LIGHT">
054 *     <m:MaterialImage url="http://assets.materialup.com/uploads/ac9bf2ac-bf1c-4dc0-b655-0e13bf523bc8/20150710-__.png"/>
055 *     <m:MaterialCardTitle text="Sample" iconPosition="RIGHT"/>
056 *   </m:MaterialCardImage>
057 *
058 *   <m:MaterialCardContent textColor="BLACK">
059 *     <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." />
060 *   </m:MaterialCardContent>
061 *
062 *   <m:MaterialCardAction>
063 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
064 *     <m:MaterialLink text="Link 1" iconType="POLYMER" iconPosition="LEFT"/>
065 *   </m:MaterialCardAction>
066 * </m:MaterialCard>
067 *
068 * <!-- Reveal Card -->
069 * <m:MaterialCard backgroundColor="WHITE" grid="l3">
070 *   <m:MaterialCardImage waves="LIGHT">
071 *     <m:MaterialImage url="http://assets.materialup.com/uploads/b6992fb2-7bf4-401d-a233-e34a486b9337/gif.gif"/>
072 *   </m:MaterialCardImage>
073 *
074 *   <m:MaterialCardContent textColor="BLACK">
075 *     <m:MaterialCardTitle text="Sample" iconType="MORE_VERT" iconPosition="RIGHT" textColor="BLACK"/>
076 *   </m:MaterialCardContent>
077 *
078 *   <m:MaterialCardReveal>
079 *     <m:MaterialCardTitle text="Sample" iconType="CLOSE" iconPosition="RIGHT" textColor="BLACK"/>
080 *     <m:MaterialLabel text="Here is some more information about this product that is only revealed once clicked on." />
081 *   </m:MaterialCardReveal>
082 *
083 *   <m:MaterialCardAction>
084 *     <m:MaterialLink text="Link 1" textColor="BLUE" iconType="POLYMER" iconPosition="LEFT"/>
085 *     <m:MaterialLink text="Link 1" textColor="BLUE" iconType="POLYMER" iconPosition="LEFT"/>
086 *   </m:MaterialCardAction>
087 * </m:MaterialCard>}
088 * </pre>
089 *
090 * @author kevzlou7979
091 * @author Ben Dol
092 * @see <a href="http://gwtmaterialdesign.github.io/gwt-material-demo/#cards">Material Cards</a>
093 * @see <a href="https://material.io/guidelines/components/cards.html">Material Design Specification</a>
094 */
095//@formatter:on
096public class MaterialCard extends MaterialWidget implements HasAxis {
097
098    private CssNameMixin<MaterialCard, Axis> axisMixin;
099
100    /**
101     * Creates an empty card.
102     */
103    public MaterialCard() {
104        super(Document.get().createDivElement(), CssName.CARD);
105    }
106
107    @Override
108    public void setGrid(String grid) {
109        super.setGrid(grid);
110        addStyleName(CssName.NO_PADDING);
111    }
112
113    /**
114     * Replace by {@link MaterialWidget#setOrientation(Orientation)}
115     * @param axis
116     */
117    @Deprecated
118    @Override
119    public void setAxis(Axis axis) {
120        getAxisMixin().setCssName(axis);
121    }
122
123    /**
124     * Replace by {@link MaterialWidget#getOrientation()}
125     */
126    @Deprecated
127    @Override
128    public Axis getAxis() {
129        return getAxisMixin().getCssName();
130    }
131
132    protected CssNameMixin<MaterialCard, Axis> getAxisMixin() {
133        if (axisMixin == null) {
134            axisMixin = new CssNameMixin<>(this);
135        }
136        return axisMixin;
137    }
138}