Space
A pesar de que tenemos Divider, a veces necesitamos más de un Divider para separar los elementos, así que se apila cada elemento en Divider, pero hacer esto no solo hace que nuestro código sea feo, sino que también hace difícil mantenerlo. Space es el tipo de componente que nos proporciona productividad y elegancia.
Uso básico
En este caso de uso básico usamos este componente para proporcionar espacio unificado entre los otros componentes
Distribución vertical
Use el atributo direction para controlar la dirección de diseño, usamos flex-direction para implementar esto.
Controla el tamaño del espacio
Controla el tamaño del espacio a través de la API con el atributo size.
Puede establecer el tamaño con los valores incorporados small, default, large, se corresponden con los siguientes valores 8px, 12px, 16px. El tamaño predeterminado es small, A.K.A. 8px
También puede usar un tamaño personalizado para sobreescribirlo. Consulte la siguiente parte.
Tamaño personalizado
A veces los tamaños incorporados pueden no satisfacer las necesidades de la empresa, podemos utilizar el tamaño personalizado (tipo número) para controlar el espacio entre los elementos.
TIP
No utilice ElSpace con componentes que dependen del ancho de los ancestros (altura), p. ej. ElSlider, en este caso cuando arrastra el botón disparador, la barra crecerá lo que causa un error de colocación entre el cursor y el botón disparador.
Auto wrapping
En el modo horizontal, use wrap (bool) para controlar el comportamiento de wrapping automático.
Espaciador
A veces queremos algo más que espacio en blanco, así que tenemos (espaciador) para ayudarnos.
Espacio de tipo literal
El espaciador también puede ser VNode
Alineamiento
Configurando este atributo puede ajustar la alineación de nodos secundarios, el valor deseable puede encontrarse en align-items.
Rellenar el contenedor
A través del parámetro fill (tipo booleano), puede controlar si el nodo hijo rellenará automáticamente el contenedor.
En el siguiente ejemplo, cuando se establece fill, el ancho del nodo hijo se adaptará automáticamente al ancho del contenedor.
También puede utilizar el parámetro fillRatio para personalizar el ratio de relleno. El valor predeterminado es 100, lo que representa el relleno basado en el ancho del contenedor padre en 100%.
Cabe señalar que la expresión del diseño horizontal y el diseño vertical es ligeramente diferente, el efecto específico se puede ver en el ejemplo siguiente.
API
Atributos
| Nombre | Descripción | Tipo | Por defecto |
|---|---|---|---|
| alignment | Controla la alineación de elementos | enum align-items | center |
| class | Nombre de la clase | string / object / array | — |
| direction | Dirección de emplazamiento | enum | horizontal |
| prefixCls | Prefijo para espacio-elementos | string | — |
| style | Reglas de estilo extra | string / object | — |
| spacer | Espaciador | string / number / VNode | — |
| size | Tamaño del espacio | enum / number / array | small |
| wrap | Auto wrapping | boolean | false |
| fill | Si rellenar el contenedor | boolean | false |
| fill-ratio | Ratio de relleno | number | 100 |
Slots
| Nombre | Descripción |
|---|---|
| default | Elementos a ser espaciados |
三咲智子
jeremywu
kooriookami
云游君
Xc
Hefty
zz
qiang
otto
MonsterPi
Delyan Haralanov
bqy
sea
啝裳
C.Y.Kun
0song