ファランクス by ponta

Svelte : ベース

Tips

  • コンポーネントは 「HTML CSS JS」 がカプセル化されたコードブロック
  • ファイル名は最初が大文字
  • jsはファイル上部の script タグに書く
  • コンポーネントをimport したいファイルのscript内で、`import App from "./App.svelte";` のような感じで書く export は必要無い
  • HTMLタグがブラウザに表示されているときは{@html ...} ... の部分に収めると消える
  • onclick のような関数は `on:click` や `on:pointermove` のように使う

ルーティング

例：about スラッグを作る場合

  • about フォルダを作って、+page.svelteを作る

+layout.svelte

  • 同じディレクトリ内のすべてのルートに共通（デフォルトで表示される）
  • 例えば aboutの+page.svelte を空にすると +layout.svelte の内容になる
  • `<slot / >` をつけると、そこがページごとに異なる部分。
  • headerやfooterをcomponentにして、mainを `<slot />` にするのがわかりやすい使い方
  • コンポーネントのファイル名は小文字スタートでもいいが、ファイル内のコンポーネントを import するには大文字スタートである必要があるので、最初からコンポーネントのファイル名は大文字にするといい

props

子：

<script>
  export let title;
</script>

<h2>
  {title}
</h2>

親：

<script>
  import Title from "../../components/Title.svelte";
</script>

<Title title={"タイトル"}/>

← Go home