1 00:00:02,300 --> 00:00:07,270 Para diseñar los elementos separados, volveré a crear un componente separado y 2 00:00:07,350 --> 00:00:11,620 lo nombraré elemento de comida. js, el nombre, 3 00:00:11,640 --> 00:00:15,320 como siempre, depende totalmente de ti y, allí, 4 00:00:15,320 --> 00:00:18,200 conoces el juego, creamos un componente 5 00:00:18,440 --> 00:00:25,360 React importando React, probablemente también necesitemos ver, texto y hoja de estilo y quizás 6 00:00:25,460 --> 00:00:32,610 también algunas otras cosas de React Native. Luego configuramos el componente, elemento de comida, donde recibimos los accesorios 7 00:00:32,610 --> 00:00:38,010 y al final devolvemos algo de jsx. Configure una hoja de estilos aquí, almacénela en una constante de estilos con la creación de 8 00:00:38,010 --> 00:00:46,090 la hoja de estilos a la que le pasamos un objeto y, al final, exportamos nuestro elemento de comida aquí como el archivo predeterminado. Ahora con eso aquí, en el elemento de comida, en este componente, 9 00:00:46,090 --> 00:00:48,100 por supuesto, necesitamos devolver un 10 00:00:48,100 --> 00:00:54,040 código jsx para ese elemento de comida y eso es algo que obtengo de la pantalla de categoría 11 00:00:54,040 --> 00:00:55,750 de comida. Ahí tengo 12 00:00:55,810 --> 00:01:02,260 esta vista con mi texto aquí, eso es al final lo que quiero que salga, un poco más complejo que eso, pero lo 13 00:01:02,710 --> 00:01:07,150 cortaré desde allí y lo moveré al elemento de comida y allí, devolveré esta vista aquí 14 00:01:07,150 --> 00:01:12,380 pero de Por supuesto que no hemos terminado con eso. Por un lado, esto también debería ser 15 00:01:12,380 --> 00:01:17,390 tocable porque podemos seleccionar una comida, podemos seleccionar dicha receta para llevarla a la 16 00:01:17,390 --> 00:01:21,010 pantalla de detalles, por lo que importaré la opacidad táctil. 17 00:01:21,020 --> 00:01:25,910 Ahora, por supuesto, podría hacer esa diferenciación y usar el efecto dominó con retroalimentación 18 00:01:25,970 --> 00:01:27,880 nativa táctil en Android 19 00:01:27,920 --> 00:01:35,270 si lo desea, iré con opacidad táctil por ahora y envolveré mi vista aquí con opacidad táctil, así para que podamos De 20 00:01:35,420 --> 00:01:44,350 hecho, toque nuestro elemento aquí y en Press, de hecho, quiero activar una función que espero obtener en una propiedad que aún no estamos pasando al elemento 21 00:01:44,350 --> 00:01:49,000 de comida, pero porque todavía no estamos usando el elemento de comida en ninguna 22 00:01:49,000 --> 00:01:54,460 parte, pero lo haré pase en el futuro, tal vez lo llamemos en una comida selecta 23 00:01:54,460 --> 00:02:00,820 o simplemente en Select, lo que quiera, lo nombraré en SelectMeal y espero obtener ese accesorio en el artículo 24 00:02:00,820 --> 00:02:06,950 de la comida cuando luego lo usemos en jsx. Esa es la opacidad que se puede tocar, 25 00:02:08,790 --> 00:02:16,050 allí tengo mi punto de vista con el título y, en realidad, esa vista debería ser un poco más compleja que eso. 26 00:02:16,740 --> 00:02:24,150 Quiero tener una vista, una vista anidada como esta y otra vista debajo de eso, así que quiero 27 00:02:24,180 --> 00:02:25,530 tener dos filas. 28 00:02:25,530 --> 00:02:31,060 Esto se configurará como una columna, pero estas dos vistas aquí se configurarán como filas aquí. 29 00:02:31,230 --> 00:02:38,280 La primera vista también debe representar una imagen de fondo, de modo que el título se encuentre frente a 30 00:02:38,310 --> 00:02:39,130 esta imagen 31 00:02:39,180 --> 00:02:44,730 de fondo, la segunda vista, la segunda fila aquí debe mostrar algunos detalles sobre la 32 00:02:44,730 --> 00:02:47,270 receta seleccionada, como su complejidad y duración. 33 00:02:50,190 --> 00:02:55,530 Entonces, comencemos con eso antes de agregar más tarde la imagen, en ambas vistas, por 34 00:02:55,560 --> 00:03:00,660 lo tanto, agregaré la propiedad de estilo y apuntaré a la fila de comidas 35 00:03:03,050 --> 00:03:08,860 de estilos o lo que quieras nombrar porque será una fila en mi presentación de comidas aquí 36 00:03:10,030 --> 00:03:18,140 y yo Por lo tanto, agregaré la fila de comida allí y estableceré la dirección de flexión aquí en fila, por supuesto, ya 37 00:03:18,140 --> 00:03:23,150 que deberían ser filas de datos. Ahora, en torno al elemento 38 00:03:23,170 --> 00:03:27,290 general aquí, envolveré otra vista donde quiero configurar un estilo 39 00:03:30,050 --> 00:03:34,850 general de estilo de elemento de comida y elemento de comida, 40 00:03:34,850 --> 00:03:40,670 que también se configura aquí en la hoja de estilos, por supuesto, y allí quiero 41 00:03:40,700 --> 00:03:46,940 dar un alto a cada comida de 200 digamos, cada elemento en la lista aquí y 42 00:03:46,940 --> 00:03:55,390 un ancho del 100% para tomar el ancho completo disponible y también tal vez un color de fondo de este aspecto 43 00:03:55,430 --> 00:04:00,570 grisáceo, podemos ver si queremos mantener eso, por ahora voy a usa eso. 44 00:04:00,810 --> 00:04:04,770 Ahora podemos usar el elemento de comida aquí y aún no hemos 45 00:04:04,770 --> 00:04:14,560 terminado con él, pero podemos comenzar a usarlo aquí en la pantalla de categoría de comidas importándolo, importando elemento de comida desde la carpeta de componentes y allí, desde 46 00:04:14,560 --> 00:04:25,230 el archivo de elementos de comida y luego renderice esto aquí, así que devuelva el elemento de comida de esta manera y, por supuesto, ahora tenemos que pasar algunos datos, datos como 47 00:04:25,230 --> 00:04:32,010 el título que obtenemos de itemData. articulo. título y el accesorio onSelect que 48 00:04:32,010 --> 00:04:38,850 espero obtener en el elemento de comida que al final conectamos al accesorio onPress de opacidad táctil, onSelectMeal, 49 00:04:38,850 --> 00:04:42,840 ese fue el nombre que elegí, eso también es algo que 50 00:04:42,840 --> 00:04:44,030 necesitamos configurar 51 00:04:44,070 --> 00:04:46,820 aquí cuando usamos la comida y esto 52 00:04:46,830 --> 00:04:51,330 debería apuntar a una función que por ahora no hace nada pero 53 00:04:51,330 --> 00:04:55,090 que luego cargará la página de detalles para esa comida. 54 00:04:55,110 --> 00:05:00,300 Así que ahora obtenemos el título en el accesorio de título, de ahí el elemento de comida, aquí cuando sacamos el título lo hacemos con la 55 00:05:00,300 --> 00:05:01,590 ayuda de accesorios. título. 56 00:05:01,740 --> 00:05:09,260 Si ahora guardamos esto, deberíamos poder ver algo aquí, así que esperemos a que se vuelva a cargar y sí, 57 00:05:09,260 --> 00:05:10,580 vemos nuestra comida 58 00:05:10,580 --> 00:05:16,730 aquí y ciertamente no es demasiado hermosa, pero al menos, vemos un poco más que antes. 59 00:05:16,730 --> 00:05:21,620 Ahora, lo que me gustaría tener aquí es un poco de espacio alrededor de la lista, pero dentro 60 00:05:21,710 --> 00:05:26,930 del espacio, el elemento de la lista debe ocupar todo el ancho disponible y no solo el ancho del elemento 61 00:05:26,930 --> 00:05:28,850 más ancho que actualmente está sucediendo. 62 00:05:29,090 --> 00:05:35,800 Y para eso, podemos ir a la FlatList y allí, agregar la propiedad de estilo y establecer este ancho al 100% para 63 00:05:35,810 --> 00:05:39,470 asegurarnos de que la FlatList tome todo el ancho que pueda obtener. 64 00:05:39,470 --> 00:05:42,020 Con eso, deberíamos tener que mirar lo que queremos aquí. 65 00:05:42,290 --> 00:05:44,710 Ahora, por supuesto, los artículos de comida no están listos, no se ven 66 00:05:44,720 --> 00:05:51,380 como yo quiero que se vean, aunque también llegamos lentamente allí. Ahora en el MealItem. js, todavía nos queda mucho 67 00:05:51,380 --> 00:05:53,680 trabajo por hacer, por ejemplo, esta vista 68 00:05:53,690 --> 00:05:59,840 aquí con el título también tendrá la imagen y, por lo tanto, debería ser mucho más grande que 69 00:05:59,840 --> 00:06:03,960 la fila debajo de ella, que luego solo mostrará algunos detalles. 70 00:06:05,500 --> 00:06:18,310 Por lo tanto, aquí, fusionaré mis estilos de fila de comida con otro objeto de estilo, por lo que con el estilo configurado en otro objeto de hoja de 71 00:06:18,350 --> 00:06:26,530 estilo que nombraré encabezado de comida o lo que quieras nombrar y lo mismo allí por cierto para los 72 00:06:26,530 --> 00:06:29,090 detalles al final, fusionaré esto con 73 00:06:29,110 --> 00:06:36,920 los detalles de comidas de estilos, para que tengamos estilos combinados y comencemos con el encabezado de 74 00:06:36,920 --> 00:06:39,470 comidas que podemos configurar aquí. 75 00:06:39,470 --> 00:06:47,090 El encabezado de la comida al final contendrá la imagen y también el título y quiero que la altura de 76 00:06:47,410 --> 00:06:49,580 esto sea, digamos el 80% 77 00:06:49,580 --> 00:06:59,550 de la altura disponible, por lo que esto debería ser muy, muy grande. Por lo tanto, los detalles de la comida obtendrán automáticamente el 20% restante, 78 00:06:59,550 --> 00:07:07,470 y para ver si eso funciona, proporcionemos algunos detalles aquí, así que en esa vista aquí, en esa fila debajo 79 00:07:07,470 --> 00:07:10,020 de nuestra fila del título, también 80 00:07:10,020 --> 00:07:13,420 quiero tener algo de texto aquí y allá. Saldremos, 81 00:07:13,440 --> 00:07:21,920 digamos, la duración de los accesorios y luego m de allí en adelante, durante minutos porque m duración será un número que 82 00:07:21,920 --> 00:07:23,330 trataremos como minutos. 83 00:07:23,330 --> 00:07:27,740 Solo necesitamos pasar la duración de la pantalla de comidas de categoría, por supuesto, así 84 00:07:27,740 --> 00:07:33,140 que cuando usamos el elemento de comida, además de pasar un título, estableceré el accesorio de duración porque ahora esperamos 85 00:07:33,140 --> 00:07:34,940 esto en el elemento de comida. 86 00:07:34,940 --> 00:07:40,700 Obtenemos esto de itemData. artículo que es nuestra comida y allí, tendremos una propiedad 87 00:07:40,760 --> 00:07:45,630 de duración porque nuestras comidas como se define en el modelo aquí tienen una propiedad de duración y, 88 00:07:45,800 --> 00:07:50,690 de hecho, si echa un vistazo a los datos ficticios, esta es su duración que se alimenta . 89 00:07:54,760 --> 00:07:56,560 Si guardamos esto, 90 00:07:56,560 --> 00:08:06,850 ahora vemos nuestra duración allí y, de hecho, todavía podemos cambiar esa altura aquí al 90%, debería ser más alta de lo que estaba 91 00:08:06,910 --> 00:08:09,420 aquí, eso se ve mejor y, 92 00:08:09,430 --> 00:08:10,630 por supuesto, 93 00:08:10,750 --> 00:08:14,830 también puede experimentar con esto. En la fila de 94 00:08:14,830 --> 00:08:22,680 detalles de la comida, también quiero tener algo de relleno horizontal, así que a la izquierda y a la derecha de 95 00:08:22,690 --> 00:08:32,650 digamos 10 y justifique mi contenido aquí con un espacio intermedio, tenga en cuenta que es una fila para que esto lo justifique horizontalmente, de modo que 96 00:08:32,650 --> 00:08:35,690 cuando tengamos múltiples elementos, estarán bien distribuidos allí. 97 00:08:35,740 --> 00:08:45,740 Así que tenemos 20 minutos, produzcamos más información agregando otro texto y allí, generemos 98 00:08:45,900 --> 00:08:47,030 la 99 00:08:47,030 --> 00:08:53,140 complejidad, así que aquí generaré complejidad y, a 100 00:08:53,140 --> 00:09:01,950 partir de entonces, generaré la asequibilidad. Ahora solo tenemos que pasar esos datos también al crear nuestro artículo de comida. 101 00:09:01,990 --> 00:09:06,460 Entonces, además de la duración, pasamos la 102 00:09:06,460 --> 00:09:16,420 complejidad que obtenemos aquí, itemData. articulo. complejidad y asequibilidad, eso es, por supuesto, 103 00:09:16,430 --> 00:09:18,530 itemData. articulo. asequibilidad, así 104 00:09:18,740 --> 00:09:28,910 y si guardamos esto y dejamos que esto se vuelva a procesar, ahora vemos esta salida aquí. Todavía no es súper hermoso y definitivamente podemos mejorar 105 00:09:29,000 --> 00:09:37,390 esto, pero es un buen comienzo. Ahora simple y asequible o nuestra complejidad y asequibilidad, por lo 106 00:09:37,390 --> 00:09:45,000 tanto, eso debería tener un estilo un poco diferente. Sabemos que será texto y, por lo 107 00:09:45,000 --> 00:09:51,680 tanto, puedo usar algunas funciones o métodos de Javascript que tenemos disponibles en cadenas, 108 00:09:51,770 --> 00:09:59,930 simplemente usaré toUppercase para convertirlo a mayúsculas por completo de esta manera y ahora esto debería 109 00:09:59,930 --> 00:10:06,590 verse un poco mejor que antes. Ahora aún puede modificar el estilo aquí, iré con este estilo aquí 110 00:10:06,620 --> 00:10:09,440 por ahora y ahora agreguemos una imagen de fondo arriba. 111 00:10:09,440 --> 00:10:16,370 Entonces, para esto, queríamos una imagen de fondo detrás del texto del título y, afortunadamente, React Native hace que 112 00:10:16,370 --> 00:10:23,930 agregar una imagen de fondo sea realmente muy simple. React Native se envía con un componente incorporado, el componente 113 00:10:23,990 --> 00:10:29,690 de fondo de imagen que podemos usar para representar una imagen en el fondo 114 00:10:29,690 --> 00:10:36,020 como se podría imaginar por el nombre. Lo agrega al lado del componente detrás del cual desea agregarlo y lo agrega antes de ese componente, por 115 00:10:36,020 --> 00:10:43,520 lo que aquí agrego el fondo de la imagen y en el fondo de la imagen como en la imagen normal, establece una fuente. Aquí mi fuente es una imagen web, por lo que pasamos un 116 00:10:43,520 --> 00:10:49,220 objeto, si fuera una imagen local, usaría require y lo que aprendió sobre imágenes locales anteriormente en el curso, 117 00:10:49,220 --> 00:10:54,380 pero aquí, es una imagen web, así que pasamos un objetamos con un accesorio URI y allí 118 00:10:54,380 --> 00:11:00,560 usamos la imagen de accesorios, que es donde espero obtener esa URL en este componente, por lo que, por supuesto, 119 00:11:00,560 --> 00:11:07,370 tendremos que asegurarnos de pasar la URL en ese accesorio. También agregaré algunos 120 00:11:07,370 --> 00:11:15,000 estilos aquí y serán estilos. bg La imagen que ahora vamos a agregar a la hoja de 121 00:11:15,720 --> 00:11:22,110 estilo allí, donde quieras, tal vez aquí, realmente no importa. Una cosa importante aquí, debe establecer el ancho 122 00:11:22,110 --> 00:11:27,060 y la altura porque es una imagen de la web y los usaré 123 00:11:27,060 --> 00:11:36,350 al 100% para ambos porque debe llenar todo el espacio que queda. Ahora solo tenemos que asegurarnos de pasar el accesorio de imagen aquí en la pantalla de comidas de categoría, 124 00:11:36,440 --> 00:11:45,560 así que además del título, aquí también quiero pasar el itemData. articulo. imageUrl es su nombre, puedes ver eso en el modelo, imageUrl, así 125 00:11:45,560 --> 00:11:51,020 que eso es lo que estamos pasando y pasamos esto al accesorio de imagen porque eso es lo que estamos esperando 126 00:11:51,020 --> 00:11:56,960 y lo que estamos configurando aquí en la comida articulo. Y si ahora guarda eso y vamos a 127 00:11:56,970 --> 00:12:02,910 mezclar las cosas y probar esto en Android, solo lleva un poco más de tiempo cargarlo, por eso generalmente 128 00:12:03,000 --> 00:12:10,410 uso iOS aquí, pero ahora si probamos esto, vemos nuestra hamburguesa aquí. Sin embargo, lo que 129 00:12:10,410 --> 00:12:19,010 ya no vemos es nuestro título. Para mostrar el título nuevamente, asegúrese de envolver el 130 00:12:19,010 --> 00:12:27,480 fondo de la imagen a su alrededor, así es como le dice a React Native qué contenido debe 131 00:12:27,480 --> 00:12:34,320 estar dentro de esa imagen de fondo. Así que ahora con eso, aquí está nuestro título, no es tan fácil de leer y lo arreglaremos, pero está allí nuevamente. 132 00:12:35,480 --> 00:12:41,050 Así que estamos comenzando con esa receta aquí, ahora asegurémonos de que el título sea 133 00:12:41,050 --> 00:12:50,760 un poco más fácil de ver dándole un estilo aquí, un título de estilos que ahora podemos configurar allí y quiero establecer una familia de 134 00:12:50,850 --> 00:12:52,210 fuentes abierta sin 135 00:12:52,220 --> 00:12:55,490 negrita, tiene sentido ya que registramos esta fuente. 136 00:12:55,590 --> 00:12:59,380 Dale un tamaño de fuente que aumentemos un poco, tal vez 22, 137 00:12:59,400 --> 00:13:01,310 puedes jugar con eso, por supuesto. 138 00:13:01,440 --> 00:13:07,380 Déle un color blanco para que sea un poco más fácil de leer y también asigne un color de fondo para 139 00:13:07,380 --> 00:13:10,600 que siempre podamos verlo, incluso si la imagen de fondo sería 140 00:13:10,620 --> 00:13:16,800 blanca, en cuyo caso el texto blanco sería difícil de leer, dando Este es un color RGBA que es un color que 141 00:13:16,800 --> 00:13:22,380 tiene transparencia incorporada, por decirlo así, y es simplemente un color negro que es un poco transparente y ahora 142 00:13:25,490 --> 00:13:28,400 también agrega un poco de relleno aquí, el relleno 143 00:13:28,390 --> 00:13:35,000 vertical de cinco debería verse bien para que el el cuadro de color de fondo aquí no se sienta en los bordes del 144 00:13:35,000 --> 00:13:42,950 texto que está dentro del cuadro y el relleno horizontal de 12 quizás. Con eso siempre deberíamos ver nuestro título 145 00:13:42,950 --> 00:13:48,540 y, de hecho, probablemente podamos aumentar esa transparencia aquí, 146 00:13:48,560 --> 00:13:51,790 disminuir la opacidad, sí, eso 147 00:13:51,890 --> 00:13:53,630 se ve 148 00:13:59,550 --> 00:14:06,420 un poco mejor, creo, así. Y lo único que quiero hacer ahora es mover ese 149 00:14:06,420 --> 00:14:10,250 título hacia abajo en la parte inferior de esta imagen y, 150 00:14:12,450 --> 00:14:23,230 por lo tanto, en el estilo de bgImage que tengo aquí, estableceré el contenido de justificación en final flexible porque la imagen de fondo actúa automáticamente como una caja flexible, por 151 00:14:23,230 --> 00:14:27,970 ejemplo, como una vista, para que podamos justificar nuestro contenido allí y ahora tenemos 152 00:14:27,970 --> 00:14:30,400 ese título en la parte inferior. 153 00:14:30,430 --> 00:14:39,460 Ahora también podríamos centrar el texto yendo al título aquí y agregando el centro de alineación de texto y en caso de que sea demasiado largo, 154 00:14:39,580 --> 00:14:42,210 demasiado grande, además de reducir el 155 00:14:42,310 --> 00:14:46,400 tamaño de la fuente, lo que haré un poco hasta 20, 156 00:14:46,420 --> 00:14:53,080 por supuesto que puede vaya a ese texto aquí donde genera un título y establezca el número de líneas 157 00:14:53,080 --> 00:14:55,870 en 1 y esto asegurará que el texto 158 00:14:55,870 --> 00:15:06,780 se acorte automáticamente si es demasiado grande, como aquí para la ensalada con tomates cherry. También vemos un efecto extraño aquí en iOS, donde tenemos algo 159 00:15:06,880 --> 00:15:15,150 de fondo adicional detrás de nuestro texto y no solo el cuadro de color de fondo aquí. 160 00:15:15,160 --> 00:15:22,880 Esto se debe a que apliqué mi color de fondo y así sucesivamente directamente en el texto, para solucionar esto podemos cortarlo 161 00:15:22,880 --> 00:15:29,510 del título aquí y solo configurar el color y así sucesivamente y en su lugar agregar un contenedor 162 00:15:29,540 --> 00:15:37,100 de título aquí donde agregamos este color de fondo y así sucesivamente y envolver este contenedor alrededor de nuestro título, por 163 00:15:37,120 --> 00:15:42,580 lo que agregamos una vista adicional aquí y es bastante normal en React Native anidar 164 00:15:42,580 --> 00:15:51,580 múltiples vistas y en esa vista, ahora podemos agregar estilos, estilos de contenedor de títulos y si guardamos eso, deberíamos deshacernos de ese comportamiento extraño 165 00:15:51,580 --> 00:15:52,860 en iOS, sí, 166 00:15:52,900 --> 00:15:55,590 ahora no tenemos esa caja adicional allí, 167 00:15:55,600 --> 00:16:00,380 en cambio, solo tenemos un color de fondo y el mismo en Android. 168 00:16:00,520 --> 00:16:04,270 Así que ahora esto no se ve tan mal, pero no estoy del 169 00:16:04,270 --> 00:16:10,480 todo contento, me gustaría centrar mis detalles aquí también verticalmente y darle un poco más de espacio, supongo, y para eso podemos 170 00:16:10,480 --> 00:16:17,560 dar el encabezado tal vez 85% de la altura y en el detalle de la comida aquí, tenga en cuenta que nuestra dirección de flexión es 171 00:16:17,560 --> 00:16:23,650 la fila porque estamos fusionando la fila de la comida y el detalle de la comida aquí y, por lo tanto, nuestro 172 00:16:23,670 --> 00:16:26,080 eje transversal es de arriba a abajo, por 173 00:16:26,080 --> 00:16:30,540 lo que si queremos centrar verticalmente, eso es El eje transversal en el que necesitamos centrarnos. 174 00:16:30,550 --> 00:16:37,540 Entonces, aquí podemos configurar elementos de alineación que colocan el eje transversal en el centro y 175 00:16:37,540 --> 00:16:43,280 también cambiar nuestro color aquí un poco a un color más agradable, este 176 00:16:43,510 --> 00:16:49,170 gris muy claro, # f5f5f5 podría verse un poco mejor, sí, definitivamente 177 00:16:49,300 --> 00:16:50,800 lo hace . 178 00:16:50,800 --> 00:16:56,610 Ahora para asegurarnos de que realmente nos centramos verticalmente, solo necesitamos ser más explícitos sobre la 179 00:16:56,650 --> 00:16:58,660 altura que deben tomar los 180 00:17:03,480 --> 00:17:09,590 detalles de nuestra comida, tomamos el 85% en el encabezado, por lo que en el detalle aquí, 181 00:17:09,600 --> 00:17:17,230 podemos establecer una altura del 15% obviamente para tomar el resto, sí, y diría que esto parece bastante decente aquí, ciertamente 182 00:17:17,420 --> 00:17:20,620 enumere los elementos con los que podemos trabajar aquí. 183 00:17:20,630 --> 00:17:25,670 Ahora solo agregaré un poco de radio de borde porque sabes que me gustan los radios 184 00:17:25,670 --> 00:17:33,500 de borde, así que agregaré un radio de borde de 10 aquí para que tengamos algunas esquinas redondeadas y con eso, si regresas, nosotros ' 185 00:17:33,500 --> 00:17:38,820 ya casi está allí, pero notará que la imagen en realidad no respeta el radio del borde. 186 00:17:38,870 --> 00:17:46,780 Ahora para arreglar eso, en el artículo de la comida, solo tenemos que decir desbordamiento oculto para que ningún artículo secundario pueda salir de 187 00:17:46,780 --> 00:17:49,130 este espacio o esta forma que estamos 188 00:17:49,130 --> 00:17:49,910 construyendo aquí. 189 00:17:53,550 --> 00:17:56,880 Y con eso, eso es un comienzo, algo con lo que podemos 190 00:17:56,880 --> 00:18:02,070 trabajar, ahora, por supuesto, queremos asegurarnos de que cuando tocamos un elemento así, realmente vamos a la página de detalles.