1
00:00:02,300 --> 00:00:07,270
Per dare uno stile agli elementi separati, creerò di nuovo un componente

2
00:00:07,350 --> 00:00:11,620
separato e lo chiamerò mealitem. js, il nome

3
00:00:11,640 --> 00:00:15,320
come sempre dipende da te e lì dentro,

4
00:00:15,320 --> 00:00:18,200
conosci il gioco, creiamo un componente

5
00:00:18,440 --> 00:00:25,360
React importando React, probabilmente avremo anche bisogno di visualizzazione, testo e foglio di stile e

6
00:00:25,460 --> 00:00:32,610
forse anche altre cose da React Native. Quindi impostiamo il componente, elemento pasto, dove riceviamo oggetti di scena e

7
00:00:32,610 --> 00:00:38,010
dove alla fine restituiamo un po 'di jsx. Imposta qui un foglio di stile, memorizzalo in una costante di stile con

8
00:00:38,010 --> 00:00:46,090
il foglio di stile creato al quale passiamo un oggetto e alla fine, esportiamo qui il nostro pasto come file predefinito. Ora con questo qui, nell'elemento pasto, in questo componente, ovviamente

9
00:00:46,090 --> 00:00:48,100
dobbiamo restituire un codice jsx

10
00:00:48,100 --> 00:00:54,040
per quell'elemento pasto e questo è qualcosa che ottengo dalla schermata dei pasti della

11
00:00:54,040 --> 00:00:55,750
categoria. Lì ho

12
00:00:55,810 --> 00:01:02,260
questa vista con il mio testo qui, che è alla fine quello che voglio l'output, un po 'più complesso di così,

13
00:01:02,710 --> 00:01:07,150
ma lo taglierò da lì e lo sposterò sull'elemento del pasto e lì, restituirò questa

14
00:01:07,150 --> 00:01:12,380
vista qui ma di ovviamente non abbiamo finito. Per uno, anche questo dovrebbe essere

15
00:01:12,380 --> 00:01:17,390
tangibile perché possiamo selezionare un pasto, possiamo selezionare una ricetta del genere da

16
00:01:17,390 --> 00:01:21,010
portare alla schermata dei dettagli, quindi importerò opacità tangibile.

17
00:01:21,020 --> 00:01:25,910
Ora, naturalmente, potresti ancora fare questa differenziazione e utilizzare l'effetto a catena con un

18
00:01:25,970 --> 00:01:27,880
feedback nativo tangibile su

19
00:01:27,920 --> 00:01:35,270
Android se lo desideri, andrò con un'opacità tangibile per ora e avvolgerò la mia vista qui con opacità tangibile, in questo

20
00:01:35,420 --> 00:01:44,350
modo in modo che possiamo in realtà tocca il nostro articolo qui e suPress, in realtà voglio attivare una funzione che mi aspetto di ottenere su

21
00:01:44,350 --> 00:01:49,000
una proprietà che non stiamo ancora passando all'elemento del pasto ma perché non

22
00:01:49,000 --> 00:01:54,460
stiamo ancora utilizzando l'elemento del pasto ovunque ma che lo farò passiamo in futuro, forse lo

23
00:01:54,460 --> 00:02:00,820
chiameremo su select meal o semplicemente suSelect, qualunque cosa tu voglia, lo chiameròSelectMeal e mi aspetto di ottenere quel

24
00:02:00,820 --> 00:02:06,950
puntello sull'elemento del pasto quando lo useremo in jsx. Quindi questa è l'opacità tangibile, lì dentro ho

25
00:02:08,790 --> 00:02:16,050
la mia visione con il titolo e in realtà quella vista dovrebbe essere un po 'più complessa di quella.

26
00:02:16,740 --> 00:02:24,150
Voglio avere una vista, una vista nidificata lì dentro come questa e un'altra vista sotto quella, quindi voglio

27
00:02:24,180 --> 00:02:25,530
avere due righe.

