1
00:00:02,300 --> 00:00:07,270
Pour styliser les éléments séparés, je vais à nouveau créer un composant distinct et

2
00:00:07,350 --> 00:00:11,620
je vais le nommer repasitem. js, le nom vous

3
00:00:11,640 --> 00:00:15,320
appartient toujours et là-dedans, vous connaissez le jeu, nous

4
00:00:15,320 --> 00:00:18,200
créons un composant React en important React,

5
00:00:18,440 --> 00:00:25,360
nous aurons probablement aussi besoin de la vue, du texte et de la feuille de style

6
00:00:25,460 --> 00:00:32,610
et peut-être aussi d'autres choses de React Native. Ensuite, nous configurons le composant, l'élément de repas, où nous recevons des accessoires et

7
00:00:32,610 --> 00:00:38,010
où nous retournons ensuite du jsx à la fin. Configurez une feuille de style ici, stockez-la dans une constante de styles avec la feuille de

8
00:00:38,010 --> 00:00:46,090
style créée à laquelle nous passons un objet et à la fin, nous exportons notre élément de repas ici en tant que fichier par défaut. Maintenant, avec cela ici, dans l'élément de repas, dans ce composant, nous

9
00:00:46,090 --> 00:00:48,100
devons bien sûr retourner du

10
00:00:48,100 --> 00:00:54,040
code jsx pour cet élément de repas et c'est quelque chose que j'obtiens de l'écran de catégorie

11
00:00:54,040 --> 00:00:55,750
de repas. Là, j'ai cette

12
00:00:55,810 --> 00:01:02,260
vue avec mon texte ici, c'est à la fin ce que je veux sortir, un peu plus complexe que cela, mais je vais le couper à

13
00:01:02,710 --> 00:01:07,150
partir de là et le déplacer vers l'élément de repas et là, retourner cette vue ici mais

14
00:01:07,150 --> 00:01:12,380
de bien sûr, nous n'en avons pas fini avec cela. D'une part, cela devrait également être palpable,

15
00:01:12,380 --> 00:01:17,390
car nous pouvons sélectionner un repas, nous pouvons sélectionner une telle recette à prendre

16
00:01:17,390 --> 00:01:21,010
à l'écran de détail, donc je vais importer l'opacité palpable.

17
00:01:21,020 --> 00:01:25,910
Maintenant, bien sûr, vous pouvez à nouveau faire cette différenciation et utiliser l'effet d'entraînement avec des

18
00:01:25,970 --> 00:01:27,880
commentaires natifs tactiles sur Android

19
00:01:27,920 --> 00:01:35,270
si vous le souhaitez, je vais utiliser une opacité tactile pour l'instant et envelopper mon point de vue ici avec une opacité tactile, comme ceci

20
00:01:35,420 --> 00:01:44,350
afin que nous puissions appuyez sur notre élément ici et sur Press, je veux réellement déclencher une fonction que je m'attends à obtenir sur une propriété que nous ne passons

21
00:01:44,350 --> 00:01:49,000
pas encore dans l'élément de repas mais parce que nous n'utilisons pas encore l'élément de

22
00:01:49,000 --> 00:01:54,460
repas n'importe où mais que je vais passer dans le futur, peut-être que nous nommons cela sur un

23
00:01:54,460 --> 00:02:00,820
repas sélectionné ou simplement surSelect, tout ce que vous voulez, je le nommerai surSelectMeal et je m'attends à obtenir cet accessoire

24
00:02:00,820 --> 00:02:06,950
sur l'élément du repas lorsque nous l'utilisons ensuite dans jsx. C'est donc l'opacité palpable, là-dedans, j'ai

25
00:02:08,790 --> 00:02:16,050
ma vision du titre et en fait, cette vue devrait être un peu plus complexe que cela.

26
00:02:16,740 --> 00:02:24,150
Je veux avoir une vue, une vue imbriquée là-dedans comme ceci et une autre vue en dessous, donc je veux

