Comments (5)
Implemented the first prototype, see it in CodePen. Supports:
- Single line footer
- Single line footer with icon on left
- Single line footer with icon on right
- Two line footer
- Two line footer with icon on left and no icon on support text
- Two line footer with icon on right and icon on support text
from material-components-web.
Next step we need to figure out how grid list item size is defined and if it may have any relationship with grid layout with our designers.
from material-components-web.
Based on our conversation with the designer this morning, the grid list sounds like
Grid list cell
doesn't necessarily have things to do withLayout grid columns
. On the other end, decouple the relationship between this 2 is desirable.Grid list container
containsGrid list items
. The former interact with overall layout (e.g.Layout grid
).- Two patterns are possible here:
Grid list container
defines how many cells per row it want to have andgrid cell
size responsive to the screen width changes v.s.grid cell
size is defined and occupy the row space provided bygrid list container
. Both are possible and seems like the former is preferred.
Following up conversation would includes:
- If the
grid cell
size is responsive, do we have any constraints(e.g: max/min width) to prevent extreme cases (e.g: to preserve text readability)? If we put extra constraints, what shall we sacrifice instead: gutter width? number of cells per row? - Another following up question is this also makes define different cell per row rule necessary for different screen width, so we need to have some breakpoints. For example it can changes at the same time when layout grid changes from 12 columns to 8 or 4 columns if that make sense. In this case, do we provide default value if user not define their rule for that screen width?
- Do we preserve aspect ratio for the
grid list items
? If so, is that fixed 1:1/16:9? A set of predefined values? Customizable?
from material-components-web.
Had another conversation with our designer, there is definitely a lot to figure out, so instead, we will work together to define how the grid list should behave on web.
We will start from the most rigid example - 12 columns with gutter of 8px and I updated the prototype on codepen correspondingly.
Please feel free to left your comments and thought over grid list.
from material-components-web.
After all the discussion, we decided to line our component with iOS and Android implementation:
User defines the item width and gutter while we provide a reasonable default value so that finding a perfect value by yourself is not a must but an option. Then the items reflow to fill the container and center themselves if there is extra space.
We choose this implementation to align with our current spec and other platform implementation and remain the fixed number of columns as a future option.
Here is the latest prototype
from material-components-web.
Related Issues (20)
- Angular Material Tabs with sticky first tab
- The getting started guide: issues HOT 1
- [mdc-icon-button] unable to import core-styles mixin of icon-button as shown in documentation
- Unpkg: Source map for minified JS missing HOT 1
- MDCTopAppBar buttons ripple effect broken since 12.0.0 HOT 2
- Hi, I can't make a frame for the drawer, it's a problem
- Symmetric API for the Angular Material Icon Button HOT 1
- [MDCTextField] Trailing icons do not appear HOT 1
- the problem in running the program HOT 1
- [mdc-chip] css not applied to mdc-evolution-chip elements HOT 3
- Is there anyway we can force the dropdown select to always show below?
- [Chips] Filter chips not showing svg tick HOT 1
- `setAutovalidate()`/`getAutovalidate` name mismatch in readme
- Vertical mat-slider
- [mdc-theme] Contradicting advice on purpose of `$secondary`
- [Snackbar] screenreader leaves out "button" when reading message and action
- Tag for the version 14.1.0 is missing
- The release 14.1.0 isn't published on npmjs HOT 1
- Tone should work with css-variables
- [ALL] NPM packages are missing file extensions in ES6 exports
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-components-web.