28
00:02:25,530 --> 00:02:31,060
Questo verrà impostato come una colonna, ma queste due viste qui verranno impostate come righe qui.

29
00:02:31,230 --> 00:02:38,280
La prima vista dovrebbe anche rendere un'immagine di sfondo, in modo che il titolo si trovi davanti a questa

30
00:02:38,310 --> 00:02:39,130
immagine

31
00:02:39,180 --> 00:02:44,730
di sfondo, la seconda vista, la seconda riga qui dovrebbe rendere alcuni dettagli sulla ricetta

32
00:02:44,730 --> 00:02:47,270
selezionata, come la sua complessità e durata.

33
00:02:50,190 --> 00:02:55,530
Quindi cominciamo con quello prima di aggiungere successivamente l'immagine, su entrambe queste viste,

34
00:02:55,560 --> 00:03:00,660
aggiungerò quindi la proprietà dello stile e puntare alla riga del pasto degli

35
00:03:03,050 --> 00:03:08,860
stili o come volete nominarlo perché sarà una riga nella mia presentazione del pasto

36
00:03:10,030 --> 00:03:18,140
qui e io Aggiungerò quindi la riga del pasto laggiù e imposterò la direzione flessibile qui sulla riga ovviamente perché

37
00:03:18,140 --> 00:03:23,150
dovrebbero essere righe di dati. Ora intorno all'elemento generale

38
00:03:23,170 --> 00:03:27,290
qui, avvolgerò un'altra vista in cui voglio impostare uno

39
00:03:30,050 --> 00:03:34,850
stile generale di stili elemento pasto e elemento pasto, che

40
00:03:34,850 --> 00:03:40,670
è anche configurato qui nel foglio di stile ovviamente e lì voglio

41
00:03:40,700 --> 00:03:46,940
dare ad ogni pasto un'altezza di 200 diciamo, ogni elemento nell'elenco qui e una

42
00:03:46,940 --> 00:03:55,390
larghezza del 100% per prendere l'intera larghezza disponibile e forse anche un colore di sfondo di questo aspetto grigiastro

43
00:03:55,430 --> 00:04:00,570
qui, possiamo vedere se vogliamo mantenerlo, per ora lo farò usalo.

44
00:04:00,810 --> 00:04:04,770
Ora possiamo usare l'elemento pasto qui e non abbiamo ancora

45
00:04:04,770 --> 00:04:14,560
finito con esso, ma possiamo iniziare a usarlo qui nella schermata della categoria pasti ovviamente importandolo, importando l'elemento pasto dalla cartella dei componenti e

46
00:04:14,560 --> 00:04:25,230
lì, dal file dell'articolo pasto e quindi renderlo qui, quindi restituisci qui un pasto in questo modo e ovviamente ora dobbiamo passare alcuni dati, dati come il

47
00:04:25,230 --> 00:04:32,010
titolo che otteniamo da itemData. articolo. titolo e puntello onSelect che

48
00:04:32,010 --> 00:04:38,850
mi aspetto di inserire nell'oggetto pasto che alla fine colleghiamo all'opacità toccabile puntello onPress, onSelectMeal, questo era il

49
00:04:38,850 --> 00:04:42,840
nome che ho scelto, è anche qualcosa che dobbiamo impostare

50
00:04:42,840 --> 00:04:44,030
qui quando

51
00:04:44,070 --> 00:04:46,820
usiamo il pasto oggetto e questo dovrebbe

52
00:04:46,830 --> 00:04:51,330
puntare a una funzione che per ora non fa nulla ma

53
00:04:51,330 --> 00:04:55,090
che successivamente caricherà la pagina dei dettagli per quel pasto.

54
00:04:55,110 --> 00:05:00,300
Quindi ora otteniamo il titolo sull'elica del titolo, quindi l'elemento pasto, qui quando produciamo il titolo lo facciamo con l'aiuto degli oggetti

55
00:05:00,300 --> 00:05:01,590
di scena. titolo.

