feat: implement Material 3 carousel component #115
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { html, LitElement, css } from 'lit'; | ||
|
|
||
| /** | ||
| * An item inside a Material 3 Carousel. | ||
| * | ||
| * @element md-carousel-item | ||
| */ | ||
| export class CarouselItem extends LitElement { | ||
| static get styles() { | ||
| return [ | ||
| css` | ||
| :host { | ||
| display: block; | ||
| border-radius: 16px; | ||
| overflow: hidden; | ||
| /* Default aspect ratio, can be overridden */ | ||
| aspect-ratio: 1; | ||
| width: 200px; /* Default width, can be overridden */ | ||
| scroll-snap-align: start; | ||
| flex: 0 0 auto; | ||
| } | ||
|
|
||
| ::slotted(img) { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| display: block; | ||
| } | ||
| ` | ||
| ]; | ||
| } | ||
|
|
||
| constructor() { | ||
| super(); | ||
| this.internals = this.attachInternals(); | ||
| this.internals.role = 'listitem'; | ||
| } | ||
|
|
||
| render() { | ||
| return html`<slot></slot>`; | ||
| } | ||
| } | ||
|
|
||
| customElements.define('md-carousel-item', CarouselItem); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| @@ -0,0 +1,45 @@ | ||||||||||||||||||||||||||||||||||||||||
| import { html, LitElement, css } from 'lit'; | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| /** | ||||||||||||||||||||||||||||||||||||||||
| * A Material 3 Carousel component. | ||||||||||||||||||||||||||||||||||||||||
| * | ||||||||||||||||||||||||||||||||||||||||
| * @element md-carousel | ||||||||||||||||||||||||||||||||||||||||
| */ | ||||||||||||||||||||||||||||||||||||||||
| export class Carousel extends LitElement { | ||||||||||||||||||||||||||||||||||||||||
| static get styles() { | ||||||||||||||||||||||||||||||||||||||||
| return [ | ||||||||||||||||||||||||||||||||||||||||
| css` | ||||||||||||||||||||||||||||||||||||||||
| :host { | ||||||||||||||||||||||||||||||||||||||||
| display: flex; | ||||||||||||||||||||||||||||||||||||||||
| overflow-x: auto; | ||||||||||||||||||||||||||||||||||||||||
| scroll-snap-type: x mandatory; | ||||||||||||||||||||||||||||||||||||||||
| gap: 8px; | ||||||||||||||||||||||||||||||||||||||||
| padding: 16px; | ||||||||||||||||||||||||||||||||||||||||
| scrollbar-width: none; /* Firefox */ | ||||||||||||||||||||||||||||||||||||||||
| -ms-overflow-style: none; /* IE/Edge */ | ||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+12
to
+20
Contributor
There was a problem hiding this comment. When using
Suggested change
|
||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| :host::-webkit-scrollbar { | ||||||||||||||||||||||||||||||||||||||||
| display: none; /* Chrome/Safari/Opera */ | ||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| ::slotted(*) { | ||||||||||||||||||||||||||||||||||||||||
| scroll-snap-align: start; | ||||||||||||||||||||||||||||||||||||||||
| flex: 0 0 auto; | ||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||
| ` | ||||||||||||||||||||||||||||||||||||||||
| ]; | ||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| constructor() { | ||||||||||||||||||||||||||||||||||||||||
| super(); | ||||||||||||||||||||||||||||||||||||||||
| this.internals = this.attachInternals(); | ||||||||||||||||||||||||||||||||||||||||
| this.internals.role = 'list'; | ||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||
|
Comment on lines
+34
to
+38
Contributor
There was a problem hiding this comment. The carousel container should be focusable to support keyboard navigation. Since scrollbars are hidden (lines 18-24), keyboard users rely on arrow keys to scroll the content, which requires the scrollable element to be focusable via
Suggested change
|
||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| render() { | ||||||||||||||||||||||||||||||||||||||||
| return html`<slot></slot>`; | ||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||
| } | ||||||||||||||||||||||||||||||||||||||||
|
|
||||||||||||||||||||||||||||||||||||||||
| customElements.define('md-carousel', Carousel); | ||||||||||||||||||||||||||||||||||||||||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,83 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Material 3 Carousel Demo</title> | ||
|
|
||
| <style> | ||
| body { | ||
| font-family: sans-serif; | ||
| padding: 24px; | ||
| margin: 0; | ||
| background-color: #f5f5f5; | ||
| } | ||
|
|
||
| h1 { | ||
| margin-bottom: 24px; | ||
| } | ||
|
|
||
| .container { | ||
| max-width: 800px; | ||
| margin: 0 auto; | ||
| background: white; | ||
| padding: 24px; | ||
| border-radius: 16px; | ||
| box-shadow: 0 4px 6px rgba(0,0,0,0.1); | ||
| } | ||
|
|
||
| md-carousel { | ||
| border: 1px solid #e0e0e0; | ||
| border-radius: 16px; | ||
| background-color: #fafafa; | ||
| } | ||
| </style> | ||
|
|
||
| <script type="importmap"> | ||
| { | ||
| "imports": { | ||
| "lit": "https://cdn.jsdelivr.net/npm/lit@3/index.js", | ||
| "lit/": "https://cdn.jsdelivr.net/npm/lit@3/", | ||
| "@lit/localize": "https://cdn.jsdelivr.net/npm/@lit/localize/lit-localize.js", | ||
| "@lit/reactive-element": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/reactive-element.js", | ||
| "@lit/reactive-element/": "https://cdn.jsdelivr.net/npm/@lit/reactive-element@1/", | ||
| "lit-element/lit-element.js": "https://cdn.jsdelivr.net/npm/lit-element@4/lit-element.js", | ||
| "lit-html": "https://cdn.jsdelivr.net/npm/lit-html@3/lit-html.js", | ||
| "lit-html/": "https://cdn.jsdelivr.net/npm/lit-html@3/", | ||
| "material/": "../" | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <script type="module"> | ||
| import 'material/carousel/carousel.js'; | ||
| import 'material/carousel/carousel-item.js'; | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="container"> | ||
| <h1>Material 3 Carousel</h1> | ||
|
|
||
| <md-carousel> | ||
| <md-carousel-item> | ||
| <img src="https://picsum.photos/400/400?random=1" alt="Random image 1"> | ||
| </md-carousel-item> | ||
| <md-carousel-item> | ||
| <img src="https://picsum.photos/400/400?random=2" alt="Random image 2"> | ||
| </md-carousel-item> | ||
| <md-carousel-item> | ||
| <img src="https://picsum.photos/400/400?random=3" alt="Random image 3"> | ||
| </md-carousel-item> | ||
| <md-carousel-item> | ||
| <img src="https://picsum.photos/400/400?random=4" alt="Random image 4"> | ||
| </md-carousel-item> | ||
| <md-carousel-item> | ||
| <img src="https://picsum.photos/400/400?random=5" alt="Random image 5"> | ||
| </md-carousel-item> | ||
| <md-carousel-item> | ||
| <img src="https://picsum.photos/400/400?random=6" alt="Random image 6"> | ||
| </md-carousel-item> | ||
| </md-carousel> | ||
| </div> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Consider using CSS custom properties for dimensions and styles like
border-radius,aspect-ratio, andwidth. This allows consumers to easily customize the carousel items to fit different Material 3 carousel types (e.g., hero, multi-browse, uncontained) without needing to override the entire component's styles.