27
00:02:24,180 --> 00:02:25,530
avoir deux rangées.

28
00:02:25,530 --> 00:02:31,060
Ce sera configuré comme une colonne mais ces deux vues ici seront configurées comme des lignes ici.

29
00:02:31,230 --> 00:02:38,280
La première vue devrait également rendre une image d'arrière-plan, de sorte que le titre se trouve devant cette image

30
00:02:38,310 --> 00:02:39,130
d'arrière-plan,

31
00:02:39,180 --> 00:02:44,730
la deuxième vue, la deuxième ligne ici devrait rendre quelques détails sur la recette

32
00:02:44,730 --> 00:02:47,270
sélectionnée, comme sa complexité et sa durée.

33
00:02:50,190 --> 00:02:55,530
Commençons donc par cela avant d'ajouter plus tard l'image, sur ces deux vues, j'ajouterai donc

34
00:02:55,560 --> 00:03:00,660
la propriété de style et pointerai sur la ligne de repas de styles ou tout

35
00:03:03,050 --> 00:03:08,860
ce que vous voulez nommer parce que ce sera une ligne dans ma présentation de repas ici

36
00:03:10,030 --> 00:03:18,140
et je Je vais donc ajouter une ligne de repas là-bas et définir la direction du flex ici sur la ligne, car cela

37
00:03:18,140 --> 00:03:23,150
devrait être des lignes de données. Maintenant, autour de l'élément global ici,

38
00:03:23,170 --> 00:03:27,290
je vais envelopper une autre vue où je veux configurer

39
00:03:30,050 --> 00:03:34,850
un style général de style élément de repas et élément de repas,

40
00:03:34,850 --> 00:03:40,670
qui est également configuré ici dans la feuille de style bien sûr et là, je

41
00:03:40,700 --> 00:03:46,940
veux donner à chaque repas une hauteur de 200 disons, chaque élément de la liste ici et

42
00:03:46,940 --> 00:03:55,390
une largeur de 100% pour prendre toute la largeur disponible et peut-être aussi une couleur de fond de ce look grisâtre ici,

43
00:03:55,430 --> 00:04:00,570
nous pouvons voir si nous voulons garder cela, pour l'instant je vais Utiliser ça.

44
00:04:00,810 --> 00:04:04,770
Maintenant, nous pouvons utiliser l'élément de repas ici et nous n'en avons pas

45
00:04:04,770 --> 00:04:14,560
encore fini, mais nous pouvons commencer à l'utiliser ici dans l'écran de catégorie de repas en l'important bien sûr, en important l'élément de repas à partir du dossier des composants

46
00:04:14,560 --> 00:04:25,230
et là, à partir du fichier d'élément de repas et ensuite le rendre ici, alors retournez ici un repas comme ceci et bien sûr, nous devons maintenant passer certaines données, des données comme le

47
00:04:25,230 --> 00:04:32,010
titre que nous obtenons de itemData. article. le titre et l'accessoire onSelect que

48
00:04:32,010 --> 00:04:38,850
je m'attends à avoir dans le plat de repas que nous avons finalement connecté à l'accessoire onPress de l'opacité tactile,

49
00:04:38,850 --> 00:04:42,840
onSelectMeal, c'est le nom que j'ai choisi, c'est aussi quelque chose que

50
00:04:42,840 --> 00:04:44,030
nous devons

51
00:04:44,070 --> 00:04:46,820
configurer ici lorsque nous utilisons le repas et

52
00:04:46,830 --> 00:04:51,330
cela devrait pointer vers une fonction qui pour l'instant ne fait rien mais

53
00:04:51,330 --> 00:04:55,090
qui chargera plus tard la page de détail de ce repas.

54
00:04:55,110 --> 00:05:00,300
Alors maintenant, nous obtenons le titre sur l'accessoire de titre, d'où l'élément de repas, ici, lorsque nous sortons le titre, nous le faisons à

55
00:05:00,300 --> 00:05:01,590
l'aide d'accessoires. Titre.