56
00:05:01,740 --> 00:05:09,260
Se ora salviamo questo, dovremmo effettivamente essere in grado di vedere qualcosa qui, quindi aspettiamo che questo si ricarichi e

57
00:05:09,260 --> 00:05:10,580
sì, vediamo il

58
00:05:10,580 --> 00:05:16,730
nostro pasto qui e sicuramente non troppo bello ma almeno vediamo un po 'più di prima.

59
00:05:16,730 --> 00:05:21,620
Ora quello che mi piacerebbe avere qui è un po 'di spazio attorno all'elenco ma all'interno

60
00:05:21,710 --> 00:05:26,930
dello spazio, l'elemento dell'elenco dovrebbe assumere l'intera larghezza disponibile e non solo la larghezza dell'elemento più largo che

61
00:05:26,930 --> 00:05:28,850
è attualmente ciò che sta accadendo.

62
00:05:29,090 --> 00:05:35,800
E per questo, possiamo andare alla FlatList e lì, aggiungere la proprietà style e impostare questa larghezza al 100% per assicurarci

63
00:05:35,810 --> 00:05:39,470
che la FlatList stessa prenda tutta la larghezza che può ottenere.

64
00:05:39,470 --> 00:05:42,020
Con ciò, dovremmo guardare che vogliamo qui.

65
00:05:42,290 --> 00:05:44,710
Ora, ovviamente, i cibi non sono fatti, non hanno

66
00:05:44,720 --> 00:05:51,380
l'aspetto che voglio, anche se lentamente ci arriviamo. Ora nel MealItem. js file, abbiamo ancora del

67
00:05:51,380 --> 00:05:53,680
lavoro da fare, ad esempio questa vista

68
00:05:53,690 --> 00:05:59,840
qui con il titolo in seguito conterrà anche l'immagine e quindi questo dovrebbe essere molto più grande della

69
00:05:59,840 --> 00:06:03,960
riga sotto di essa che in seguito produrrà solo alcuni dettagli.

70
00:06:05,500 --> 00:06:18,310
Quindi qui, unirò i miei stili di fila di pasti con un altro oggetto di stile, quindi con lo stile impostato in un altro oggetto di foglio di

71
00:06:18,350 --> 00:06:26,530
stile che chiamerò intestazione del pasto o come volete nominarlo e lo stesso laggiù per i dettagli alla

72
00:06:26,530 --> 00:06:29,090
fine, li unirò con i dettagli

73
00:06:29,110 --> 00:06:36,920
del pasto degli stili, in modo che abbiamo combinato gli stili e iniziamo con l'intestazione del pasto

74
00:06:36,920 --> 00:06:39,470
che possiamo impostare qui.

75
00:06:39,470 --> 00:06:47,090
L'intestazione del pasto alla fine conterrà l'immagine e anche il titolo e voglio

76
00:06:47,410 --> 00:06:49,580
che l'altezza sia

77
00:06:49,580 --> 00:06:59,550
pari all'80% dell'altezza disponibile, quindi dovrebbe essere molto grande. I dettagli del pasto otterranno quindi automaticamente il restante 20% ovviamente

78
00:06:59,550 --> 00:07:07,470
e per vedere se funziona, emettiamo alcuni dettagli qui, quindi in quella vista qui, in quella riga sotto

79
00:07:07,470 --> 00:07:10,020
la nostra riga del titolo, voglio

80
00:07:10,020 --> 00:07:13,420
anche avere un testo qua e là diciamo

81
00:07:13,440 --> 00:07:21,920
la durata dei puntelli e poi m in seguito, per minuti perché m durata sarà un numero che trattiamo

82
00:07:21,920 --> 00:07:23,330
come minuti.

83
00:07:23,330 --> 00:07:27,740
Dobbiamo solo passare la durata dalla schermata dei pasti della categoria ovviamente, quindi quando

