GwtMaterialDesign/gwt-material-patterns
A pattern layouts to build gwt-material applications rapidly http://gwtmaterialdesign.github.io/gwt-material-patterns/
Download
Step 1. Add the JitPack repository to your build file
Add it in your root settings.gradle at the end of repositories:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { url 'https://jitpack.io' }
}
}Add it in your settings.gradle.kts at the end of repositories:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { url = uri("https://jitpack.io") }
}
}Add to pom.xml
<repositories>
<repository>
<id>jitpack.io</id>
<url>https://jitpack.io</url>
</repository>
</repositories>Add it in your build.sbt at the end of resolvers:
resolvers += "jitpack" at "https://jitpack.io"
Add it in your project.clj at the end of repositories:
:repositories [["jitpack" "https://jitpack.io"]]
Step 2. Add the dependency
dependencies {
implementation 'com.github.gwtmaterialdesign:gwt-material-patterns:gwt-material-patterns-2.0.1'
} dependencies {
implementation("com.github.gwtmaterialdesign:gwt-material-patterns:gwt-material-patterns-2.0.1")
} <dependency>
<groupId>com.github.gwtmaterialdesign</groupId>
<artifactId>gwt-material-patterns</artifactId>
<version>gwt-material-patterns-2.0.1</version>
</dependency>
libraryDependencies += "com.github.gwtmaterialdesign" % "gwt-material-patterns" % "gwt-material-patterns-2.0.1"
:dependencies [[com.github.gwtmaterialdesign/gwt-material-patterns "gwt-material-patterns-2.0.1"]]
Readme
<img src="http://i.imgur.com/vCZg1GH.png" />
gwt-material-patterns
Maven Import
<dependency>
<groupId>com.github.gwtmaterialdesign</groupId>
<artifactId>gwt-material-patterns</artifactId>
<version>2.0.1</version>
</dependency>
Pattern # 1
The Google Plus v1.0 <a href="http://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot/#google_plus">Demo</a>
This pattern is suitable for Social Network apps to provide a collection of posts displayed in cards.
Material Components
<ul> <li> Navbar and Tabs</li> <li> Float Sidenav </li> <li> Cards displayed in Masonry </li> <li> Chips as tags inside the post card </li> <li> Collection Items for User comments </li> </ul>Desktop / Tablet View
<img src="http://i.imgur.com/3S3Zetw.gif" />Mobile View
<img src="http://i.imgur.com/pfarQGt.gif" />Pattern #2
The Google Contacts v1.0 <a href="http://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot#google_contacts">Demo</a>
This pattern is suitable for Contact / User List apps to provide a collapsible lists of users.
Material Components
<ul> <li> Fixed Navbar with link dropdown for Sorting</li> <li> Card Sidenav </li> <li> Search Nav to filter the collapsible items </li> <li> Display all contacts into collapsible items </li> <li> Overlay component to display more info about the contact </li> </ul>Desktop / Tablet View
<img src="http://i.imgur.com/TCQ4zot.gif" />Mobile View
<img src="http://i.imgur.com/SxhMv92.gif" />Pattern #3
The Google Drive v1.0 <a href="http://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot#google_drive">Demo</a>
This pattern is suitable for Document Management Systems.
Material Components
<ul> <li> Fixed Navbar with link dropdown for Sorting</li> <li> Float Sidenav </li> <li> Search Nav to filter the files</li> <li> Display all files into collapsible items </li> <li> Added right panel to display file details / activities </li> <li> Tabs for more details / activities </li> <li> Chips as file tags </li> <li> Circular user image for those who can view the file </li> </ul>Desktop / Tablet View
<img src="http://i.imgur.com/LkQo3Nb.gif" />Mobile View
<img src="http://i.imgur.com/0MGLaYo.gif" />Pattern #4
The Google Inbox v1.0 <a href="http://gwtmaterialdesign.github.io/gwt-material-patterns/snapshot#google_inbox">Demo</a>
This pattern is suitable for Email Systems.