1
00:00:02,200 --> 00:00:04,720
Ada beberapa hal di mana kita bisa

2
00:00:04,740 --> 00:00:08,950
melanjutkan tetapi saya ingin melanjutkan dengan wadah input, yaitu wadah di sekitar input

3
00:00:08,980 --> 00:00:15,340
ini, jadi di sekitar pilih teks angka, di sekitar input teks di sini dan di sekitar tombol dan wadah ini

4
00:00:15,340 --> 00:00:18,970
memiliki lebar dan menyelaraskan item tetapi seperti yang saya jelaskan sebelumnya,

5
00:00:18,970 --> 00:00:21,820
akan menyenangkan untuk memiliki kartu itu untuk dilihat

6
00:00:21,820 --> 00:00:27,410
di sana dan untuk itu, kita memerlukan beberapa gaya yang lebih eksotis yang terdengar sangat mewah tetapi

7
00:00:27,410 --> 00:00:30,450
hanya beberapa aturan gaya yang belum pernah kita gunakan sebelumnya.

8
00:00:30,470 --> 00:00:34,080
Sebagai contoh, saya ingin menambahkan bayangan, sedikit bayangan

9
00:00:34,110 --> 00:00:43,310
dan Anda melakukan ini dengan empat properti inti yang dapat Anda gunakan. Warna, offset, opacity, dan radius.

10
00:00:43,310 --> 00:00:46,760
Sekarang warna bayangan harus jelas, itu warna bayangan Anda.

11
00:00:46,760 --> 00:00:50,210
Shadow offset adalah seberapa banyak offset itu dari wadah

12
00:00:50,210 --> 00:00:54,290
Anda dan itu benar-benar mengambil objek yang kemudian membutuhkan lebar dan tinggi,

13
00:00:54,290 --> 00:00:59,390
jadi Anda bisa mengatakan saya ingin mengimbangi bayangan dengan dua piksel mengenai lebar dan oleh dua

14
00:00:59,390 --> 00:01:07,220
piksel mengenai tinggi , yang memengaruhi efek tiga dimensi yang Anda buat. Opacity menggambarkan seberapa transparan bayangan ini, jika Anda mengatur opacity

15
00:01:07,280 --> 00:01:08,990
menjadi 1, maka Anda

16
00:01:08,990 --> 00:01:15,950
memiliki bayangan yang benar-benar transparan, sehingga bayangan yang sangat terlihat dan jika Anda menambah atau mengurangi yang harus

17
00:01:15,950 --> 00:01:21,800
saya katakan, jika Anda menetapkan ke 0. 1 misalnya, Anda memiliki bayangan

18
00:01:21,950 --> 00:01:28,910
yang hampir tidak dapat Anda lihat. Radius bayangan pada dasarnya menggambarkan seberapa tajam bayangan

19
00:01:28,910 --> 00:01:35,290
itu, apakah memiliki tepi yang kasar atau jika sedikit lebih buram, lebih lunak, hal-hal seperti itu.

20
00:01:35,330 --> 00:01:40,610
Jadi di sini, saya akan menggunakan warna bayangan hitam, dengan cara Anda juga dapat menggunakan kode hex

21
00:01:40,610 --> 00:01:47,720
di sini jika Anda mau dan Anda juga dapat menggunakan kode RGBA jika Anda suka ini, baik kode RGB normal sebenarnya atau juga

22
00:01:47,870 --> 00:01:53,270
dengan alfa saluran untuk menggambarkan transparansi di sini. Meskipun transparansi di sini tidak akan memiliki pengaruh

23
00:01:53,270 --> 00:01:59,030
langsung, untuk bayangan Anda harus mengatur ini dengan opacity bayangan. Untuk warna lain, itu akan memiliki

24
00:01:59,030 --> 00:02:04,100
pengaruh tetapi itu hanya catatan. Terlampir, Anda akan menemukan tautan dengan perincian lebih

25
00:02:04,100 --> 00:02:09,260
lanjut tentang bagaimana Anda dapat mengonfigurasi warna dan nilai warna mana yang React Native terima karena jelas, itu jauh

26
00:02:09,260 --> 00:02:14,030
lebih lengkap daripada yang bisa saya tunjukkan di sini, saya hanya akan menggunakan namanya karena saya ingin