56
00:05:01,740 --> 00:05:09,260
Si nous sauvegardons maintenant cela, nous devrions en fait pouvoir voir quelque chose ici, alors attendons que cela se recharge et

57
00:05:09,260 --> 00:05:10,580
oui, nous voyons

58
00:05:10,580 --> 00:05:16,730
notre repas ici et certainement pas trop beau mais au moins, nous voyons un peu plus qu'avant.

59
00:05:16,730 --> 00:05:21,620
Maintenant, ce que j'aimerais avoir ici, c'est un peu d'espacement autour de la liste, mais à l'intérieur de

60
00:05:21,710 --> 00:05:26,930
l'espacement, l'élément de liste devrait prendre toute la largeur disponible et pas seulement la largeur de l'élément le plus large

61
00:05:26,930 --> 00:05:28,850
qui est actuellement ce qui se passe.

62
00:05:29,090 --> 00:05:35,800
Et pour cela, nous pouvons aller à la FlatList et là, ajouter la propriété style et définir cette largeur à 100% pour nous

63
00:05:35,810 --> 00:05:39,470
assurer que la FlatList elle-même prend toute la largeur qu'elle peut obtenir.

64
00:05:39,470 --> 00:05:42,020
Avec cela, nous devons regarder ce que nous voulons ici.

65
00:05:42,290 --> 00:05:44,710
Maintenant, bien sûr, les plats ne sont pas préparés, ils ne ressemblent pas à ce

66
00:05:44,720 --> 00:05:51,380
que je veux qu'ils aient l'air, même si nous y arrivons lentement. Maintenant dans le MealItem. fichier js, nous avons encore

67
00:05:51,380 --> 00:05:53,680
du travail à faire, par exemple, cette

68
00:05:53,690 --> 00:05:59,840
vue ici avec le titre contiendra également l'image plus tard et donc cela devrait être beaucoup plus grand

69
00:05:59,840 --> 00:06:03,960
que la ligne en dessous qui affichera plus tard quelques détails.

70
00:06:05,500 --> 00:06:18,310
Par conséquent, ici, je fusionnerai mes styles de ligne de repas avec un autre objet de style, donc avec le style défini dans un autre objet de feuille de style que je

71
00:06:18,350 --> 00:06:26,530
nommerai l'en-tête du repas ou tout ce que vous voulez lui donner et le même là-bas en passant pour les détails

72
00:06:26,530 --> 00:06:29,090
à la fin, je fusionnerai cela avec

73
00:06:29,110 --> 00:06:36,920
les détails des repas de styles, afin que nous ayons des styles combinés et commençons par l'en-tête du repas

74
00:06:36,920 --> 00:06:39,470
que nous pouvons configurer ici.

75
00:06:39,470 --> 00:06:47,090
L'en-tête du repas à la fin contiendra l'image et également le titre et je veux que la hauteur

76
00:06:47,410 --> 00:06:49,580
soit de disons 80%

77
00:06:49,580 --> 00:06:59,550
de la hauteur disponible, donc cela devrait être très très grand. Les détails du repas obtiendront donc automatiquement les 20% restants et pour voir

78
00:06:59,550 --> 00:07:07,470
si cela fonctionne, affichons quelques détails ici, donc dans cette vue ici, dans cette ligne en dessous de notre ligne

79
00:07:07,470 --> 00:07:10,020
de titre, je veux aussi avoir

80
00:07:10,020 --> 00:07:13,420
du texte ici et là I 'll affichera

81
00:07:13,440 --> 00:07:21,920
la durée des accessoires, puis m par la suite, pendant des minutes, car la durée m sera un nombre que nous traitons

82
00:07:21,920 --> 00:07:23,330
comme des minutes.

83
00:07:23,330 --> 00:07:27,740
Nous avons juste besoin de passer la durée à partir de l'écran des repas de la catégorie bien sûr,

84
00:07:27,740 --> 00:07:33,140
donc quand nous utilisons l'élément de repas, en plus de passer un titre, je définirai l'accessoire de durée parce que nous nous attendons maintenant

