js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove responsive media

Browse Source
This commit is contained in:
Cory LaViska
2022-08-26 10:43:12 -04:00
parent bb55c93b1a
commit 7cc2c89f92
6 changed files with 3 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/_sidebar.md
View File

@@ -80,7 +80,6 @@
- [Popup](/components/popup)
- [Relative Time](/components/relative-time)
- [Resize Observer](/components/resize-observer)
- [Responsive Media](/components/responsive-media)
- [Visually Hidden](/components/visually-hidden)
- Design Tokens

91
docs/components/responsive-media.md
View File

@@ -1,91 +0,0 @@
# Responsive Media
[component-header:sl-responsive-media]
Displays media in the desired aspect ratio.
You can slot in any [replaced element](https://developer.mozilla.org/en-US/docs/Web/CSS/Replaced_element), including `<iframe>`, `<img>`, and `<video>`. As the element's width changes, its height will resize proportionally. Only one element should be slotted into the container. The default aspect ratio is `16:9`.
```html preview
<sl-responsive-media>
<img
src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
alt="A train riding through autumn foliage with mountains in the distance."
/>
</sl-responsive-media>
```
```jsx react
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlResponsiveMedia>
<img
src="https://images.unsplash.com/photo-1541427468627-a89a96e5ca1d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
alt="A train riding through autumn foliage with mountains in the distance."
/>
</SlResponsiveMedia>
);
```
## Examples
### Responsive Images
The following image maintains a `4:3` aspect ratio as its container is resized.
```html preview
<sl-responsive-media aspect-ratio="4:3">
<img
src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
alt="Two blue chairs on a sandy beach."
/>
</sl-responsive-media>
```
```jsx react
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlResponsiveMedia aspect-ratio="4:3">
<img
src="https://images.unsplash.com/photo-1473186578172-c141e6798cf4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1800&q=80"
alt="Two blue chairs on a sandy beach."
/>
</SlResponsiveMedia>
);
```
### Responsive Videos
The following video is embedded using an `iframe` and maintains a `16:9` aspect ratio as its container is resized.
```html preview
<sl-responsive-media aspect-ratio="16:9">
<iframe
title="Video of the kittens"
src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
></iframe>
</sl-responsive-media>
```
```jsx react
import { SlResponsiveMedia } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<SlResponsiveMedia aspect-ratio="16:9">
<iframe
title="Video of the kittens"
src="https://player.vimeo.com/video/1053647?title=0&byline=0&portrait=0"
frameborder="0"
allow="autoplay; fullscreen"
allowfullscreen
/>
</SlResponsiveMedia>
);
```
[component-metadata:sl-responsive-media]

3
docs/resources/changelog.md
View File

@@ -10,6 +10,9 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
## Next
This release removes the `<sl-responsive-media>` component. When this component was introduced, support for [`aspect-radio`](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio)) wasn't great. These days, [the property is supported](https://caniuse.com/mdn-css_properties_aspect-ratio) by all of Shoelace's target browsers, making a dedicated component redundant.
- 🚨 BREAKING: Removed `<sl-responsive-media>` (use the well-supported `aspect-ratio` CSS property instead)
- Added an expand/collapse animation to `<sl-tree-item>`
- Added `sl-lazy-change` event to `<sl-tree-item>`
- Fixed a bug in `<sl-popup>` that didn't account for the arrow's diagonal size