27
00:02:14,030 --> 00:02:20,420
warna hitam warna, jadi mengapa tidak pergi dengan jalan pintas itu? Sekarang selain warnanya, bayangan di sini juga akan menerima

28
00:02:20,510 --> 00:02:23,990
offset dan seperti yang saya katakan, offset di sini mengambil objek.

29
00:02:23,990 --> 00:02:31,040
Sekarang jika Anda bertanya-tanya bagaimana saya tahu ini, untuk satu IDE saya mengatakan kepada saya, jika saya mulai mengetik shadow offset

30
00:02:31,040 --> 00:02:36,530
di sini, Anda melihat petunjuk yang saya dapatkan di sebelah kanan, Anda biasanya harus mendapatkan ini

31
00:02:36,530 --> 00:02:42,830
juga, tetapi jika Anda tidak dapatkan ini, dokumen resmi tentu saja tempat untuk pergi dan di sana, selalu di

32
00:02:42,830 --> 00:02:49,100
bawah panduan, komponen dan API, Anda dapat mengklik pada komponen tampilan di sana atau cukup klik pada dokumen API

33
00:02:49,100 --> 00:02:57,800
di sini di sudut kanan atas dan kemudian pilih tampilan Anda di sana-sini, Anda akan menemukan beberapa prop gaya dan kemudian Anda dapat menemukan daftar semua

34
00:02:57,860 --> 00:03:03,890
gaya tampilan yang didukung dan tentu saja juga bagaimana Anda mengonfigurasinya, dan di sana misalnya, Anda mengetahui bahwa

35
00:03:03,890 --> 00:03:10,040
shadow offset adalah objek dengan angka dan tinggi. Untuk warna, Anda belajar bahwa ini membutuhkan warna dan

36
00:03:10,040 --> 00:03:14,630
itulah tautan yang Anda temukan di sini, di mana ia menggambarkan jenis warna

37
00:03:14,630 --> 00:03:16,740
apa yang dapat Anda gunakan.

38
00:03:17,030 --> 00:03:24,020
Jadi itu hanya sedikit catatan, di sini saya akan menggunakan bayangan diimbangi dengan lebar nol tetapi tinggi 2

39
00:03:24,020 --> 00:03:32,030
sehingga bayangan saya diimbangi sedikit ke bawah sehingga bisa dikatakan, tidak begitu banyak ke kanan, jadi tidak sama sekali ke kanan

40
00:03:32,030 --> 00:03:40,310
sebenarnya dan saya kemudian juga akan menambahkan jari-jari bayangan yang merupakan jumlah mari kita coba enam dan coba lihat apa yang

41
00:03:40,310 --> 00:03:41,870
dilakukannya dan yang

42
00:03:42,650 --> 00:03:49,970
terakhir dan yang tidak kalah pentingnya, opacity bayangan 0. 26 yang relatif transparan tapi yang menurut saya

43
00:03:49,970 --> 00:03:51,610
terlihat cukup bagus.

44
00:03:51,850 --> 00:03:58,480
Selain itu, saya akan memberikan wadah input saya warna latar belakang putih untuk memastikan bahwa selalu putih dan

45
00:03:58,480 --> 00:04:03,370
tidak transparan yang merupakan default sehingga jika kita akan memiliki warna latar belakang

46
00:04:03,370 --> 00:04:08,890
lain di belakang wadah, katakanlah sebagai warna dasar dari seluruh layar, wadah di sini akan

47
00:04:08,920 --> 00:04:11,100
selalu memiliki latar belakang putih.

48
00:04:11,140 --> 00:04:16,180
Sekarang dengan itu, jika Anda menyimpan ini, Anda akan melihat bayangan yang terlihat seperti

49
00:04:16,180 --> 00:04:20,190
ini di iOS tetapi Anda tidak melihat bayangan sama sekali di

50
00:04:20,410 --> 00:04:28,120
Android dan itu bukan bug, sebaliknya properti bayangan di sini hanya bekerja di iOS dan yang meninggalkan satu yang penting pertanyaan, bagaimana

51
00:04:28,120 --> 00:04:32,820
Anda bisa mengatur bayangan di Android? Apakah itu tidak mungkin?