85
00:07:33,140 --> 00:07:34,940
à ce que sur l'élément de repas.

86
00:07:34,940 --> 00:07:40,700
Nous obtenons cela de itemData. élément qui est notre repas et là, nous aurons une

87
00:07:40,760 --> 00:07:45,630
propriété de durée parce que nos repas tels que définis dans le modèle ici ont une propriété

88
00:07:45,800 --> 00:07:50,690
de durée et en effet si vous regardez les données factices, voici votre durée qui est alimentée .

89
00:07:54,760 --> 00:07:56,560
Si nous enregistrons cela,

90
00:07:56,560 --> 00:08:06,850
nous voyons maintenant notre durée là-bas et en fait, nous pouvons toujours changer cette hauteur ici à même 90%, devrait être plus élevée qu'elle

91
00:08:06,910 --> 00:08:09,420
ne l'était ici, cela semble mieux

92
00:08:09,430 --> 00:08:10,630
et bien

93
00:08:10,750 --> 00:08:14,830
sûr, vous pouvez également l'expérimenter. Dans la ligne des

94
00:08:14,830 --> 00:08:22,680
détails du repas, je veux également avoir un rembourrage horizontal, donc à gauche et à droite de disons 10 et

95
00:08:22,690 --> 00:08:32,650
justifier mon contenu ici avec un espace entre, gardez à l'esprit que c'est une ligne donc cela le justifiera horizontalement, de sorte que lorsque nous

96
00:08:32,650 --> 00:08:35,690
aurons plusieurs articles, ils y seront bien distribués.

97
00:08:35,740 --> 00:08:45,740
Nous avons donc 20 minutes, sortons plus d'informations là-bas en ajoutant un autre texte

98
00:08:45,900 --> 00:08:47,030
et

99
00:08:47,030 --> 00:08:53,140
là, sortons la complexité, alors ici je sortirai la

100
00:08:53,140 --> 00:09:01,950
complexité et ensuite, je sortirai l'abordabilité. Maintenant, nous avons juste besoin de transmettre ces données également lors de la création de notre repas.

101
00:09:01,990 --> 00:09:06,460
Donc ici en plus de la durée, nous passons en

102
00:09:06,460 --> 00:09:16,420
complexité que nous obtenons ici, itemData. article. la complexité et l'abordabilité, c'est bien sûr

103
00:09:16,430 --> 00:09:18,530
itemData. article. l'accessibilité, comme

104
00:09:18,740 --> 00:09:28,910
ça et si nous enregistrons ceci et laissons ce re-rendu, maintenant nous voyons cette sortie ici. Toujours pas super beau et nous pouvons certainement

105
00:09:29,000 --> 00:09:37,390
améliorer cela mais un bon début. Maintenant simple et abordable ou notre complexité et accessibilité

106
00:09:37,390 --> 00:09:45,000
par conséquent, cela devrait être un peu différent. Nous savons que ce sera du texte

107
00:09:45,000 --> 00:09:51,680
et donc je peux utiliser certaines fonctions ou méthodes Javascript disponibles sur les chaînes,

108
00:09:51,770 --> 00:09:59,930
j'utiliserai simplement toUppercase pour le convertir en majuscules entièrement comme ceci et maintenant cela devrait déjà

109
00:09:59,930 --> 00:10:06,590
être un peu plus joli qu'avant. Maintenant, vous pouvez toujours modifier le style ici, je vais continuer avec ce

110
00:10:06,620 --> 00:10:09,440
style ici pour l'instant et ajoutons maintenant une image d'arrière-plan ci-dessus.

111
00:10:09,440 --> 00:10:16,370
Donc pour cela, nous voulions une image d'arrière-plan derrière ce texte de titre et heureusement, React Native

112
00:10:16,370 --> 00:10:23,930
rend l'ajout d'une telle image d'arrière-plan vraiment très simple. React Native est livré avec un composant intégré, le

