Liaisons avancées / Dimensions • Svelte Tutorial

Svelte avancé Liaisons avancées Dimensions

Vous pouvez ajouter les liaisons clientWidth, clientHeight, offsetWidth et offsetHeight à n’importe quel élément, et Svelte mettra à jour les valeurs liées en utilisant un ResizeObserver :

App

<div bind:clientWidth={w} bind:clientHeight={h}>
	<span style="font-size: {size}px" contenteditable>{text}</span>
	<span class="size">{w} x {h}px</span>
</div>

Ces liaisons sont en lecture seule — si vous essayez de changer les valeurs de w et h, cela n’aura aucun effect sur l’élément.

Les éléments display: inline n’ont pas de largeur ou de hauteur (sauf les éléments ayant des dimensions “intrinsèques”, comme <img> et <canvas>), et ne peuvent pas être observés avec ResizeObserver. Vous devrez modifier le style display de ces éléments à une autre valeur, comme inline-block.

Modifier cette page sur Github

précédent suivant

Éléments media This

<script>

	let w = $state();

	let h = $state();

	let size = $state(42);

</script>

<label>

	<input type="range" bind:value={size} min="10" max="100" />

	taille de police({size}px)

</label>

<div>

	<span style="font-size: {size}px" contenteditable>

		éditer ce texte

	</span>

	<span class="size">{w} x {h}px</span>

</div>

<style>

	div {

		position: relative;

		display: inline-block;

		padding: 0.5rem;

		background: hsla(15, 100%, 50%, 0.1);

		border: 1px solid hsl(15, 100%, 50%);

	.size {

		position: absolute;

		right: -1px;

		bottom: -1.4em;

		line-height: 1;

		background: hsl(15, 100%, 50%);

		color: white;

		padding: 0.2em 0.5em;

		white-space: pre;

</style>

show text show editor