Comments (8)
Awesome! Looking forward to seeing your work 😄
Re collapsible lists, it's not on our radar right now, and probably involves implementing #46 first. Once that's done though, it's something we may consider, and even if not, you could definitely build it into your UI by adding custom styles to our lists.
from material-components-web.
Any news about support for three-line lists?
from material-components-web.
I was able to get a three-line list component:
@import "@material/list/mdc-list";
@import "@material/feature-targeting/functions";
@import "@material/feature-targeting/mixins";
$query: mdc-feature-all();
$feat-structure: mdc-feature-create-target($query, structure);
.mdc-list--three-line .mdc-list-item__text {
@include mdc-feature-targets($feat-structure) {
align-self: flex-start;
}
}
.mdc-list--three-line .mdc-list-item {
@include mdc-feature-targets($feat-structure) {
height: 92px;
}
}
.mdc-list--three-line.mdc-list--dense .mdc-list-item,
.mdc-list--avatar-list.mdc-list--dense .mdc-list-item {
@include mdc-feature-targets($feat-structure) {
height: 80px;
}
}
<ul class="mdc-list demo-list mdc-list--three-line mdc-list--avatar-list">
<li class="mdc-list-item" tabindex="0">
<span class="mdc-list-item__graphic" style="size:2em;">W</span>
<span class="mdc-list-item__text">
<span class="mdc-list-item__primary-text">List item title</span>
<span class="mdc-list-item__secondary-text">Secondary text</span>
<span class="mdc-list-item__secondary-text">Secondary text</span>
</span>
<span class="mdc-list-item__meta">info</span>
</li>
</ul>
DISCLAIMER: This is the first thing I did that achieved the desired effect. I didn't dig any further, read the material.io tome, or teach myself a new style sheet language. Since, I don't know Sass or SCSS, this is likely not an ideal implementation. 😅
from material-components-web.
Is this open for anyone to implement?
from material-components-web.
@rohanthacker definitely!
The three-line list will most likely by SCSS additions, but either way it may be useful to show us a prototype via Codepen of what you're thinking so that way we can smooth any rough edges over before you go about implementing the feature. You can use this template to prototype if you want.
Let us know if you want to tackle it and we'll assign you. If you're looking for more info on how we build components, check out our our Authoring Components guide. And thanks for your interest 😄
from material-components-web.
Hey @traviskaufman Yes I would like to Implement this for MCD. I helped put together, the MDL version of Material Lists.
I'll post back on this thread with a demo of 3 Line version when, I have something ready for you to see.
I was also wondering, about collapsable lists as I wasnt able to submit this to MDL, but I'd be happy to do so for MDC.
Happy to Help! 👍
from material-components-web.
Hi! Any update about the support for three-line lists?
from material-components-web.
Is there any update on getting this three line support added? I have a requirement within my project to use three line lists and the @SMUI components I am using depend on your components. While a workaround can be added directly to @smui it would be cleaner if @Material shipped the required styles (shown above).
The previous suggested fix looks straight forward enough although I do think it contains a bug with the .mdc-list-item
height:-
.mdc-list--three-line .mdc-list-item {
@include mdc-feature-targets($feat-structure) {
height: 92px;
}
}
From reading the List Component Spec :-
I think the height should be specified as 88px
not 92px
correct me if I am wrong? @artburkart
Any update on this issue is appreciated. Thanks
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.