113
00:10:23,990 --> 00:10:29,690
composant d'arrière-plan de l'image que nous pouvons utiliser pour rendre une image en arrière-plan

114
00:10:29,690 --> 00:10:36,020
comme vous l'imaginez par son nom. Vous l'ajoutez à côté du composant derrière lequel vous voulez l'ajouter et vous l'ajoutez avant ce

115
00:10:36,020 --> 00:10:43,520
composant, donc ici j'ajoute un fond d'image et sur un fond d'image comme sur l'image normale, vous définissez une source. Ici, ma source est une image web, donc nous passons dans un objet,

116
00:10:43,520 --> 00:10:49,220
si ce serait une image locale, vous utiliseriez require et ce que vous avez appris sur les images locales plus

117
00:10:49,220 --> 00:10:54,380
tôt dans le cours mais ici, c'est une image web, donc nous passons un objet avec un accessoire

118
00:10:54,380 --> 00:11:00,560
URI et là, nous utilisons l'image d'accessoires qui est l'endroit où je m'attends à obtenir cette URL dans ce composant, bien sûr,

119
00:11:00,560 --> 00:11:07,370
nous devons nous assurer de transmettre l'URL sur cet accessoire. Je vais également ajouter un peu

120
00:11:07,370 --> 00:11:15,000
de style ici et ce seront des styles. bgImage que nous allons maintenant ajouter à la feuille de style là-bas,

121
00:11:15,720 --> 00:11:22,110
où vous voulez, peut-être ici, n'a pas vraiment d'importance. Une chose importante ici, vous devez définir la

122
00:11:22,110 --> 00:11:27,060
largeur et la hauteur car c'est une image du Web et je vais les

123
00:11:27,060 --> 00:11:36,350
utiliser à 100% pour les deux car elle devrait remplir tout l'espace qu'elle obtient. Maintenant, nous devons juste nous assurer que nous transmettons cet accessoire d'image ici dans l'écran des repas de catégorie,

124
00:11:36,440 --> 00:11:45,560
donc en plus du titre, ici, je veux également passer dans itemData. article. imageUrl est le nom de celui-ci, vous pouvez voir que dans le

125
00:11:45,560 --> 00:11:51,020
modèle, imageUrl, c'est donc ce que nous transmettons et nous le transmettons à l'image prop parce que c'est ce que nous

126
00:11:51,020 --> 00:11:56,960
attendons et ce que nous mettons ici dans le repas article. Et si vous enregistrez maintenant cela et mélangons les

127
00:11:56,970 --> 00:12:02,910
choses et testons cela sur Android, cela prend juste un peu plus de temps à charger, c'est pourquoi j'utilise généralement

128
00:12:03,000 --> 00:12:10,410
iOS ici, mais maintenant si nous testons cela, nous voyons notre burger ici. Ce que nous ne

129
00:12:10,410 --> 00:12:19,010
voyons plus, c'est notre titre. Pour afficher à nouveau le titre, assurez-vous d'envelopper réellement

130
00:12:19,010 --> 00:12:27,480
l'arrière-plan de l'image autour de lui, c'est ainsi que vous dites à React Native quel contenu doit être

131
00:12:27,480 --> 00:12:34,320
à l'intérieur au-dessus de cette image d'arrière-plan. Alors maintenant avec ça, voici notre titre, pas si facile à lire et nous allons le réparer mais il est là encore.

132
00:12:35,480 --> 00:12:41,050
Nous commençons donc avec cette recette ici, maintenant assurons-nous que le titre est un peu

133
00:12:41,050 --> 00:12:50,760
plus facile à voir en lui donnant un style ici, titre de styles que nous pouvons maintenant configurer là-bas et je veux définir une famille de

134
00:12:50,850 --> 00:12:52,210
polices de open

135
00:12:52,220 --> 00:12:55,490
sans gras, est logique puisque nous enregistrons cette police.

