Web과 프로그래밍 언어/JavaScript25 [SVELTE]Context API- setContext and getContext Context API 1. setContext and getContext Map 컴포넌트는 MapMarker 컴포넌트를 자식 요소로 가진다.Map 컴포넌트는 lat, lon, zoom을 props로 전달받는다.MapMarker 컴포넌트는 lat, lon, label을 props로 전달받는다 {#if map} {/if}MapMarker 컴포넌트를 자식 요소로 가지기 위해 slot을 사용한다.lat, lon, zoom을 props로 가진다.마운트 되면 mapbox를 가져온다.import { setContext } from 'svelte'로 setContext를 가져오고 import { key } from './mapbox.js'로 .. 2023. 3. 17. [SVELTE] Component composition - Slots, Slot fallbacks, Named slots, Checking for slot content, Slot props Component composition 1. Slots HTML 요소가 자식 요소를 가질 수 있듯이 컴포넌트 slot을 사용하면 자식요소를 가질 수 있다. Hello! This is a box. It can contain anything. App.svelte의 의 자식 요소들이 Box.svelte의 위치에 나타난다. 2. Slot fallbacks Hello! This is a box. It can contain anything. no content was provided App.svelte 의 의 자식요소가 없는 경우, Box.svelte 의 안의 요소가 화면에 출력된다fallback : 정확한 경로 선택 방식을 사용해서는 적절한 경로를 선택.. 2023. 3. 17. [SVELTE] Advanced styling - The class directive, Shorthand class directive, Inline styles, The style directive Advanced styling 1. The class directive current = 'foo'}">foo를 아래와 같이 쓸 수 있다. current = 'foo'}">foo 2. Shorthand class directive class 이름과 value의 이름이 같을 때 아래와 같이 쓸 수 있다. 3. Inline styles 입력값에 따라 변하는 css 스타일링을 따로 클래스를 만들지 않고 인라인으로 선언하여 구현할 수 있다. This is a paragraph. 4.The style directive 위에서 예로 들었던 인라인으로 선언한 css는This is a paragraph.아래처럼 줄여서 사용할 수 있다. 이때 style attribue 보다 이렇게 direct 로 선언.. 2023. 3. 17. [SVELTE] Actions-The use directive, Adding parameters Actions - 사용 상황제3의 라이브러리와의 인터페이스이미지 로드의 속도가 느릴 때툴팁custom event handler를 추가할 때 1. The use directive // click_outsdie.jsexport function clickOutside(node) { const handleClick = (event) => { if (!node.contains(event.target)) { node.dispatchEvent(new CustomEvent("outclick")); } }; document.addEventListener("click", handleClick, true); return { destroy() { .. 2023. 3. 11. 이전 1 2 3 4 5 6 7 다음
