Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

158
Views
Activa una función js en el cambio de orientación dentro de svelte:body

Quiero mostrar un mensaje con un fondo negro siempre que la orientación de la ventana gráfica esté en modo vertical en esbelto.

Usé svelte-viewport-info para obtener la orientación de la ventana gráfica.

 <script lang="ts"> import Viewport from 'svelte-viewport-info' console.log('standard Screen Orientation: ',Viewport.Orientation) </script> <svelte:body on:orientationchangeend={() => { console.log( 'Screen Orientation changed to: ', Viewport.Orientation + ( Viewport.detailledOrientation == null ? '' : '(' + Viewport.detailledOrientation + ')' ) ) }} />

Quiero cambiar la propiedad de display de un div

  • Cuando está en landscape mode , la display se establece en none
  • Cuando está en portrait mode , la display está configurada para block

Encontré una sintaxis js para llamar a la función después de un cierto intervalo de tiempo

 var test = 0; var interval; function check_test() { if( test == 1 ){ clearInterval( interval ); console.log( "Test is 1 now!" ); } } interval = window.setInterval( check_test, 1000 );

Entonces, dentro de esta función anterior que se llama cada 1000 milisegundos/1 segundo.

Encontré una sintaxis para usar la declaración if en esbelta aquí en #template-syntax-if

¿Cómo realizo todo esto en esbelto? Es confuso.

  1. Tengo que llamar repetidamente a la función usando window.setInterval después de cierto intervalo
  2. La función necesita verificar la orientación de la ventana gráfica desde : final de cambio de orientación dentro de esbelto: cuerpo
  3. Use if in svelte para establecer la propiedad de visualización de un div en bloque o ninguno, según la orientación de la ventana gráfica del paso 2
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

De los documentos svelte-viewport-info

Clases de CSS Además, el paquete también agrega o elimina las siguientes clases de CSS según la orientación actual del dispositivo:
Retrato : indica que el dispositivo se encuentra actualmente en cualquier orientación "Retrato"
Horizontal : indica que el dispositivo se encuentra actualmente en cualquier orientación "Horizontal"

Por lo tanto, ni siquiera tiene que rastrear ningún evento, simplemente puede usar estas clases para cambiar la visualización del div >> REPL
(El compilador no ve ningún elemento con las clases Landscape y Portrait , por lo que se debe agregar el modificador :global() para que se compilen)

 <script context="module"> import Viewport from 'svelte-viewport-info' </script> <div class="only-portrait"> only visible in Portrait Mode </div> <style> :global(.Landscape .only-portrait) { display: none; } :global(.Portrait .only-portrait) { display: block; background: black; color: white; padding: 2rem; } </style>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!