conocimiento de fondo:
1. Componentes del diseño:
Un componente de diseño es un componente que se utiliza para organizar y organizar otros componentes en una interfaz de usuario. Proporcionan una forma sencilla de controlar y gestionar la posición, el tamaño y la jerarquía de los componentes de una página. Los componentes de diseño pueden ser contenedores que pueden contener otros componentes y determinar cómo se muestran en la interfaz. Los componentes de diseño comunes incluyen componentes de diseño de contenedor, componentes de diseño de cuadrícula, componentes de diseño de caja, componentes de diseño de borde, componentes de diseño de flujo, etc.
2. Contenedor:
El contenedor es el elemento principal designado como diseño flexible, que se define mediante el atributo display:flex o display:inline-flex. Los elementos secundarios de un contenedor se distribuyen según las reglas del contenedor.
El componente FreeContainer es un componente de diseño integral, que se puede utilizar para realizar operaciones de diseño vertical y horizontal, y proporciona diseños de aumento dinámico vertical y horizontal para completar módulos con diseños consistentes de una manera más eficiente.
1. Cómo utilizar
1. Inicie sesión en Código corto
Si no tiene una cuenta, haga clic para obtener una cuenta gratuita: http://dev.gemcoder.com/front/development/index.html#/officialLogin?jm=cmVnaXN0ZXI9dHJ1ZQ%3D%3D
2. Crea aplicaciones y páginas.
3. Busque el componente FreeContainer, arrástrelo y suéltelo en la posición de la página.
4. Seleccione el método de diseño (el valor predeterminado es diseño elástico) y arrastre otros componentes.
2. Propiedades de los componentes
Las propiedades del componente FreeContainer son:
3. Escenarios de aplicación : diseño libre de componentes
1. Coloque los componentes en el contenedor vertical u horizontalmente.
Efecto:
Configuración:
2. Establezca el salto de línea del componente de texto en el contenedor.
Efecto:
Configuración:
3. Establezca el espacio entre filas y columnas dentro del contenedor.
Efecto:
Configuración:
4. Hay 5 disposiciones en la dirección de la fila para controlar la posición horizontal del contenido del contenedor/controlar la alineación de las columnas.
Efecto: OK
efecto: columna
Configuración:
5. Cambia el estilo de fondo.
Efecto:
configuración:
6. Uso colaborativo con otros componentes
Se utiliza para agregar un componente FreeContainer con un diseño de columnas consistente en el mismo nivel
Efecto:
