Tinggi Dinamis

Dalam layout berbasis scroll jendela, sinkronkan tinggi target dengan tinggi viewport dan konten.

Peran

FlexLayoutDynamicHeightdikerjakan untuk konten dinamis yang tidak memiliki tinggi yang ditentukan. Elemen target tinggidan minHeightmenyinkronkan dengan tinggi konten yang sebenarnya dan tinggi minimum berdasarkan viewport, browser jendela membantu menghitung tinggi scroll secara stabil.

sinkronisasi tinggi body

dalam kasus ini targetRefjika tidak diberikan, elemen induk dari anchor bodyakan menjadi target.

tsx

sinkronisasi target tertentu

targetRefjika diberikan, akan menyinkronkan tinggi elemen tersebut, bukan induknya. Dapat digunakan pada elemen yang perlu menstabilkan tinggi scroll dalam konten tinggi dinamis yang tidak ditentukan (auto) seperti shell yang menggunakan scroll jendela, root portal, atau area dokumen terpisah.

tsx

metode pengukuran

selama pengukuran, tinggi target akan autodilepaskan, scrollHeight, tinggi viewport, padding, border, dan margin bawah child terakhir akan dipertimbangkan untuk menghitungtinggidan minHeightkembali. Diukur ulang saat ada perubahan DOM, resize, resize/scroll visualViewport, atau saat pemuatan font selesai.

mengubah style secara langsung

komponen ini secara sengaja mengubah inline tinggidan minHeighttarget element. Jika sudah ada kode yang mengontrol style yang sama secara langsung, jangan terapkan pada target yang sama secara bersamaan.

props

extraHeight

계산된 height에 추가로 더할 값입니다. 기본값은 0입니다.

extraHeightUnit

extraHeight의 단위입니다. px 또는 %를 사용할 수 있으며 기본값은 px입니다.

targetRef

height/minHeight를 동기화할 target element ref입니다. 생략하면 anchor의 parent element를 사용합니다.