136
00:12:55,590 --> 00:12:59,380
Donnez-lui une taille de police que nous augmentons un peu, peut-être 22,

137
00:12:59,400 --> 00:13:01,310
vous pouvez bien sûr jouer avec.

138
00:13:01,440 --> 00:13:07,380
Donnez-lui une couleur de blanc pour le rendre un peu plus facile à lire et attribuez également une couleur d'arrière-plan afin

139
00:13:07,380 --> 00:13:10,600
que nous puissions toujours la voir, même si l'image d'arrière-plan serait

140
00:13:10,620 --> 00:13:16,800
blanche, auquel cas le texte blanc serait difficile à lire, en donnant c'est une couleur RGBA qui est une couleur qui a

141
00:13:16,800 --> 00:13:22,380
une transparence intégrée pour ainsi dire et c'est simplement une couleur noire qui est un peu transparente et maintenant ajoutez

142
00:13:25,490 --> 00:13:28,400
également un peu de rembourrage ici, le remplissage vertical

143
00:13:28,390 --> 00:13:35,000
de cinq devrait bien paraître pour que le la boîte de couleur d'arrière-plan ici ne se trouve pas directement sur les bords du texte

144
00:13:35,000 --> 00:13:42,950
qui est à l'intérieur de la boîte et le rembourrage horizontal de 12 peut-être. Avec cela, nous devrions toujours voir notre

145
00:13:42,950 --> 00:13:48,540
titre et en fait, nous pouvons probablement augmenter cette transparence

146
00:13:48,560 --> 00:13:51,790
ici, diminuer l'opacité, oui, cela semble

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

148
00:13:59,550 --> 00:14:06,420
plus agréable, je pense, comme ça. Et la seule chose que je veux faire maintenant,

149
00:14:06,420 --> 00:14:10,250
c'est que je veux déplacer ce titre vers le bas en

150
00:14:12,450 --> 00:14:23,230
bas de cette image et donc sur le style bgImage que j'ai ici, je vais définir Justifier le contenu pour fléchir car l'image d'arrière-plan agit automatiquement comme une flexbox pour ainsi

151
00:14:23,230 --> 00:14:27,970
dire, comme une vue, afin que nous puissions justifier notre contenu là-dedans et maintenant

152
00:14:27,970 --> 00:14:30,400
nous avons ce titre en bas.

153
00:14:30,430 --> 00:14:39,460
Nous pourrions maintenant également centrer le texte en allant au titre ici et en ajoutant le texte aligner le centre et au cas où il serait trop

154
00:14:39,580 --> 00:14:42,210
long, trop grand, en plus bien sûr

155
00:14:42,310 --> 00:14:46,400
de réduire la taille de la police que je ferai un peu

156
00:14:46,420 --> 00:14:53,080
à 20, bien sûr vous pouvez allez à ce texte ici où vous sortez un titre et définissez le nombre

157
00:14:53,080 --> 00:14:55,870
de lignes à 1 et cela garantira que

158
00:14:55,870 --> 00:15:06,780
le texte est automatiquement raccourci s'il est trop grand, comme ici pour la salade aux tomates cerises. Nous voyons également un effet étrange ici sur iOS où

159
00:15:06,880 --> 00:15:15,150
nous avons un arrière-plan supplémentaire derrière notre texte et pas seulement la boîte colorée d'arrière-plan ici.

160
00:15:15,160 --> 00:15:22,880
C'est parce que j'ai appliqué ma couleur d'arrière-plan et ainsi de suite un effet directement sur le texte, pour corriger cela, nous pouvons le couper

161
00:15:22,880 --> 00:15:29,510
du titre ici et ne configurer que la couleur et ainsi de suite et ajouter à la place un conteneur de

162
00:15:29,540 --> 00:15:37,100
titre ici où nous ajoutons cette couleur d'arrière-plan et ainsi de suite et envelopper ce conteneur autour de notre titre, donc une vue supplémentaire

163
00:15:37,120 --> 00:15:42,580
que nous ajoutons ici et il est tout à fait normal dans React Native d'imbriquer plusieurs de

