• Home
• com.vaadin.polymer
• vaadin-gwt-polymer-elements
• 1.9.3.1
• source code
• AppGridElement.java

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

com.vaadin.polymer.app.AppGridElement Maven / Gradle / Ivy

/*
 * This code was generated with Vaadin Web Component GWT API Generator, 
 * from app-layout project by The Polymer Authors
 * that is licensed with https://polymer.github.io/LICENSE.txt license.
 */
package com.vaadin.polymer.app;

import com.vaadin.polymer.elemental.*;
import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JsArray;
import jsinterop.annotations.JsOverlay;
import jsinterop.annotations.JsProperty;
import jsinterop.annotations.JsType;

/**
 * 
app-grid is a helper class useful for creating responsive, fluid grid layouts using custom properties.
Because custom properties can be defined inside a @media rule, you can customize the grid layout
for different responsive breakpoints.
 * 
Example:
 * 
Import app-grid-style.html and include app-grid-style in the style of an element’s definition.
Then, add the class app-grid to a container such as ul or div:
 * 
<template>
 *   <style include="app-grid-style">
 *     :host {
 *       --app-grid-columns: 3;
 *       --app-grid-item-height: 100px;
 *     }
 * 
 *     ul {
 *       padding: 0;
 *       list-style: none;
 *     }
 * 
 *     .item {
 *       background-color: white;
 *     }
 *   </style>
 *   <ul class="app-grid">
 *     <li class="item">1</li>
 *     <li class="item">2</li>
 *     <li class="item">3</li>
 *   </ul>
 * </template>
 * 
 * 
In the example above, the grid  will take 3 columns per row.
 * 
Expandible items
 * 
In many cases, it’s useful to expand an item more than 1 column. To achieve this type of layout,
you can specify the number of columns the item should expand to by setting the custom property
--app-grid-expandible-item-columns. To indicate which item should expand, apply the mixin
--app-grid-expandible-item to a rule with a selector to the item. For example:
 * 

 * <template>
 *   <style include="app-grid-style">
 *     :host {
 *       --app-grid-columns: 3;
 *       --app-grid-item-height: 100px;
 *       --app-grid-expandible-item-columns: 3;
 *     }
 * 
 *     /* Only the first item should expand * /
 *     .item:first-child {
 *       @apply(--app-grid-expandible-item);
 *     }
 *   </style>
 * </template>
 * 
 * 
 * 
Preserving the aspect ratio
 * 
When the size of a grid item should preserve the aspect ratio, you can add the has-aspect-ratio
attribute to the element with the class .app-grid. Now, every item element becomes a wrapper around
the item content. For example:
 * 
<template>
 *   <style include="app-grid-style">
 *     :host {
 *       --app-grid-columns: 3;
 *       /* 50% the width of the item is equivalent to 2:1 aspect ratio* /
 *       --app-grid-item-height: 50%;
 *     }
 * 
 *     .item {
 *       background-color: white;
 *     }
 *   </style>
 *   <ul class="app-grid" has-aspect-ratio>
 *     <li class="item">
 *       <div>item 1</div>
 *     </li>
 *     <li class="item">
 *       <div>item 2</div>
 *     </li>
 *     <li class="item">
 *       <div>item 3</div>
 *     </li>
 *   </ul>
 * </template>
 * 
 * 
Styling
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
Custom property
Description
Default
--app-grid-columns
The number of columns per row.
1
--app-grid-gutter
The space between two items.
0px
--app-grid-item-height
The height of the items.
auto
--app-grid-expandible-item-columns
The number of columns an expandible item should expand to.
1
 */
@JsType(isNative=true)
public interface AppGridElement extends HTMLElement {

    @JsOverlay public static final String TAG = "app-grid";
    @JsOverlay public static final String SRC = "app-layout/app-layout.html";



}