84
00:07:27,740 --> 00:07:33,140
usiamo l'elemento del pasto, oltre a passare un titolo, imposterò il sostegno della durata perché ora lo

85
00:07:33,140 --> 00:07:34,940
stiamo aspettando sull'elemento del pasto.

86
00:07:34,940 --> 00:07:40,700
Otteniamo questo da itemData. elemento che è il nostro pasto e lì, avremo una

87
00:07:40,760 --> 00:07:45,630
proprietà di durata perché i nostri pasti come definiti nel modello qui hanno una proprietà di durata

88
00:07:45,800 --> 00:07:50,690
e in effetti se dai un'occhiata ai dati fittizi, questa è la tua durata che viene inserita .

89
00:07:54,760 --> 00:07:56,560
Se salviamo questo,

90
00:07:56,560 --> 00:08:06,850
ora vediamo la nostra durata laggiù e in realtà, possiamo ancora cambiare l'altezza qui anche al 90%, dovrebbe essere più alta di quanto

91
00:08:06,910 --> 00:08:09,420
non fosse qui, che sembra migliore

92
00:08:09,430 --> 00:08:10,630
e ovviamente

93
00:08:10,750 --> 00:08:14,830
puoi anche sperimentare con questo. Nella riga dei dettagli

94
00:08:14,830 --> 00:08:22,680
del pasto, voglio anche avere un'imbottitura orizzontale, quindi sinistra e destra diciamo 10 e giustificiamo il mio

95
00:08:22,690 --> 00:08:32,650
contenuto qui con spazio tra, tieni presente che è una riga quindi questo lo giustificherà in orizzontale, in modo che quando abbiamo

96
00:08:32,650 --> 00:08:35,690
più elementi, saranno ben distribuiti lì.

97
00:08:35,740 --> 00:08:45,740
Quindi abbiamo 20 minuti, generiamo più informazioni lì aggiungendo un altro testo e

98
00:08:45,900 --> 00:08:47,030
lì,

99
00:08:47,030 --> 00:08:53,140
produciamo la complessità, quindi qui emetterò la complessità

100
00:08:53,140 --> 00:09:01,950
e, successivamente, produrrò l'accessibilità economica. Ora non ci resta che trasmettere tali dati anche durante la creazione del nostro pasto.

101
00:09:01,990 --> 00:09:06,460
Quindi qui oltre alla durata, passiamo nella

102
00:09:06,460 --> 00:09:16,420
complessità che arriviamo qui, itemData. articolo. complessità e convenienza, questo è ovviamente

103
00:09:16,430 --> 00:09:18,530
itemData. articolo. convenienza,

104
00:09:18,740 --> 00:09:28,910
così e se salviamo questo e lasciamo che questo ritorni, ora vediamo questo output qui. Ancora non molto bello e possiamo sicuramente migliorare

105
00:09:29,000 --> 00:09:37,390
questo, ma un buon inizio. Ora semplice e conveniente o la nostra complessità e

106
00:09:37,390 --> 00:09:45,000
convenienza quindi, che dovrebbe essere un po 'diverso. Sappiamo che sarà un testo e quindi

107
00:09:45,000 --> 00:09:51,680
posso usare alcune funzioni o metodi Javascript che abbiamo a disposizione sulle stringhe, userò

108
00:09:51,770 --> 00:09:59,930
semplicemente toUppercase per convertirlo in maiuscolo interamente in questo modo e ora questo dovrebbe già apparire

109
00:09:59,930 --> 00:10:06,590
un po 'più bello di prima. Ora puoi ancora modificare lo stile qui, andrò con questo stile qui

110
00:10:06,620 --> 00:10:09,440
per ora e ora aggiungiamo un'immagine di sfondo sopra.

111
00:10:09,440 --> 00:10:16,370
Quindi, per questo, volevamo un'immagine di sfondo dietro questo testo del titolo e per fortuna, React Native rende

