UDScalable

Las experiencias virtuales de aprendizaje están conducidas por el desarrollo web, ya que estás son, por lo general, reproducidas a través de un navegador. Esto implica que el diseño de estas experiencias estén pensadas para que sean adaptativos. El diseño adaptativo es aquel, donde los componentes se re-estructuran de acuerdo al ancho de la pantalla, procurando mantener los mismos tamaños, tanto de tipo de fuente, como de elementos que acompañan.

Sin embargo, en ocasiones es necesario que la distribución de los elementos se mantengan sin importar el ancho de la pantalla, y se prefiere que estos se escalen (disminuyan su tamaño en proporción a los demás elementos), a esto se le conoce como diseño escalable.

El componente <UDScalable> permite crear un contenedor, de acuerdo a las dimensiones especificadas (con las propiedades width y height) que escalará su contenido si perder la distribución del mismo, como se vé en el siguiente ejemplo (Cambie el tamaño de la pantalla o ventana del navegador para ver su funcionamiento):

Para hacer la implementación de este componente, basta con usar una etiqueta <UDScalable> como etiqueta padre, especificando las propiedades widht y height (que será el área de escalamiento), y dentro de esta los elementos que se pretenden escalar, tal como lo vemos en el siguiente ejemplo:

import React from 'react';
import { render } from 'react-dom';
import { UDScalable } from 'unc-react-creator';

import './assets/css/default.styl';
import './assets/css/C02.styl';
import 'animate.css/animate.min.css';
import 'bootstrap/dist/css/bootstrap.min.css';

const App = () => (
  <UDScalable width={500} height={500} fullHeight>
    <div
      className='unc-circle'
      style={{ backgroundColor: 'red', left: 100, top: 100 }}
    />
    <div
      className='unc-circle'
      style={{ backgroundColor: 'blue', left: 200, top: 100 }}
    />
    <div
      className='unc-circle'
      style={{ backgroundColor: 'green', left: 100, top: 200 }}
    />
    <div
      className='unc-circle'
      style={{ backgroundColor: 'orange', left: 200, top: 300 }}
    />
  </UDScalable>
);

render(
  <App />,
  document.getElementById('app')
);