list

El componente list se utiliza para renderizar conjuntos de datos en forma de lista. Es ideal para mostrar series de elementos como texto, imágenes, o cualquier otro tipo de contenido que necesite ser presentado en un formato secuencial. Además, ofrece la flexibilidad de personalizar cómo se renderiza cada elemento, asegurando que se adapte perfectamente a las necesidades específicas de tu aplicación.

Props

name

Indica el nombre de la lista

style

Propiedades:

backgroundColor: hexadecimal con el color de fondo.
borderBottomColor: hexadecimal con el color del border inferior.
borderRadius: indica el radio de los borders
borderBottomEndRadius: indica el número de radio que se debe aplicar al borde inferior
borderBottomLeftRadius: indica el número de radio que se debe aplicar al borde inferior izquierdo
borderBottomRightRadius: indica el número de radio que se debe aplicar al borde inferior derecho
borderBottomWidth: indica el tamaño del borde inferior
borderWidth: indica el ancho del borde
borderColor: indica el color del border en hexadecimal
borderRightColor: indica el color del borde derecho
borderRightWidth: indica el ancgi del borde derecho
borderStyle: indica el tipo de borde. enum(‘solid’, ‘dotted’, ‘dashed’)
padding: indica la distancia entre el borde del box y los elementos contenidos.
paddingHorizontal: indica la distancia horizontal del box y los elementos contenidos.
paddingVertical: indica la distancia vertical del box y los elementos contenidos.
border: indica la distancia entre el box y los elementos al rededor
margin: margen

Example

<screen>
  <meta>
    <header>List Example</header>
  </meta>
  <body>
    <list name="listRestaurants">
    <listitem>
        <box shadow="24" style="borderWidth: '1'; padding: '4'; borderColor: '#333'">
          <link to="/restaurant.xml?id=1">
            <text>Restaurant 1</text>
            <image
              uri="https://img.freepik.com/vector-gratis/restaurante-italiano-diseno-plano_23-2147560162.jpg"
              width="120"
              height="100"
              style="borderWidth='0'; borderColor='#000000'; borderRadius: 20"
              blurRadius="0"
              resizeMode="cover"
            />
          </link>
        </box>
      </listitem>
    </list>
  </body>
</screen>