당신은 기본 HTML 구성 요소를 개선하는 대신에 자신의 구성 요소를 만들 때 그 느낌을 알고 있습니까?당신의 디자인 팀은 아름다운 것을 만들었지만 브라우저는 그것을 상자 밖으로 지원하지 않을 것이고 모든 곳에서 그것을 수정하는 것은 악몽이됩니다.우리는이 고통을 알고 있지만 이러한 도전은 우리의 일을 흥미롭게 만듭니다. 오늘, 나는이 흥미 진진한 여정에서 우리를 기다리는 한 가지 함정에 대해 이야기하고 싶었다 : 선택 메뉴 또는 날짜 선택기와 같은 드롭다운 요소의 배치. 완전히 틀린  처음에는  가 우리의 모든 문제를 해결하고, 어느 정도는 그렇습니다.<코드>위치: 절대 <코드> position: absolute Dropdown이 과도하게 흐르면 끊어집니다.물론 아래로 스크롤하고 볼 수 있지만 디자이너가 날카로운 개체로 당신에게 도달할 수 없도록 기도하는 것이 좋습니다. 그것은 완벽하지 않다 - 우리는 더 잘 할 수 있습니다. Fix It With    'fixed' 'fixed'  에 해당되는 글 1건 우리가 모든 것 위에 콘텐츠를 표시하려는 경우  .The only problem is that we will lose the parent element coordinates: fixed elements are quite independent by nature.This means the only thing we need to do is determine the exact coordinates of the drop-down element in these situations: position: fixed  위치: 고정           When we display it. When its content is changed. When we scroll the window and/or the scrollable parent. When we resize the window and/or the scrollable parent. When we display it.    그 내용이 변경될 때. 우리가 창과/또는 스크롤할 수 있는 부모를 스크롤할 때. When we resize the window and/or the scrollable parent.   창 및/또는 스크롤할 수 있는 부모의 크기를 변경할 때 우리는 또한 화면 하단에 너무 가깝다면 도그러머 위에 표시할지 여부를 결정해야합니다. 나는 Vue.js를 사용하지만 React 또는 Angular를 선호하는 경우에도 쉽게 따라야합니다. Let's Rock This Joint  여기에 우리가 사용하는 구조가 있습니다 : export const useDropdownAttributes = () => { const dropdownWidth = ref(''); const dropdownTop = ref(''); const dropdownBottom = ref(''); const dropdownLeft = ref(''); const isDirectedUpwards = ref(false); const togglerRect = ref<DOMRect>(); const dropdownRect = ref<DOMRect>(); const autodetectPosition = ( isDropdownDisplayed: Ref<boolean>;>, togglerElement: HTMLE TNT null = null, dropdownElement: HTMLDivementElement null = null, dropdownContent: Ref<n<코드 class="language-typescript">export const useDropdownAttributes = () => { const dropdownWidth = ref(''); const dropdownTop = ref(''); const dropdownBottom = ref(''); const dropdownLeft = ref(''); const isDirectedUpwards = ref(false); const togglerRect = ref<DOMRect>(); const dropdownRect = ref<DOMRect>(); const autodetectPosition = (is DropdownDisplayed: Ref<boolean>;, togglerElement: HTMLE tightening null = null, dropdownElement: HTMLDivementEl tightening null = null, dropdownContent: Ref< Dropdown 위치에 대한 4개의 변수와   깃발과 그들 모두를 업데이트하는 함수가 있습니다.We also return two variables for the toggler's and dropdown's Rects: this might be convenient, for example, for the tooltips that need to be aligned to the middle of the content. isDirectedUpwards isDirectedUpwards  <코드>DropdownElement   <코드>TogglerElement <코드>DropdownContent 당신이 기억할 수 있듯이, 우리는 또한 스크롤할 수있는 부모의 스크롤 및 재설정을 처리해야합니다, 그래서 그것을 찾을 수있는 함수를 만들자: const getFirstScrollableParent = (element: HTMLElementintza null): HTMLElement => { const parentElement = element?.parentElement; if (!parentElement) return document.body; const overflowY = window.getComputedStyle(parentElement).overflowY; if (overflowY ==='scroll' eBay overflowY === 'auto') return parentElement; return getFirstScrollableParent(parentElement); };  const getFirstScrollableParent = (element: HTMLElementannoo null): HTMLElement => { const parentElement = element?.parentElement; if (!parentElement) return document.body; const overflowY = window.getComputedStyle(parentElement).overflowY; if (overflowY ==='scroll' Gaill overflowY === 'auto') return parentElement; return getFirstScrollableParent(parentElement); };  Now, let's add the main function:   이제 주요 함수를 추가합시다. 우리는   및  를 통과하여 업데이트에 반응할 수 있습니다. isDropdownDisplayed dropdownContent isDropdown 디스플레이 우리는 또한   및  를 통과하여 위치를 계산해야합니다. togglerElement dropdownElement 마침내  이 있습니다.  isUpwardPreferred  기본적으로 toggler 위의 드롭다운을 원하는 경우. 가장 좋아요 시간은 휴식과 즐거움을 위한 시간 당신의 구성 요소에서, 당신은 다음과 같은 무언가를 필요로 할 것입니다 (나는 당신이 템플릿에서 당신의 toggler 및 드롭다운에 refs를 추가했다고 가정합니다): const { autodetectPosition, dropdownTop, dropdownBottom, dropdownLeft, dropdownWidth, isDirectedUpwards, } = useDropdownAttributes(); const togglerRef = ref<HTMLElement>(); const dropdownRef = ref<HTMLElement>(); const isDropdownShown = ref(false); onMounted(() => { autodetectPosition(isDropdownShown, togglerRef.value.$el, dropdownRef.value.$el); }  const { autodetectPosition, dropdownTop, dropdownBottom, dropdownLeft, dropdownWidth, isDirectedUpwards, } = useDropdownAttributes(); const togglerRef = ref<HTMLElement>(); const dropdownRef = ref<HTMLElement>(); const isDropdownShown = ref(false); onMounted(() => { autodetectPosition(isDropdownShown, togglerRef.value?.$el, dropdownRef.value?.$el); }  그리고 CSS는 이렇게 보일 것입니다 : .dropdown { 위치: 고정; 아래: v-bind('isDirectedUpwards? dropdownBottom : dropdownTop'); left: v-bind('dropdownLeft'); width: v-bind('dropdownWidth'); min-width: 0; }  .dropdown { 위치: 고정; bottom: v-bind('isDirectedUpwards? dropdownBottom : dropdownTop'); left: v-bind('dropdownLeft'); width: v-bind('dropdownWidth'); min-width: 0; }  Voilà. 드롭다운은 흐르는 경우에도 올바르게 표시되며 아래에 충분한 공간이없는 경우 트그글러 위로 이동합니다. 그리고 우리가 기사의 끝에 있기 때문에, 나는 당신에게 뭔가 즐거운 뭔가를 남겨 두고 싶다 - 그러나 나는 아이디어가 없어. 당신은  에서 전체 코드를 찾을 수 있습니다. GitHub 당신은  에서 전체 코드를 찾을 수 있습니다. GitHub GitHub

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

이 오디오는 이야기의 원래 언어로 제작되었습니다!

사용자 정의 드롭다운 요소의 적절한 표시: 방법 가이드

About Author

코멘트

태그 걸기

이 기사는 다음에서 발표되었습니다.

Related Stories

독특한 생태계를 강화하는 비트코인 UTXO 모델

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

작업 흐름을 10배 향상하는 방법: 17가지 필수 앱

독특한 생태계를 강화하는 비트코인 UTXO 모델

AI의 힘을 발휘하세요. 최첨단 기술의 체계적 검토: 개요 및 소개

작업 흐름을 10배 향상하는 방법: 17가지 필수 앱

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps