Svelte TIL 05

참고

Svelte.js 완벽 가이드 - HEROPY

스타일 바인딩

<!-- [코드 5-1] App.svelte-->
<script>
	let var_toggle = false; // toggle small - big
	function doToggle(e) {
		var_toggle = !var_toggle;
	}
</script>

<button on:click={doToggle}>click me</button>
<div class={var_toggle ? 'toggle' : ''}>class string</div>
<div class:toggle={var_toggle}>directive</div>

<style>
	div {
		border : 1px solid black;
		width : 50px;
		height : 50px;
	}
	.toggle {
		width : 200px;
	}
</style>

div의 너비를 작게/크게 토글하는 예제코드이다. 두 개의 div에서 다른 방법으로 class를 추가/제거하고 있다. 둘은 같은 결과가 나타난다.

<tag class:클래스명={변수}></tag>

svelte에서는 class={문자열} 대신 class directive를 지원한다. 변수부분의 값이 true로 평가되면, 그 앞의 클래스를 classList에 추가한다. false로 평가되면 classList에서 빠진다.

CSS 전역화

일반적인 스타일

<!-- [코드 5-2-1] App.svelte-->
<script>
	import Child from './Child.svelte';
</script>

<h2 class="wonjin">App</h2>
<Child />

<style>
	:global(.wonjin) { color : olive; }
</style>

<!-- [코드 5-2-2] Child.svelte-->
<h2 class="wonjin">Child</h2>

<style>태그 내에서 :global(클래스명){스타일} 구문과 같이 :global modifier를 통해 해당 스타일을 전역화 할 수 있다. 전역화된 스타일은 html컨텐츠 내에서 현재 나타나지 않는다 하더라도 번들시에 css파일에 포함된다.
전역스타일로 지정되지 않은 클래스들은 svlete가 정해주는 Style-hash의 이름으로 바뀌어 번들되는데, 전역스타일은 개발자가 입력한 클래스이름 그대로 지정된다.

@Keyframe

@keyframes -global-이름 { ... }

위와 같은 별도의 전역화 방법을 제공한다.

엘리먼트 바인딩

자기자신 엘리먼트 바인딩

<!-- [코드 5-3] App.svelte-->
<script>
  import { onMount } from "svelte";
  let el;
  onMount(()=>{
    el = document.querySelector('h1');
  })
</script>

<button on:click={e=>el.style.color="red"}>click</button>
<h1>wonjin</h1>

<!-- [코드 5-4] App.svelte-->
<script>
  let el;
</script>

<button on:click={e=>el.style.color="red"}>click</button>
<h1 bind:this={el}>wonjin</h1>

두 코드는 동일한 결과를 낸다

입력 엘리먼트 바인딩

checkbox

<!-- [코드 5-5] App.svelte-->
<script>
  let arr_src = ['a', 'b', 'c'];
  let arr_selected = [];
</script>

<section>
  <b>arr_selected : {arr_selected}</b>
  {#each arr_src as el}
    <label>
      <input type="checkbox" value={el} bind:group={arr_selected} />
      {el}
    </label>
  {/each}
</section>

radio

<!-- [코드 5-6] App.svelte-->
<script>
  let arr_src = ['a', 'b', 'c'];
  let arr_selected = [];
</script>

<section>
  <b>arr_selected : {arr_selected}</b>
  {#each arr_src as el}
    <label>
      <input type="radio" value={el} bind:group={arr_selected} />
      {el}
    </label>
  {/each}
</section>

bind:group={}와 같이 group으로 이름지어져있지만, radio의 특성 그대로 다중선택이 아닌 한 개 선택이 된다. input의 attribute로 name을 추가하는 대신 bind:group을 사용하는 것으로 이해하면 된다.

select

<!-- [코드 5-7] App.svelte-->
<script>
	let arr_src = ['a', 'b', 'c'];
	let arr_selected = '';
</script>

<section>
  <h2>단일선택</h2>
	<b>arr_selected : {arr_selected}</b>
  <select bind:value={arr_selected}>
  {#each arr_src as el}
    <option>{el}</option>
  {/each}
  </select>
</section>

<section>
  <h2>다중선택</h2>
	<b>arr_selected : {arr_selected}</b>
  <select multiple bind:value={arr_selected}>
  {#each arr_src as el}
    <option>{el}</option>
  {/each}
  </select>
</section>