List

import {List} from '@gravity-ui/uikit';

§ItemsHeight

Determina la altura de la lista de elementos (o una función que devuelve el valor de altura de una lista). Puede resultar útil a la hora de establecer la altura de la lista de forma dinámica, por ejemplo, (items: []) => number.

§Artículos

Proporciona una serie de elementos para una lista:

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} />

Un elemento puede ser un valor escalar o arbitrario y debe serlo truthy en cualquier caso. Si es un valor arbitrario, asegúrese de especificar las funciones de filtrado y representación. El renderizado predeterminado solo proporciona un elemento como texto.

El item.disabled campo especial desactiva un elemento.

La personalización del renderizado y la altura ofrece mucho espacio para experimentar. Por ejemplo, el código siguiente le permite emular grupos:

<List items={[{title: 'one', group: true,disabled: true}, {title: 'two'},
    {
      title: 'three',
      group: true,
      disabled: true,
    },
    {
      title: 'four',
    },
  ]} onItemClick={(value) => console.log(value)}
  renderItem={(item) => {
    if (item.group) {
      return (
        <div className={'group'}>
          <div className={'select-text'}>{item.title}</div>
        </div>
      );
    }
    return (
      <div className={'select'}>
        <div className={'select-text'}>{item.title}</div>
      </div>
    );
  }}
  itemHeight={(item) => (item.group ? 24 : 36)}
  itemsHeight={160}
  filterItem={(filter) => (item) => item.title.includes(filter)}
/>

§Filtrable

La filterable propiedad deshabilita la entrada para buscar un elemento si su valor es false. Su valor predeterminado es true.

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} filterable={false} />

§Clasificable

La sortable propiedad permite intercambiar elementos de la lista si su valor es true. Su valor predeterminado es false.

<List items={["one", "two", "three", "four", "five", "six", "seven"]} itemsHeight={160} sortable={true} />

§Virtualización

Para habilitar la virtualización, asegúrese de que se cumpla una de estas dos condiciones:

1. Tú configuras la itemsHeight propiedad. En este caso, la altura de la lista será fija e igual a ese valor.
2. Tú estableces el display: flex estilo del contenedor principal de la lista. En este caso, la lista se adaptará al ancho del contenedor.

§Gestión externa

En ocasiones, es posible que desee administrar la actividad de los elementos desde el teclado manteniendo el foco en un elemento externo. El reenvío del onKeyDown evento a una lista puede ayudarlo en este sentido. Del mismo modo, puedes reenviar onFocus y, onBlur si necesitas, repetir el comportamiento cuando se pierde un objeto activo.

§Filtrar

La filter propiedad proporciona el valor de filtro utilizado con la clasificación externa.

§PropTypes