es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Cómo mostrar las cuadrículas secundarias dentro de la cuadrícula contenedora en la línea siguiente, manteniendo el espacio y ajustando la cuadrícula según el texto.

Cómo mostrar las cuadrículas secundarias dentro de la cuadrícula contenedora en la línea siguiente, manteniendo el espacio y ajustando la cuadrícula según el texto.

02 Aug, 2023 Programación

A continuación, el componente contiene una cuadrícula principal en la que se encuentran presentes otras 2 cuadrículas secundarias. Estaba intentando implementar una interfaz de chat codificada y también he intentado usar propiedades sm y md, pero esto descarta la característica de la cuadrícula de envolver según el contenido de texto en ella. El uso de las propiedades sm y md hace que la cuadrícula tenga un ancho constante que puede no estar completamente lleno con el texto, ya que la longitud del texto sigue cambiando.

export const Chats = () => {
  return (
    <>
      <grid container="" display="{"wrap"}" justifycontent="{"space-between"}">
        <grid style="{{" backgroundcolor:="" "white",="" padding:="" "10px",="" margintop:="" "100px",="" borderradius:"10px"="" }}="">
          <box>
            <typography>This is message 1 </typography>
          </box>
        </grid>
        <grid style="{{" backgroundcolor:="" "#e3f6cb",="" padding:="" "10px",="" margintop:="" "100px",="" borderradius:"10px"="" }}="">
          <typography>This is message 2</typography>
        </grid>

      </grid>

  );
};
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    A medida que la longitud del texto cambia, el ancho constante del conjunto de cuadrícula utilizado con las propiedades “sm” y “md” no envuelve el texto como se espera. En su lugar, podemos usar la propiedad flex-grow del componente Grid para hacer que llene los espacios vacíos disponibles. Así es cómo podemos modificar el código para lograr esto:

    export const Chats = () => {
  return (
    <>
      <grid container="" display="{"wrap"}" justifycontent="{"space-between"}">
        <grid style="{{" backgroundcolor:="" "white",="" padding:="" "10px",="" margintop:="" "100px",="" borderradius:="" "10px",="" flexgrow:="" 1,="" agregar="" esta="" propiedad="" }}="">
          <box>
            <typography>Este es el mensaje 1</typography>
          </box>
        </grid>
        <grid style="{{" backgroundcolor:="" "#e3f6cb",="" padding:="" "10px",="" margintop:="" "100px",="" borderradius:="" "10px",="" flexgrow:="" 1,="" agregar="" esta="" propiedad="" }}="">
          <typography>Este es el mensaje 2</typography>
        </grid>

      </grid>

  );
};

    Aquí, hemos agregado flexGrow: 1 a ambos componentes Grid. Esto hará que crezcan y ocupen el espacio disponible de manera equitativa.

Comments are closed.