mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
feat(list,menu,select): add slots for specific slotted variants
PiperOrigin-RevId: 565536994
This commit is contained in:
Elliott Marquez
Copybara-Service
parent
d4463154cc
commit
ed689952dd
@ -17,13 +17,13 @@
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Elliott Marquez">
|
||||
<span data-variant="avatar" slot="start">EM</span>
|
||||
<span slot="start-avatar">EM</span>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Elizabeth Mitchell">
|
||||
<span data-variant="avatar" slot="start">LM</span>
|
||||
<span slot="start-avatar">LM</span>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Andrew Jakubowicz">
|
||||
<span data-variant="avatar" slot="start">AJ</span>
|
||||
<span slot="start-avatar">AJ</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
|
||||
@ -18,16 +18,16 @@
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Eggs">
|
||||
<md-icon slot="start" data-variant="icon">egg</md-icon>
|
||||
<md-icon slot="end" data-variant="icon">recommend</md-icon>
|
||||
<md-icon slot="start-icon">egg</md-icon>
|
||||
<md-icon slot="end-icon">recommend</md-icon>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Ice cream" class="unhealthy">
|
||||
<md-icon slot="start" data-variant="icon">icecream</md-icon>
|
||||
<md-icon slot="end" data-variant="icon">dangerous</md-icon>
|
||||
<md-icon slot="start-icon">icecream</md-icon>
|
||||
<md-icon slot="end-icon">dangerous</md-icon>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Orange">
|
||||
<md-icon slot="start" data-variant="icon">nutrition</md-icon>
|
||||
<md-icon slot="end" data-variant="icon">recommend</md-icon>
|
||||
<md-icon slot="start-icon">nutrition</md-icon>
|
||||
<md-icon slot="end-icon">recommend</md-icon>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
|
||||
@ -15,13 +15,13 @@
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Wide Cat">
|
||||
<img loading="lazy" slot="start" data-variant="image" src="https://placekitten.com/200/100">
|
||||
<img loading="lazy" slot="start-image" src="https://placekitten.com/200/100">
|
||||
</md-list-item>
|
||||
<md-list-item headline="Round kitty cat">
|
||||
<img loading="lazy" slot="start" data-variant="image" src="https://placekitten.com/202/101">
|
||||
<img loading="lazy" slot="start-image" src="https://placekitten.com/202/101">
|
||||
</md-list-item>
|
||||
<md-list-item headline="Softe cate">
|
||||
<img loading="lazy" slot="start" data-variant="image" src="https://placekitten.com/212/106">
|
||||
<img loading="lazy" slot="start-image" src="https://placekitten.com/212/106">
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
|
||||
@ -16,8 +16,7 @@
|
||||
<md-list>
|
||||
<md-list-item headline="Expressiveness">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
@ -28,8 +27,7 @@
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Personalization">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
@ -40,8 +38,7 @@
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Accessible">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
|
||||
@ -4,13 +4,12 @@
|
||||
>
|
||||
<md-list style="max-width: 300px">
|
||||
<md-list-item headline="User 1">
|
||||
<span slot="start" data-variant="avatar">EM</span>
|
||||
<span slot="start-avatar">EM</span>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="User 2">
|
||||
<img
|
||||
slot="start"
|
||||
data-variant="avatar"
|
||||
slot="start-avatar"
|
||||
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII="
|
||||
/>
|
||||
</md-list-item>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<figure aria-label="A list with three items and dividers separating each item. The first item has the Lit logo and the text Lit. The second item has the Polymer logo and the text Polymer. The third item has the Angular logo and the text Angular.">
|
||||
<md-list style="max-width: 300px">
|
||||
<md-list-item headline="Lit">
|
||||
<svg slot="start" data-variant="icon" viewBox="0 0 160 200">
|
||||
<svg slot="start-icon" viewBox="0 0 160 200">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z"
|
||||
@ -11,11 +11,11 @@
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Polymer">
|
||||
<md-icon slot="start" data-variant="icon">polymer</md-icon>
|
||||
<md-icon slot="start-icon">polymer</md-icon>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Angular">
|
||||
<svg slot="start" data-variant="icon" viewBox="0 0 250 250">
|
||||
<svg slot="start-icon" viewBox="0 0 250 250">
|
||||
<polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5 " />
|
||||
<path
|
||||
d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0
|
||||
|
||||
@ -4,15 +4,15 @@
|
||||
>
|
||||
<md-list style="max-width: 300px">
|
||||
<md-list-item headline="Cat">
|
||||
<img slot="start" data-variant="image" loading="lazy" src="https://placekitten.com/112/112" />
|
||||
<img slot="start-image" loading="lazy" src="https://placekitten.com/112/112" />
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Kitty Cat">
|
||||
<img slot="start" data-variant="image" loading="lazy" src="https://placekitten.com/114/114" />
|
||||
<img slot="start-image" loading="lazy" src="https://placekitten.com/114/114" />
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Cate">
|
||||
<img slot="start" data-variant="image" loading="lazy" src="https://placekitten.com/118/118" />
|
||||
<img slot="start-image" loading="lazy" src="https://placekitten.com/118/118" />
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
|
||||
@ -5,8 +5,7 @@
|
||||
<md-list style="max-width: 300px">
|
||||
<md-list-item headline="Expressiveness">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
@ -17,8 +16,7 @@
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Personalization">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
@ -29,8 +27,7 @@
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Accessible">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
|
||||
@ -19,7 +19,7 @@
|
||||
href="https://google.com/search?q=buy+kiwis&tbm=shop"
|
||||
target="_blank"
|
||||
>
|
||||
<md-icon slot="end" data-variant="icon">open_in_new</md-icon>
|
||||
<md-icon slot="end-icon">open_in_new</md-icon>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</figure>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<md-menu-item headline="Granny Smith"></md-menu-item>
|
||||
<md-menu-item headline="Red Delicious"></md-menu-item>
|
||||
</md-menu>
|
||||
<md-icon slot="start" data-variant="icon" style="font-size: 24px;height:24px;">arrow_left</md-icon>
|
||||
<md-icon slot="start-icon" style="font-size: 24px;height:24px;">arrow_left</md-icon>
|
||||
</md-sub-menu-item>
|
||||
</md-menu>
|
||||
<md-icon slot="end">arrow_right</md-icon>
|
||||
|
||||
@ -86,15 +86,14 @@ header which is on two lines.](images/list/usage.webp)
|
||||
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" data-variant="icon">open_in_new</md-icon>
|
||||
<md-icon slot="end-icon">open_in_new</md-icon>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
## Icon Items
|
||||
|
||||
Icons can be slotted into list-items' `start` slot using the
|
||||
`data-variant="icon"` attribute.
|
||||
Icons can be slotted into list-items' `start-icon` or `end-icon` slot.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
@ -109,18 +108,18 @@ Angular.](images/list/usage-icon.webp)
|
||||
```html
|
||||
<md-list style="max-width: 300px;">
|
||||
<md-list-item headline="Lit">
|
||||
<svg slot="start" data-variant="icon" viewBox="0 0 160 200">
|
||||
<svg slot="start-icon" viewBox="0 0 160 200">
|
||||
<path
|
||||
d="m160 80v80l-40-40zm-40 40v80l40-40zm0-80v80l-40-40zm-40 40v80l40-40zm-40-40v80l40-40zm40-40v80l-40-40zm-40 120v80l-40-40zm-40-40v80l40-40z"/>
|
||||
</svg>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Polymer">
|
||||
<md-icon slot="start" data-variant="icon">polymer</md-icon>
|
||||
<md-icon slot="start-icon">polymer</md-icon>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Angular">
|
||||
<svg slot="start" data-variant="icon" viewBox="0 0 250 250">
|
||||
<svg slot="start-icon" viewBox="0 0 250 250">
|
||||
<polygon points="108,135.4 125,135.4 125,135.4 125,135.4 142,135.4 125,94.5"/>
|
||||
<path d="M125,30L125,30L125,30L31.9,63.2l14.2,123.1L125,230l0,0l0,0l78.9-43.7l14.2-123.1L125,30z M183.1,182.6h-21.7h0 l-11.7-29.2H125h0h0h-24.7l-11.7,29.2h0H66.9h0L125,52.1l0,0l0,0l0,0l0,0L183.1,182.6L183.1,182.6z"/>
|
||||
</svg>
|
||||
@ -130,8 +129,7 @@ Angular.](images/list/usage-icon.webp)
|
||||
|
||||
## Avatar Items
|
||||
|
||||
Image or text avatars can be slotted into list-items' `start` slot using the
|
||||
`data-variant="avatar"` attribute.
|
||||
Image or text avatars can be slotted into list-items' `start-avatar` slot.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
@ -145,19 +143,18 @@ item has a circular image of a person silhouette](images/list/usage-avatar.webp)
|
||||
```html
|
||||
<md-list style="max-width: 300px;">
|
||||
<md-list-item headline="User 1">
|
||||
<span slot="start" data-variant="avatar">EM</span>
|
||||
<span slot="start-avatar">EM</span>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="User 2">
|
||||
<img slot="start" data-variant="avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=">
|
||||
<img slot="start-avatar" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAAAAADH8yjkAAABsklEQVR4Ae3WBaLjMAxF0dn/np4hVEY3cQqOupNh/i4oVT76buAUEkmfzgOXgAS8QiABCUhAAg71dlsfhgJOc4vv2flpAICWGr/TS5IGQoV/qoIs0OX4r7wTBcZ40lgSqBGplgMoQ6SMxACPaF4MmCPaXAwoEa0UAyyiWTFAIZoSAwyiGTGgQLRCDJgh2kwMaBCtEQPIIpIluVnkEMkJDjuq8KSKJMd1eDLusiC70U45/ik/Se/kbqbwOzXrBrgqDtOfhJoeBrqLyLvl0nlKp2MCXi1Ap1Prndv59iQOdPVqkqu/J9FoWQcp4LguES1f7B8HaJPhStk6PASElcGN9CL0B9YKd6TWPYFjgTsrjn2ARuPudMMHdgqM1I4LtAqsVMsDyIKZJRawBLslC7BgZzlAQI8CA+gM2JmOAZy9AjPleY/pAswWZx5AFVhVxATOVIJRSfxZRAXurqA+07Qb4c5GXb99QAvc1YJ6bzSncTPtHtnJYYwbjcODV0WT40p5I3C21AUQr6iFDi8/M5HZM/OSp2O7HP+FmPGyHeD4Db5x261rfEjnewISkIAEJODDAV8A/z6x+ahJu3sAAAAASUVORK5CYII=">
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
## Image Items
|
||||
|
||||
Images can be slotted into list-items' `start` slot using the
|
||||
`data-variant="image"` attribute.
|
||||
Images can be slotted into list-items' `start-image` slot.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
@ -172,23 +169,23 @@ Cate.](images/list/usage-image.webp)
|
||||
```html
|
||||
<md-list style="max-width: 300px;">
|
||||
<md-list-item headline="Cat">
|
||||
<img slot="start" data-variant="image" src="https://placekitten.com/112/112">
|
||||
<img slot="start-image" src="https://placekitten.com/112/112">
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Kitty Cat">
|
||||
<img slot="start" data-variant="image" src="https://placekitten.com/114/114">
|
||||
<img slot="start-image" src="https://placekitten.com/114/114">
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Cate">
|
||||
<img slot="start" data-variant="image" src="https://placekitten.com/116/116">
|
||||
<img slot="start-image" src="https://placekitten.com/116/116">
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
|
||||
## Video Items
|
||||
|
||||
Videos can also be slotted into list-items' `start` slot using the
|
||||
`data-variant="video"` attribute.
|
||||
Videos can also be slotted into list-items' `start-video"` or
|
||||
`start-video-large` slots.
|
||||
|
||||
<!-- no-catalog-start -->
|
||||
|
||||
@ -201,8 +198,7 @@ Videos can also be slotted into list-items' `start` slot using the
|
||||
<md-list style="max-width: 300px;">
|
||||
<md-list-item headline="Expressiveness">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
@ -213,8 +209,7 @@ Videos can also be slotted into list-items' `start` slot using the
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Personalization">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
@ -225,8 +220,7 @@ Videos can also be slotted into list-items' `start` slot using the
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Accessible">
|
||||
<video
|
||||
slot="start"
|
||||
data-variant="video"
|
||||
slot="start-video"
|
||||
playsinline
|
||||
muted
|
||||
autoplay
|
||||
@ -254,23 +248,23 @@ on the internal list item nodes.
|
||||
```html
|
||||
<md-list type="listbox">
|
||||
<md-list-item type="option" headline="icon">
|
||||
<md-icon data-variant="icon" slot="start">account_circle</md-icon>
|
||||
<md-icon slot="start-icon">account_circle</md-icon>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item type="option" headline="image">
|
||||
<img alt="a photo of a cat" data-variant="image" slot="start" src="https://placekitten.com/112/112">
|
||||
<img alt="a photo of a cat" slot="start-image" src="https://placekitten.com/112/112">
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item type="option" headline="avatar">
|
||||
<img alt="a photo of a cat" data-variant="avatar" slot="start" src="https://placekitten.com/112/112">
|
||||
<img alt="a photo of a cat" slot="start-avatar" src="https://placekitten.com/112/112">
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item type="option" headline="avatar text">
|
||||
<span role="img" alt="stylized text EM" data-variant="avatar" slot="start">EM</span>
|
||||
<span role="img" alt="stylized text EM" slot="start-avatar">EM</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item type="option" headline="video">
|
||||
<video slot="start" data-variant="video" playsinline muted autoplay loop
|
||||
<video slot="start-video" playsinline muted autoplay loop
|
||||
src="https://kstatic.googleusercontent.com/files/f925638d73101f91d11db39e191ec6ed4101ee96c063283ddc4ea1f01b7d1ebe3ae360c124448d5759a7ecfbcb05af96cf746122ee3b898b4bf7db8d6882de1c">
|
||||
<track src="link-to-subtitles-en.vtt" label="English captions" kind="captions" srclang="en" default>
|
||||
<track src="link-to-subtitles-zh.vtt" label="中文字幕" kind="captions" srclang="zh">
|
||||
@ -386,16 +380,16 @@ applied](images/list/theming-icon.webp)
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Eggs">
|
||||
<md-icon slot="start" data-variant="icon">egg</md-icon>
|
||||
<md-icon slot="end" data-variant="icon">recommend</md-icon>
|
||||
<md-icon slot="start-icon">egg</md-icon>
|
||||
<md-icon slot="end-icon">recommend</md-icon>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Ice cream" class="unhealthy">
|
||||
<md-icon slot="start" data-variant="icon">icecream</md-icon>
|
||||
<md-icon slot="end" data-variant="icon">dangerous</md-icon>
|
||||
<md-icon slot="start-icon">icecream</md-icon>
|
||||
<md-icon slot="end-icon">dangerous</md-icon>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Orange">
|
||||
<md-icon slot="start" data-variant="icon">nutrition</md-icon>
|
||||
<md-icon slot="end" data-variant="icon">recommend</md-icon>
|
||||
<md-icon slot="start-icon">nutrition</md-icon>
|
||||
<md-icon slot="end-icon">recommend</md-icon>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
@ -437,13 +431,13 @@ Token | Default value
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Elliott Marquez">
|
||||
<span data-variant="avatar" slot="start">EM</span>
|
||||
<span slot="start-avatar">EM</span>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Elizabeth Mitchell">
|
||||
<span data-variant="avatar" slot="start">LM</span>
|
||||
<span slot="start-avatar">LM</span>
|
||||
</md-list-item>
|
||||
<md-list-item headline="Andrew Jackubowicz">
|
||||
<span data-variant="avatar" slot="start">AJ</span>
|
||||
<span slot="start-avatar">AJ</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
@ -481,13 +475,13 @@ Token | Default value
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Wide Cat">
|
||||
<img slot="start" data-variant="image" src="https://placekitten.com/200/100">
|
||||
<img slot="start-image" src="https://placekitten.com/200/100">
|
||||
</md-list-item>
|
||||
<md-list-item headline="Round kitty cat">
|
||||
<img slot="start" data-variant="image" src="https://placekitten.com/202/101">
|
||||
<img slot="start-image" src="https://placekitten.com/202/101">
|
||||
</md-list-item>
|
||||
<md-list-item headline="Softe cate">
|
||||
<img slot="start" data-variant="image" src="https://placekitten.com/212/106">
|
||||
<img slot="start-image" src="https://placekitten.com/212/106">
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
```
|
||||
@ -525,19 +519,19 @@ Token | Default value
|
||||
</style>
|
||||
<md-list>
|
||||
<md-list-item headline="Expressiveness">
|
||||
<video slot="start" data-variant="video" playsinline muted autoplay loop
|
||||
<video slot="start-video" playsinline muted autoplay loop
|
||||
src="https://kstatic.googleusercontent.com/files/f925638d73101f91d11db39e191ec6ed4101ee96c063283ddc4ea1f01b7d1ebe3ae360c124448d5759a7ecfbcb05af96cf746122ee3b898b4bf7db8d6882de1c"
|
||||
></video>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Personalization">
|
||||
<video slot="start" data-variant="video" playsinline muted autoplay loop
|
||||
<video slot="start-video" playsinline muted autoplay loop
|
||||
src="https://kstatic.googleusercontent.com/files/e07831809bfeeef1acd74cc5fbf20fc2974984c7e011f01e3df62c96a5a18b309af71e58e01a07ae89e30d7243e692affcf8fbf159fe0e078e35612d0851e8ea"
|
||||
></video>
|
||||
</md-list-item>
|
||||
<md-divider></md-divider>
|
||||
<md-list-item headline="Accessible">
|
||||
<video slot="start" data-variant="video" playsinline muted autoplay loop
|
||||
<video slot="start-video" playsinline muted autoplay loop
|
||||
src="https://kstatic.googleusercontent.com/files/9430d9604eff1ecd370d688cb57eb95781e546279ed9bbb04c15dd0b80881c564addc8aaed5d37b3a5fc656b1fc673cfbd25c4b6a08b9d3e7ea396808f00ba20"
|
||||
></video>
|
||||
</md-list-item>
|
||||
|
||||
@ -162,8 +162,7 @@ Granny Smith, and Red Delicious."](images/menu/usage-submenu.webp)
|
||||
|
||||
<!-- Arrow icons are helpful affordances -->
|
||||
<md-icon
|
||||
slot="start"
|
||||
data-variant="icon"
|
||||
slot="start-icon"
|
||||
style="font-size: 24px;height:24px;">
|
||||
arrow_left
|
||||
</md-icon>
|
||||
|
||||
@ -49,20 +49,21 @@ const collection =
|
||||
new Knob('target', {ui: textInput(), defaultValue: '_blank'}),
|
||||
new Knob('link end icon', {ui: textInput(), defaultValue: 'open_in_new'}),
|
||||
|
||||
new Knob('data-variant=icon', {ui: title()}),
|
||||
new Knob('slot[name=start|end-icon]', {ui: title()}),
|
||||
new Knob('start icon', {ui: textInput(), defaultValue: 'account_circle'}),
|
||||
new Knob('end icon', {ui: textInput(), defaultValue: 'check_circle'}),
|
||||
|
||||
new Knob('data-variant=avatar', {ui: title()}),
|
||||
new Knob('slot[name=start-avatar]', {ui: title()}),
|
||||
new Knob('avatar img', {ui: textInput(), defaultValue: AVATAR_URL}),
|
||||
new Knob('avatar label', {ui: textInput(), defaultValue: 'EM'}),
|
||||
|
||||
new Knob('data-variant=image', {ui: title()}),
|
||||
new Knob('slot[name=start-image]', {ui: title()}),
|
||||
new Knob('image', {ui: textInput(), defaultValue: IMAGE_URL}),
|
||||
|
||||
new Knob('data-variant=video', {ui: title()}),
|
||||
new Knob('slot[name=start-video]', {ui: title()}),
|
||||
new Knob(
|
||||
'data-variant=video-large', {ui: boolInput(), defaultValue: false}),
|
||||
'slot[name=start-video-large]',
|
||||
{ui: boolInput(), defaultValue: false}),
|
||||
new Knob('video src', {ui: textInput(), defaultValue: VIDEO_URL}),
|
||||
]);
|
||||
|
||||
|
||||
@ -23,25 +23,23 @@ export interface StoryKnobs {
|
||||
headline: string;
|
||||
supportingText: string;
|
||||
trailingSupportingText: string;
|
||||
|
||||
'data-variant=icon': void;
|
||||
'start icon': string;
|
||||
'end icon': string;
|
||||
|
||||
'data-variant=link': void;
|
||||
href: string;
|
||||
target: string;
|
||||
'link end icon': string;
|
||||
|
||||
'data-variant=avatar': void;
|
||||
'slot[name=start|end-icon]': void;
|
||||
'start icon': string;
|
||||
'end icon': string;
|
||||
|
||||
'slot[name=start-avatar]': void;
|
||||
'avatar img': string;
|
||||
'avatar label': string;
|
||||
|
||||
'data-variant=image': void;
|
||||
'slot[name=start-image]': void;
|
||||
image: string;
|
||||
|
||||
'data-variant=video': void;
|
||||
'data-variant=video-large': boolean;
|
||||
'slot[name=start-video]': void;
|
||||
'slot[name=start-video-large]': boolean;
|
||||
'video src': string;
|
||||
}
|
||||
|
||||
@ -93,10 +91,10 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.trailingSupportingText=${trailingSupportingText}
|
||||
.disabled=${disabled}
|
||||
.noninteractive=${noninteractive}>
|
||||
<md-icon data-variant="icon" slot="start">
|
||||
<md-icon slot="start-icon">
|
||||
${knobs['start icon']}
|
||||
</md-icon>
|
||||
<md-icon data-variant="icon" slot="end">
|
||||
<md-icon slot="end-icon">
|
||||
${knobs['end icon']}
|
||||
</md-icon>
|
||||
</md-list-item>
|
||||
@ -110,8 +108,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.noninteractive=${noninteractive}
|
||||
.href=${href}
|
||||
.target=${target as '' | '_blank' | '_parent' | '_self' | '_top'}>
|
||||
<md-icon data-variant="icon" slot="end">${
|
||||
knobs['link end icon']}</md-icon>
|
||||
<md-icon slot="end-icon">${knobs['link end icon']}</md-icon>
|
||||
</md-list-item>
|
||||
|
||||
<md-divider></md-divider>
|
||||
@ -123,7 +120,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.trailingSupportingText=${trailingSupportingText}
|
||||
.disabled=${disabled}
|
||||
.noninteractive=${noninteractive}>
|
||||
<img src=${knobs['avatar img']} slot="start" data-variant="avatar">
|
||||
<img src=${knobs['avatar img']} slot="start-avatar">
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item
|
||||
@ -133,7 +130,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.trailingSupportingText=${trailingSupportingText}
|
||||
.disabled=${disabled}
|
||||
.noninteractive=${noninteractive}>
|
||||
<span slot="start" data-variant="avatar">
|
||||
<span slot="start-avatar">
|
||||
${knobs['avatar label']}
|
||||
</span>
|
||||
</md-list-item>
|
||||
@ -145,7 +142,7 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.trailingSupportingText=${trailingSupportingText}
|
||||
.disabled=${disabled}
|
||||
.noninteractive=${noninteractive}>
|
||||
<img .src=${image} data-variant="image" slot="start">
|
||||
<img .src=${image} slot="start-image">
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item
|
||||
@ -156,14 +153,14 @@ const standard: MaterialStoryInit<StoryKnobs> = {
|
||||
.disabled=${disabled}
|
||||
.noninteractive=${noninteractive}>
|
||||
<video
|
||||
slot="start"
|
||||
muted
|
||||
autoplay
|
||||
loop
|
||||
playsinline
|
||||
.src=${knobs['video src']}
|
||||
data-variant=${
|
||||
knobs['data-variant=video-large'] ? 'video-large' : 'video'}
|
||||
slot=${
|
||||
knobs['slot[name=start-video-large]'] ? 'start-video-large' :
|
||||
'start-video'}
|
||||
></video>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
@ -126,12 +126,13 @@
|
||||
}
|
||||
}
|
||||
|
||||
slot[name='start'] {
|
||||
&::slotted([data-variant='icon']),
|
||||
&::slotted([data-variant='image']),
|
||||
&::slotted([data-variant='avatar']) {
|
||||
margin-inline-start: var(--_leading-element-leading-space);
|
||||
}
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start']::slotted([data-variant='image']),
|
||||
slot[name='start']::slotted([data-variant='avatar']),
|
||||
slot[name='start-icon']::slotted(*),
|
||||
slot[name='start-image']::slotted(*),
|
||||
slot[name='start-avatar']::slotted(*) {
|
||||
margin-inline-start: var(--_leading-element-leading-space);
|
||||
}
|
||||
|
||||
.body {
|
||||
@ -158,6 +159,7 @@
|
||||
}
|
||||
|
||||
slot[name='end']::slotted(*),
|
||||
slot[name='end-icon']::slotted(*),
|
||||
.trailing-supporting-text {
|
||||
margin-inline-start: var(
|
||||
--_trailing-element-headline-trailing-element-space
|
||||
@ -254,7 +256,8 @@
|
||||
}
|
||||
|
||||
@mixin _image() {
|
||||
::slotted([data-variant='image']) {
|
||||
::slotted([data-variant='image']),
|
||||
slot[name='start-image']::slotted(*) {
|
||||
display: inline-flex;
|
||||
height: var(--_leading-image-height);
|
||||
width: var(--_leading-image-width);
|
||||
@ -275,7 +278,8 @@
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
slot[name='start']::slotted([data-variant='icon']) {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
font-size: var(--_leading-icon-size);
|
||||
width: var(--_leading-icon-size);
|
||||
height: var(--_leading-icon-size);
|
||||
@ -289,7 +293,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']) {
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
font-size: var(--_trailing-icon-size);
|
||||
width: var(--_trailing-icon-size);
|
||||
height: var(--_trailing-icon-size);
|
||||
@ -304,42 +309,50 @@
|
||||
}
|
||||
|
||||
:hover {
|
||||
slot[name='start']::slotted([data-variant='icon']) {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
color: var(--_hover-leading-icon-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']) {
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
color: var(--_hover-trailing-icon-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
:focus {
|
||||
slot[name='start']::slotted([data-variant='icon']) {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
color: var(--_focus-leading-icon-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']) {
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
color: var(--_focus-trailing-icon-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
:active {
|
||||
slot[name='start']::slotted([data-variant='icon']) {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
color: var(--_pressed-leading-icon-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']) {
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
color: var(--_pressed-trailing-icon-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
.disabled {
|
||||
slot[name='start']::slotted([data-variant='icon']) {
|
||||
slot[name='start']::slotted([data-variant='icon']),
|
||||
slot[name='start-icon']::slotted(*) {
|
||||
opacity: var(--_disabled-leading-icon-opacity);
|
||||
color: var(--_disabled-leading-icon-color);
|
||||
}
|
||||
|
||||
slot[name='end']::slotted([data-variant='icon']) {
|
||||
slot[name='end']::slotted([data-variant='icon']),
|
||||
slot[name='end-icon']::slotted(*) {
|
||||
opacity: var(--_disabled-trailing-icon-opacity);
|
||||
color: var(--_disabled-trailing-icon-color);
|
||||
}
|
||||
@ -347,7 +360,8 @@
|
||||
}
|
||||
|
||||
@mixin _avatar() {
|
||||
::slotted([data-variant='avatar']) {
|
||||
::slotted([data-variant='avatar']),
|
||||
slot[name='start-avatar']::slotted(*) {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -365,7 +379,9 @@
|
||||
|
||||
@mixin _video() {
|
||||
::slotted([data-variant='video']),
|
||||
::slotted([data-variant='video-large']) {
|
||||
::slotted([data-variant='video-large']),
|
||||
slot[name='start-video']::slotted(*),
|
||||
slot[name='start-video-large']::slotted(*) {
|
||||
display: inline-flex;
|
||||
object-fit: cover;
|
||||
height: var(--_small-leading-video-height);
|
||||
@ -385,7 +401,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
::slotted([data-variant='video-large']) {
|
||||
::slotted([data-variant='video-large']),
|
||||
slot[name='start-video-large']::slotted(*) {
|
||||
// Min height is three-line height
|
||||
margin-block: calc(
|
||||
(var(--_three-line-container-height) - var(--_large-leading-video-height)) /
|
||||
|
||||
@ -185,7 +185,15 @@ export class ListItemEl extends LitElement implements ListItem {
|
||||
* The content rendered at the start of the list item.
|
||||
*/
|
||||
protected renderStart() {
|
||||
return html`<div class="start"><slot name="start"></slot></div>`;
|
||||
return html`
|
||||
<div class="start">
|
||||
<slot name="start"></slot>
|
||||
<slot name="start-icon"></slot>
|
||||
<slot name="start-image"></slot>
|
||||
<slot name="start-avatar"></slot>
|
||||
<slot name="start-video"></slot>
|
||||
<slot name="start-video-large"></slot>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
@ -222,8 +230,12 @@ export class ListItemEl extends LitElement implements ListItem {
|
||||
const supportingText = this.trailingSupportingText !== '' ?
|
||||
this.renderTrailingSupportingText() :
|
||||
'';
|
||||
return html`<div class="end"
|
||||
><slot name="end">${supportingText}</slot></div>`;
|
||||
return html`
|
||||
<div class="end">
|
||||
${supportingText}
|
||||
<slot name="end"></slot>
|
||||
<slot name="end-icon"></slot>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -36,20 +36,26 @@ declare global {
|
||||
* item in a collection and act on it.
|
||||
* - Lists should present icons, text, and actions in a consistent format.
|
||||
*
|
||||
* Acceptable slottable child variants are:
|
||||
* Acceptable slot child variants are:
|
||||
*
|
||||
* - `video[data-variant=video]`
|
||||
* - `img,span[data-variant=avatar]`
|
||||
* - `img[data-variant=image]`
|
||||
* - `md-icon[data-variant=icon]`
|
||||
* - `video[slot=start-video]`
|
||||
* - `video[slot=start-video-large]`
|
||||
* - `img,span[slot=start-avatar]`
|
||||
* - `img[slot=start-image]`
|
||||
* - `md-icon[slot=start-icon]`
|
||||
* - `svg[slot=start-icon]`
|
||||
* - `img[slot=start-icon]`
|
||||
* - `md-icon[slot=end-icon]`
|
||||
* - `svg[slot=end-icon]`
|
||||
* - `img[slot=end-icon]`
|
||||
*
|
||||
* @example
|
||||
* ```html
|
||||
* <md-list-item
|
||||
* headline="User Name"
|
||||
* supportingText="user@name.com">
|
||||
* <md-icon data-variant="icon" slot="start">account_circle</md-icon>
|
||||
* <md-icon data-variant="icon" slot="end">check</md-icon>
|
||||
* <md-icon slot="start-icon">account_circle</md-icon>
|
||||
* <md-icon slot="end-icon">check</md-icon>
|
||||
* </md-list-item>
|
||||
* ```
|
||||
*
|
||||
|
||||
@ -156,7 +156,7 @@ const linkable: MaterialStoryInit<StoryKnobs> = {
|
||||
.target=${
|
||||
knobs.target as '' | '_blank' | '_parent' | '_self' | '_top'}
|
||||
.href=${knobs.href}>
|
||||
<md-icon data-variant="icon" slot="end">
|
||||
<md-icon slot="end-icon">
|
||||
${knobs['link icon']}
|
||||
</md-icon>
|
||||
</md-menu-item>
|
||||
@ -246,7 +246,7 @@ const submenu: MaterialStoryInit<StoryKnobs> = {
|
||||
.typeaheadDelay=${knobs.typeaheadDelay}>
|
||||
${layer2}
|
||||
</md-menu>
|
||||
<md-icon data-variant="icon" slot="end">
|
||||
<md-icon slot="end-icon">
|
||||
${knobs['submenu icon']}
|
||||
</md-icon>
|
||||
</md-sub-menu-item>`;
|
||||
@ -288,7 +288,7 @@ const submenu: MaterialStoryInit<StoryKnobs> = {
|
||||
.typeaheadDelay=${knobs.typeaheadDelay}>
|
||||
${layer1}
|
||||
</md-menu>
|
||||
<md-icon data-variant="icon" slot="end">
|
||||
<md-icon slot="end-icon">
|
||||
${knobs['submenu icon']}
|
||||
</md-icon>
|
||||
</md-sub-menu-item>`;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user