0
257
Views¿Cómo puedo crear vistas más y hacer que mi palabra esté en la misma línea?
Tengo un problema con css que mi "Descripción de la habitación" se está dividiendo en 2 líneas.
Cuando agrego white-space: nowrap se vuelve así:
Aquí está mi base de código:
<span className="room-type mv-print-link"> {this.props.waitlistRooms.map((room: any, i: any) => ( <div> {this.props.waitlistRooms.length > 0 ? && <span onClick={() => this.toggleRoomModal(resortId || "", room.roomPoolCode)} key={i} > <b>{"Room Description, "}</b> </span> ) </div> ))}archivo css:
.room-type-container display: flex flex-direction: column margin-bottom: 15px .room-type display: flex flex-direction: row flex-shrink: 0 width: 300px¿Cómo puedo lograr cuando hay más de 3 habitaciones y aparecerá el botón Ver más? Gracias por ayudarme
1 answers
Answer question0
entonces el mecánico que quieres debería funcionar así:
- cuando tenga solo 3 (o cualquier otra habitación predeterminada), simplemente muéstrelas. digamos que tiene una lista de habitaciones, así que algo como:
{roomsList.map((room) => <span>{room.name}: {room.description})}ahora, si tiene más habitaciones que el número predeterminado (3 en nuestro caso), desea renderizar también el resto, pero fuera de la vista. Para lograr esto, debe hacer lo siguiente:
- divida su matriz en 2: primeros 3 elementos, resto de elementos.
- renderiza la primera matriz.
- si la longitud de la segunda matriz es mayor que 0, renderice un botón 'Ver más' usando react-collapsible (lo que hace que el comportamiento colapsable que desee) y dentro de él renderice el resto de las habitaciones.
en un ejemplo rápido debería verse algo como esto:
//after splitting the array you will have: const roomsArray1 = [{name:' roomA', description: 'niceA'},{name:' roomB', description: 'niceB'},{name:' roomC', description: 'niceC'} const roomsArray2 = [{name:' roomD', description: 'niceD'},{name:' roomE', description: 'niceE'}]; {roomsArray1.map((room) => <span>{room.name}: {room.description})</span>} {roomsArray2.length > 0 && <Collapsible trigger="View More"> {roomsArray2.map((room) => <span>{room.name}: {room.description})</span>} </Collapsible>Puedes añadir estilos a tu gusto (espacios, colores, etc.)
De esta manera, solo mostrará solo una parte de las habitaciones, y al hacer clic en el botón 'Ver más', aparecerán más.