mirror of
https://github.com/material-components/material-web.git
synced 2026-01-09 07:21:09 +08:00
3b5cbc4ede
BREAKING CHANGE: the `noninteractive` property has been replaced by the `interactive` property, and by default, a list-item will no longer show a ripple or focus ring. What to change: - To preserve prior default behavior, add the `interactive` attribute explicitly. - Any setting of a truthy `noninteractive` attribute or property can be removed as it's the new default behavior. PiperOrigin-RevId: 566696782
28 lines
1.2 KiB
HTML
28 lines
1.2 KiB
HTML
<div class="figure-wrapper">
|
|
<figure
|
|
aria-label="Three items in a list. The first item says Apple as its headline. The second one says Banana in its headline as well as Banana is a yellow fruit as its sub header. The third list item says Cucumber in its headline and Cucumbers are long green fruits that are just as long as this multi-line description as its sub header which is on two lines."
|
|
>
|
|
<md-list style="max-width: 300px">
|
|
<md-list-item headline="Fruits"></md-list-item>
|
|
<md-divider></md-divider>
|
|
<md-list-item headline="Apple"></md-list-item>
|
|
<md-list-item headline="Banana" supporting-text="Banana is a yellow fruit"> </md-list-item>
|
|
<md-list-item
|
|
headline="Cucumber"
|
|
multi-line-supporting-text
|
|
supporting-text="Cucumbers are long green fruits that are just as long as this multi-line description"
|
|
>
|
|
</md-list-item>
|
|
<md-list-item
|
|
interactive
|
|
headline="Shop for Kiwis"
|
|
supporting-text="This will link you out in a new tab"
|
|
href="https://google.com/search?q=buy+kiwis&tbm=shop"
|
|
target="_blank"
|
|
>
|
|
<md-icon slot="end-icon">open_in_new</md-icon>
|
|
</md-list-item>
|
|
</md-list>
|
|
</figure>
|
|
</div>
|