164
00:15:42,580 --> 00:15:51,580
ces vues et sur cette vue, nous pouvons maintenant ajouter un style, un conteneur de titre de styles et si nous l'enregistrons, nous devrions nous débarrasser de ce comportement

165
00:15:51,580 --> 00:15:52,860
étrange sur iOS,

166
00:15:52,900 --> 00:15:55,590
oui maintenant nous n'avons pas cette boîte supplémentaire là-bas,

167
00:15:55,600 --> 00:16:00,380
au lieu de cela nous avons juste une couleur d'arrière-plan et la même sur Android.

168
00:16:00,520 --> 00:16:04,270
Alors maintenant, cela ne semble pas trop mal, mais je ne suis

169
00:16:04,270 --> 00:16:10,480
pas entièrement satisfait, je voudrais également centrer mes détails ici verticalement et lui donner un peu plus d'espace, je suppose et

170
00:16:10,480 --> 00:16:17,560
pour cela, nous pouvons donner l'en-tête peut-être 85% de la hauteur et du détail du repas ici, gardez à l'esprit que notre direction de

171
00:16:17,560 --> 00:16:23,650
flexion est la ligne parce que nous fusionnons la ligne du repas et le détail du repas ici et donc

172
00:16:23,670 --> 00:16:26,080
notre axe transversal est de haut en

173
00:16:26,080 --> 00:16:30,540
bas, donc si nous voulons centrer verticalement, c'est l'axe transversal sur lequel nous devons centrer.

174
00:16:30,550 --> 00:16:37,540
Donc, ici, nous pouvons définir les éléments d'alignement qui font le positionnement de l'axe transversal au centre

175
00:16:37,540 --> 00:16:43,280
et également changer notre couleur ici un peu en une couleur plus agréable, ce

176
00:16:43,510 --> 00:16:49,170
gris très clair, # f5f5f5 pourrait avoir l'air un peu mieux, oui, il le

177
00:16:49,300 --> 00:16:50,800
fait définitivement .

178
00:16:50,800 --> 00:16:56,610
Maintenant, pour nous assurer que nous centrons vraiment verticalement, nous devons simplement être plus explicites sur

179
00:16:56,650 --> 00:16:58,660
la hauteur que doivent prendre

180
00:17:03,480 --> 00:17:09,590
les détails de notre repas, nous prenons 85% sur l'en-tête, donc sur les détails ici, nous pouvons

181
00:17:09,600 --> 00:17:17,230
définir une hauteur de 15% évidemment pour prendre le reste, oui et je dirais que cela semble assez décent ici, énumérez

182
00:17:17,420 --> 00:17:20,620
certainement les éléments avec lesquels nous pouvons travailler ici.

183
00:17:20,630 --> 00:17:25,670
Je vais maintenant ajouter un peu un rayon de bordure parce que vous savez que j'aime les

184
00:17:25,670 --> 00:17:33,500
rayons de bordure, donc j'ajouterai ici un rayon de bordure de 10 afin que nous ayons des coins arrondis et avec cela, si vous revenez en arrière, nous

185
00:17:33,500 --> 00:17:38,820
' vous y êtes presque, mais vous remarquerez que l'image ne respecte pas réellement le rayon de la bordure.

186
00:17:38,870 --> 00:17:46,780
Maintenant, pour corriger cela, sur l'élément de repas, il suffit de dire débordement caché afin qu'aucun élément enfant ne puisse sortir de cet

187
00:17:46,780 --> 00:17:49,130
espace ou de cette forme que nous

188
00:17:49,130 --> 00:17:49,910
construisons ici.

189
00:17:53,550 --> 00:17:56,880
Et avec cela, c'est un début, quelque chose avec lequel nous pouvons travailler, maintenant

190
00:17:56,880 --> 00:18:02,070
nous voulons bien sûr nous assurer que lorsque nous tapons sur un tel élément, nous allons réellement à la page de détails.