https://github.com/arumi-s/svelte-scaled-view
https://github.com/arumi-s/svelte-scaled-view
resize-observer svelte sveltekit
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/arumi-s/svelte-scaled-view
- Owner: arumi-s
- License: mit
- Created: 2023-05-03T22:02:35.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-23T08:53:57.000Z (about 2 years ago)
- Last Synced: 2025-02-28T05:26:38.186Z (over 1 year ago)
- Topics: resize-observer, svelte, sveltekit
- Language: Svelte
- Homepage:
- Size: 95.7 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Svelte Scaled View Library
[](https://www.npmjs.com/package/svelte-scaled-view)
Svelte Scaled View provides a component called "ScaledView" that allows you to scale the content within it to fit its parent element using one of three strategies (contain, cover, and fill). It also allows you to clamp the scale ratio using an optional min and max prop.
## Usage
### Install
First, install the library in your Svelte project from npm:
```bash
npm install svelte-scaled-view
```
### Include
Then, add it to your project:
```typescript
import ScaledView from 'svelte-scaled-view';
```
### Basic
Once included, you can now use the ScaledView component in your project:
```svelte
My content to be scaled
```
In the above example, the `fit` prop is set to `contain`, which will scale the content to fit the parent element while maintaining its aspect ratio.
You can also choose to use other scaling methods like `cover` and `fill`:
```svelte
My content to be scaled
```
In this case, the content will be scaled to cover its parent element while maintaining of aspect ratio.
Or you can use `fill` to scale the content to fill its parent element, regardless of aspect ratio:
```svelte
My content to be scaled
```
### Advanced
You may also pass in a `min` and `max` value to set a minimum and maximum scale ratio.
```svelte
My content to be scaled
```
Retrieve the scale factors.
```svelte
this element is scaled by x:{scaleX} and y:{scaleY}
```