112
00:10:16,370 --> 00:10:23,930
l'aggiunta di tale immagine di sfondo davvero molto semplice. React Native viene fornito con un componente integrato,

113
00:10:23,990 --> 00:10:29,690
il componente di sfondo dell'immagine che possiamo usare per rendere un'immagine in background

114
00:10:29,690 --> 00:10:36,020
come si immagina con il nome. Lo aggiungi accanto al componente dietro il quale vuoi aggiungerlo e lo aggiungi prima di

115
00:10:36,020 --> 00:10:43,520
quel componente, quindi qui aggiungo lo sfondo dell'immagine e sullo sfondo dell'immagine come sull'immagine normale, imposti una fonte. Qui la mia fonte è un'immagine web, quindi passiamo un

116
00:10:43,520 --> 00:10:49,220
oggetto, se fosse un'immagine locale, useresti richiedi e cosa hai imparato sulle immagini locali prima nel

117
00:10:49,220 --> 00:10:54,380
corso ma qui, è un'immagine web, quindi passiamo un oggetto con un puntello URI

118
00:10:54,380 --> 00:11:00,560
e lì usiamo l'immagine dei puntelli che è dove mi aspetto di ottenere quell'URL in questo componente, quindi

119
00:11:00,560 --> 00:11:07,370
ovviamente dovremo assicurarci di passare l'URL su quel puntello. Aggiungerò anche un po

120
00:11:07,370 --> 00:11:15,000
'di styling qui e saranno stili. bgImage che ora aggiungeremo al foglio di stile laggiù,

121
00:11:15,720 --> 00:11:22,110
dove vuoi, forse qui, non importa. Una cosa importante qui, devi impostare

122
00:11:22,110 --> 00:11:27,060
larghezza e altezza perché è un'immagine dal web e le userò

123
00:11:27,060 --> 00:11:36,350
al 100% per entrambi perché dovrebbe riempire l'intero spazio che ottiene. Ora dobbiamo solo assicurarci di passare quell'immagine qui nella schermata dei pasti della categoria, quindi

124
00:11:36,440 --> 00:11:45,560
oltre al titolo, qui voglio anche passare l'articolo Data. articolo. imageUrl è il nome di esso, puoi vederlo nel modello,

125
00:11:45,560 --> 00:11:51,020
imageUrl, quindi è quello che stiamo passando e lo passiamo al puntello dell'immagine perché è quello che ci aspettiamo

126
00:11:51,020 --> 00:11:56,960
e quello che stiamo impostando qui nel pasto articolo. E se ora lo salvi e mescoliamo le

127
00:11:56,970 --> 00:12:02,910
cose e testiamo questo su Android, impiega un po 'più tempo a caricarsi, motivo per cui di solito uso

128
00:12:03,000 --> 00:12:10,410
iOS qui, ma ora se testiamo questo, vediamo il nostro hamburger qui. Ciò che non vediamo

129
00:12:10,410 --> 00:12:19,010
più è il nostro titolo però. Per mostrare di nuovo il titolo, assicurati di

130
00:12:19,010 --> 00:12:27,480
avvolgere effettivamente lo sfondo dell'immagine attorno ad esso, ecco come dici a React Native quale contenuto dovrebbe

131
00:12:27,480 --> 00:12:34,320
essere all'interno sopra quell'immagine di sfondo. Quindi ora con questo, ecco il nostro titolo, non è così facile da leggere e lo risolveremo, ma è di nuovo lì.

132
00:12:35,480 --> 00:12:41,050
Quindi stiamo iniziando con quella ricetta qui, ora assicuriamoci che il titolo sia un

133
00:12:41,050 --> 00:12:50,760
po 'più facile da vedere dandogli uno stile qui, titolo di stili che ora possiamo impostare laggiù e voglio impostare una famiglia di caratteri di

134
00:12:50,850 --> 00:12:52,210
open senza grassetto,

135
00:12:52,220 --> 00:12:55,490
ha senso dal momento che registriamo questo carattere.

