kopia lustrzana https://github.com/shoelace-style/shoelace
remove responsive media
Cory LaViska
rodzic
bb55c93b1a
commit
7cc2c89f92
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,36 +0,0 @@
|
|||
import { css } from 'lit';
|
||||
import componentStyles from '../../styles/component.styles';
|
||||
|
||||
export default css`
|
||||
${componentStyles}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.responsive-media {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.responsive-media ::slotted(*) {
|
||||
position: absolute !important;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.responsive-media--cover ::slotted(embed),
|
||||
.responsive-media--cover ::slotted(iframe),
|
||||
.responsive-media--cover ::slotted(img),
|
||||
.responsive-media--cover ::slotted(video) {
|
||||
object-fit: cover !important;
|
||||
}
|
||||
|
||||
.responsive-media--contain ::slotted(embed),
|
||||
.responsive-media--contain ::slotted(iframe),
|
||||
.responsive-media--contain ::slotted(img),
|
||||
.responsive-media--contain ::slotted(video) {
|
||||
object-fit: contain !important;
|
||||
}
|
||||
`;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
import { html } from 'lit';
|
||||
import { customElement, property } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import ShoelaceElement from '../../internal/shoelace-element';
|
||||
import styles from './responsive-media.styles';
|
||||
import type { CSSResultGroup } from 'lit';
|
||||
|
||||
/**
|
||||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
* @slot - The element to receive the aspect ratio. Should be a replaced element, such as `<img>`, `<iframe>`, or `<video>`.
|
||||
*/
|
||||
@customElement('sl-responsive-media')
|
||||
export default class SlResponsiveMedia extends ShoelaceElement {
|
||||
static styles: CSSResultGroup = styles;
|
||||
|
||||
/**
|
||||
* The aspect ratio of the embedded media in the format of `width:height`, e.g. `16:9`, `4:3`, or `1:1`. Ratios not in
|
||||
* this format will be ignored.
|
||||
*/
|
||||
@property({ attribute: 'aspect-ratio' }) aspectRatio = '16:9';
|
||||
|
||||
/** Determines how content will be resized to fit its container. */
|
||||
@property() fit: 'cover' | 'contain' = 'cover';
|
||||
|
||||
render() {
|
||||
const split = this.aspectRatio.split(':');
|
||||
const x = parseFloat(split[0]);
|
||||
const y = parseFloat(split[1]);
|
||||
const paddingBottom = !isNaN(x) && !isNaN(y) && x > 0 && y > 0 ? `${(y / x) * 100}%` : '0';
|
||||
|
||||
return html`
|
||||
<div
|
||||
class=${classMap({
|
||||
'responsive-media': true,
|
||||
'responsive-media--cover': this.fit === 'cover',
|
||||
'responsive-media--contain': this.fit === 'contain'
|
||||
})}
|
||||
style="padding-bottom: ${paddingBottom}"
|
||||
>
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sl-responsive-media': SlResponsiveMedia;
|
||||
}
|
||||
}
|
||||
|
|
@ -39,7 +39,6 @@ export { default as SlRange } from './components/range/range';
|
|||
export { default as SlRating } from './components/rating/rating';
|
||||
export { default as SlRelativeTime } from './components/relative-time/relative-time';
|
||||
export { default as SlResizeObserver } from './components/resize-observer/resize-observer';
|
||||
export { default as SlResponsiveMedia } from './components/responsive-media/responsive-media';
|
||||
export { default as SlSelect } from './components/select/select';
|
||||
export { default as SlSkeleton } from './components/skeleton/skeleton';
|
||||
export { default as SlSpinner } from './components/spinner/spinner';
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue