당신은 기본 HTML 구성 요소를 개선하는 대신에 자신의 구성 요소를 만들 때 그 느낌을 알고 있습니까?당신의 디자인 팀은 아름다운 것을 만들었지만 브라우저는 그것을 상자 밖으로 지원하지 않을 것이고 모든 곳에서 그것을 수정하는 것은 악몽이됩니다.우리는이 고통을 알고 있지만 이러한 도전은 우리의 일을 흥미롭게 만듭니다.
오늘, 나는이 흥미 진진한 여정에서 우리를 기다리는 한 가지 함정에 대해 이야기하고 싶었다 : 선택 메뉴 또는 날짜 선택기와 같은 드롭다운 요소의 배치.
완전히 틀린
처음에는 position: absolute가 우리의 모든 문제를 해결하고, 어느 정도는 그렇습니다.<코드>위치: 절대 <코드>
Dropdown이 과도하게 흐르면 끊어집니다.물론 아래로 스크롤하고 볼 수 있지만 디자이너가 날카로운 개체로 당신에게 도달할 수 없도록 기도하는 것이 좋습니다.
그것은 완벽하지 않다 - 우리는 더 잘 할 수 있습니다.
Fix It With 'fixed' 'fixed' 에 해당되는 글 1건우리가 모든 것 위에 콘텐츠를 표시하려는 경우 position: fixed.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:
위치: 고정
- 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개의 변수와 isDirectedUpwards 깃발과 그들 모두를 업데이트하는 함수가 있습니다.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
당신이 기억할 수 있듯이, 우리는 또한 스크롤할 수있는 부모의 스크롤 및 재설정을 처리해야합니다, 그래서 그것을 찾을 수있는 함수를 만들자:
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 디스플레이<코드>DropdownContent
우리는 또한 togglerElement 및 dropdownElement를 통과하여 위치를 계산해야합니다.
<코드>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
'fixed' 에 해당되는 글 1건우리가 모든 것 위에 콘텐츠를 표시하려는 경우 position: fixed.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:
위치: 고정
- 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개의 변수와 isDirectedUpwards 깃발과 그들 모두를 업데이트하는 함수가 있습니다.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
당신이 기억할 수 있듯이, 우리는 또한 스크롤할 수있는 부모의 스크롤 및 재설정을 처리해야합니다, 그래서 그것을 찾을 수있는 함수를 만들자:
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 디스플레이<코드>DropdownContent
우리는 또한 togglerElement 및 dropdownElement를 통과하여 위치를 계산해야합니다.
<코드>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