136
00:12:55,590 --> 00:12:59,380
Dagli una dimensione del carattere che aumentiamo un po ', forse 22,

137
00:12:59,400 --> 00:13:01,310
puoi giocare con quello ovviamente.

138
00:13:01,440 --> 00:13:07,380
Dai un colore bianco per renderlo un po 'più facile da leggere e assegna anche un colore di sfondo in modo

139
00:13:07,380 --> 00:13:10,600
che possiamo sempre vederlo, anche se l'immagine di sfondo sarebbe bianca,

140
00:13:10,620 --> 00:13:16,800
nel qual caso il testo bianco sarebbe difficile da leggere, dando questo è un colore RGBA che è un colore che ha

141
00:13:16,800 --> 00:13:22,380
la trasparenza integrata per così dire e questo è semplicemente un colore nero che è un po 'trasparente e

142
00:13:25,490 --> 00:13:28,400
ora aggiungo anche un po' di imbottitura qui, un'imbottitura

143
00:13:28,390 --> 00:13:35,000
verticale di cinque dovrebbe apparire buona in modo che il la casella colorata di sfondo qui non si trova proprio sui bordi del

144
00:13:35,000 --> 00:13:42,950
testo che si trova all'interno della casella e un'imbottitura orizzontale di 12 forse. Con ciò dovremmo sempre vedere il nostro

145
00:13:42,950 --> 00:13:48,540
titolo e in realtà, probabilmente possiamo aumentare quella trasparenza qui,

146
00:13:48,560 --> 00:13:51,790
diminuire l'opacità, sì, penso che sia

147
00:13:51,890 --> 00:13:53,630
un po

148
00:13:59,550 --> 00:14:06,420
'più bello, penso in questo modo. E l'unica cosa che voglio fare ora è che

149
00:14:06,420 --> 00:14:10,250
voglio spostare quel titolo verso il basso nella parte inferiore

150
00:14:12,450 --> 00:14:23,230
di questa immagine e quindi sullo stile bgImage che ho qui, imposterò il contenuto per rendere flessibile perché l'immagine di sfondo agisce automaticamente come un flexbox per così dire, come

151
00:14:23,230 --> 00:14:27,970
una vista, in modo da poter giustificare i nostri contenuti lì dentro e

152
00:14:27,970 --> 00:14:30,400
ora abbiamo quel titolo in fondo.

153
00:14:30,430 --> 00:14:39,460
Ora potremmo anche centrare il testo andando al titolo qui e aggiungendo il centro di allineamento del testo e nel caso sia troppo lungo,

154
00:14:39,580 --> 00:14:42,210
troppo grande, oltre ovviamente a ridurre

155
00:14:42,310 --> 00:14:46,400
la dimensione del carattere che farò un po 'a 20, ovviamente

156
00:14:46,420 --> 00:14:53,080
puoi vai a quel testo qui dove hai emesso un titolo e imposta il numero di righe

157
00:14:53,080 --> 00:14:55,870
su 1 e questo assicurerà che il

158
00:14:55,870 --> 00:15:06,780
testo venga automaticamente accorciato se è troppo grande, come qui per l'insalata con pomodorini. Vediamo anche uno strano effetto qui su iOS in cui abbiamo

159
00:15:06,880 --> 00:15:15,150
uno sfondo in più dietro il nostro testo e non solo la casella colorata di sfondo qui.

160
00:15:15,160 --> 00:15:22,880
Questo perché ho applicato il mio colore di sfondo e così effetto direttamente sul testo, per risolvere questo problema possiamo tagliarlo

161
00:15:22,880 --> 00:15:29,510
dal titolo qui e impostare solo il colore e così via lì e invece aggiungere un contenitore del

162
00:15:29,540 --> 00:15:37,100
titolo qui dove aggiungiamo questo colore di sfondo e così via e avvolgere questo contenitore attorno al nostro titolo, quindi

163
00:15:37,120 --> 00:15:42,580
una vista extra che aggiungiamo qui ed è abbastanza normale in React Native annidare più

164
00:15:42,580 --> 00:15:51,580
di tali viste e su quella vista, ora possiamo aggiungere stile, stili contenitore del titolo e se lo salviamo, dovremmo sbarazzarci di quello strano comportamento

165
00:15:51,580 --> 00:15:52,860
su iOS,

166
00:15:52,900 --> 00:15:55,590
sì ora non abbiamo quella scatola extra

167
00:15:55,600 --> 00:16:00,380
lì, invece abbiamo solo un colore di sfondo e lo stesso su Android.

168
00:16:00,520 --> 00:16:04,270
Quindi ora questo non sembra troppo male, ma non sono del

169
00:16:04,270 --> 00:16:10,480
tutto felice, vorrei centrare i miei dettagli anche qui verticalmente e dargli un po 'più di spazio immagino e

170
00:16:10,480 --> 00:16:17,560
per questo possiamo dare l'intestazione forse all'85% dell'altezza e sul dettaglio del pasto qui, tieni presente che la nostra direzione flessibile è

171
00:16:17,560 --> 00:16:23,650
la fila perché stiamo unendo la fila del pasto e i dettagli del pasto qui e quindi il

172
00:16:23,670 --> 00:16:26,080
nostro asse trasversale è dall'alto verso

173
00:16:26,080 --> 00:16:30,540
il basso, quindi se vogliamo centrare verticalmente, cioè l'asse trasversale su cui dobbiamo centrare.

174
00:16:30,550 --> 00:16:37,540
Quindi qui possiamo impostare allineare gli elementi che posizionano il centro dell'asse trasversale al centro e anche

175
00:16:37,540 --> 00:16:43,280
cambiare il nostro colore qui un po 'per un po' di un colore più

176
00:16:43,510 --> 00:16:49,170
bello, questo grigio molto chiaro, # f5f5f5 potrebbe apparire un po 'meglio, sì, sicuramente

177
00:16:49,300 --> 00:16:50,800
lo fa .

178
00:16:50,800 --> 00:16:56,610
Ora per essere sicuri di centrare veramente verticalmente, dobbiamo solo essere più espliciti

179
00:16:56,650 --> 00:16:58,660
sull'altezza che dovrebbero prendere

180
00:17:03,480 --> 00:17:09,590
i dettagli del nostro pasto, prendiamo l'85% sull'intestazione, quindi sul dettaglio qui, possiamo impostare

181
00:17:09,600 --> 00:17:17,230
un'altezza del 15% ovviamente per il resto, sì e direi che qui sembra abbastanza decente, certamente elenca

182
00:17:17,420 --> 00:17:20,620
gli elementi con cui possiamo lavorare qui.

183
00:17:20,630 --> 00:17:25,670
Ora aggiungerò solo un po 'di raggio del bordo perché sai che mi piacciono i

184
00:17:25,670 --> 00:17:33,500
raggi del bordo, quindi aggiungerò un raggio del bordo di 10 in modo da avere degli angoli arrotondati e con quello, se torni indietro,

185
00:17:33,500 --> 00:17:38,820
noi' ci sei quasi ma noterai che l'immagine in realtà non rispetta il raggio del bordo.

186
00:17:38,870 --> 00:17:46,780
Ora per risolvere il problema, sull'oggetto pasto, dobbiamo solo dire che l'overflow è nascosto in modo che nessun elemento figlio possa uscire da

187
00:17:46,780 --> 00:17:49,130
questo spazio o questa forma che stiamo

188
00:17:49,130 --> 00:17:49,910
costruendo qui.

189
00:17:53,550 --> 00:17:56,880
E con ciò, è un inizio, qualcosa su cui possiamo

190
00:17:56,880 --> 00:18:02,070
lavorare, ora ovviamente vogliamo assicurarci che quando tocchiamo un tale oggetto, andiamo effettivamente alla pagina dei dettagli.