52
00:04:33,070 --> 00:04:39,610
Tetapi di sana Anda memiliki alat peraga gaya khusus, alat peraga ketinggian. Ini hanya berfungsi di Android karena tooltip juga

53
00:04:39,610 --> 00:04:48,280
menunjukkan di sini, platform Android sedangkan properti bayangan hanya bekerja di iOS. Sekarang elevasi hanya membutuhkan beberapa misalkan 5 dan kemudian menggunakan

54
00:04:48,280 --> 00:04:55,090
elevasi desain material Android default, sehingga Anda memiliki kontrol yang lebih sedikit di sana tetapi di

55
00:04:55,090 --> 00:05:00,130
sisi lain, Anda mendapatkan tampilan desain material default yang pengguna Anda mungkin

56
00:05:00,130 --> 00:05:06,070
gunakan untuk hal apa pun, jadi itu hal yang baik tentang ini dan sekarang

57
00:05:06,340 --> 00:05:13,590
kami juga memiliki bayangan di Android dan iOS. Di iOS, Anda juga akan melihat bahwa bayangan terlihat di

58
00:05:13,590 --> 00:05:19,840
kiri dan kanan kotak juga meskipun saya memberikan ini bayangan offset 0 untuk lebar, yang dapat dikontrol dengan

59
00:05:19,840 --> 00:05:25,480
radius bayangan, jika Anda mengatur bayangan radius ke nol, maka Anda melihat Anda hanya memiliki bayangan

60
00:05:25,480 --> 00:05:30,970
di mana Anda menentukan offset-nya di sini, sehingga Anda dapat memastikan bahwa bayangan itu benar-benar

61
00:05:30,970 --> 00:05:37,060
hanya ada di tempat yang Anda inginkan. Jika Anda memang menetapkan radius shadow dan secara default,

62
00:05:37,060 --> 00:05:41,350
ada juga radius shadow default, Anda mendapatkan efek spill yang merupakan bayangan yang

63
00:05:41,350 --> 00:05:47,860
lebih alami, jadi di sini sebenarnya efek yang saya inginkan. Sekarang dengan itu, saya menambahkan bayangan di Android menggunakan

64
00:05:47,920 --> 00:05:53,500
bayangan Android default dan di iOS. Ngomong-ngomong di Android, Anda tentu saja dapat

65
00:05:53,500 --> 00:05:59,950
mengubah level ketinggian untuk bermain-main dengan berbagai level ketinggian hingga Anda memiliki tampilan yang Anda inginkan untuk aplikasi

66
00:05:59,950 --> 00:06:05,530
Anda, pada dasarnya Anda memiliki cukup bayangan. Sekarang selain memiliki bayangan di sini,

67
00:06:05,530 --> 00:06:11,680
saya pikir akan lebih baik untuk memiliki beberapa bantalan dalam kotak ini sekarang karena barang-barang

68
00:06:11,680 --> 00:06:20,350
duduk terlalu dekat dengan tepi, mereka duduk langsung di tepi. Jadi untuk mengubah ini, saya juga akan menambahkan sedikit padding di sini

69
00:06:20,350 --> 00:06:26,440
dan itu akan menjadi padding 20 dan lagi, itu nilai yang dapat Anda coba, temukan padding yang

70
00:06:26,440 --> 00:06:33,910
Anda sukai secara pribadi dan menurut Anda itu terlihat bagus dan jika kami coba itu, sekarang ini terlihat jauh lebih baik.

71
00:06:33,970 --> 00:06:36,700
Selain itu, sudut-sudut membulat akan

72
00:06:37,120 --> 00:06:45,870
menjadi hal yang baik, jadi saya akan menambahkan jari-jari perbatasan di sini misalkan 10 memiliki batas yang sedikit membulat.

73
00:06:45,870 --> 00:06:52,940
Jika sekarang kita simpan itu, ini terlihat cukup manis bagi saya di kedua platform, di kedua perangkat.

74
00:06:52,940 --> 00:06:54,740
Jadi sekarang ini adalah wadah

75
00:06:54,770 --> 00:06:58,570
input, kita tidak dapat melihat input dan tombol-tombol mungkin harus memiliki ukuran yang

76
00:06:58,820 --> 00:07:00,950
sama juga, tetapi setidaknya, wadah sekarang terlihat bagus.