Tailwind CSS 예제가 포함된 SvelteKit 반응형 Navbar 메뉴

이 튜토리얼에서는 tailwind css를 사용하여 SvelteKit에서 반응형 navbar 메뉴를 생성합니다. SvelteKit이 있는 햄버거 메뉴가 있는 navbar, sveltekit tailwind navbar 구성 요소, 로그인이 있는 navbar 및 Tailwind CSS 및 SvelteKit를 사용한 가입 예제가 표시됩니다. 이 코드를 svelte에서도 사용할 수 있습니다.

도구 사용

SvelteKit/날씬한
순풍 CSS 3.v
영웅 아이콘
view

먼저 tailwind css로 반응 프로젝트를 설정해야 합니다. 수동으로 설치하거나 아래 블로그를 읽을 수 있습니다.
Install Tailwind CSS in Sveltekit + Vite + Typescript
Install Skeleton Svelte UI with Tailwind CSS in Svelte + SvelteKit

예 1

순풍 css가 포함된 SvelteKit 반응형 navbar 메뉴.

<script>
  let showMenu = false;

  function toggleNavbar() {
    showMenu = !showMenu;
  }
</script>

<div>
  <div>
    <nav
      class="container px-6 py-8 mx-auto md:flex md:justify-between md:items-center"
    >
      <div class="flex items-center justify-between">
        <a
          class="text-xl font-bold text-gray-800 md:text-2xl hover:text-blue-400"
          href="/home"
          >Logo
        </a>
        <!-- Mobile menu button -->
        <div on:click={toggleNavbar} class="flex md:hidden">
          <button
            type="button"
            class="text-gray-800 hover:text-gray-400 focus:outline-none focus:text-gray-400"
          >
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div
        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
          ? 'flex'
          : 'hidden'}"
      >
        <a class="text-gray-800 hover:text-blue-400" href="/home">Home</a>
        <a class="text-gray-800 hover:text-blue-400" href="/blog">Blogs</a>
        <a class="text-gray-800 hover:text-blue-400" href="/contact">Contact US</a>
        <a class="text-gray-800 hover:text-blue-400" href="/about">About Us</a>
      </div>
    </nav>
  </div>
</div>

예 2

순풍 css 로그인 및 가입 버튼이 있는 SvelteKit 반응형 햄버거 메뉴.

<script>
  let showMenu = false;

  function toggleNavbar() {
    showMenu = !showMenu;
  }
</script>

<div>
  <div class="bg-gray-800">
    <nav
      class="container px-6 py-8 mx-auto md:flex md:justify-between md:items-center"
    >
      <div class="flex items-center justify-between">
        <a
          class="text-xl font-bold text-gray-100 md:text-2xl hover:text-blue-400"
          href="/home"
          >Logo
        </a>
        <!-- Mobile menu button -->
        <div on:click={toggleNavbar} class="flex md:hidden">
          <button
            type="button"
            class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div
        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
          ? 'flex'
          : 'hidden'}"
      >
        <a class="text-gray-100 hover:text-blue-400" href="/home">Home</a>
        <a class="text-gray-100 hover:text-blue-400" href="/blog">Blogs</a>
        <a class="text-gray-100 hover:text-blue-400" href="/contact"
          >Contact US</a
        >
        <a class="text-gray-100 hover:text-blue-400" href="/about">About Us</a>
        <div class="space-y-2">
          <a
            href="/login"
            class="py-3 px-4 text-center border text-gray-800 bg-white hover:text-indigo-600 rounded-md block lg:inline lg:border-0"
          >
            Login
          </a>
          <a
            href="/signup"
            class="py-3 px-4 text-center text-white bg-indigo-600 hover:bg-indigo-700 rounded-md shadow block lg:inline"
          >
            Sign Up
          </a>
        </div>
      </div>
    </nav>
  </div>
</div>

예 3

tailwind css를 사용하여 검색하는 SvelteKit navbar 메뉴.

<script>
  let showMenu = false;

  function toggleNavbar() {
    showMenu = !showMenu;
  }
</script>

<div>
  <div>
    <nav
      class="container px-6 py-8 mx-auto md:flex md:justify-between md:items-center"
    >
      <div class="flex items-center justify-between">
        <a
          class="text-xl font-bold text-gray-800 md:text-2xl hover:text-blue-400"
          href="/home"
          >Logo
        </a>
        <!-- Mobile menu button -->
        <div on:click={toggleNavbar} class="flex md:hidden">
          <button
            type="button"
            class="text-gray-800 hover:text-gray-400 focus:outline-none focus:text-gray-400"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-6 h-6"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
              />
            </svg>
          </button>
        </div>
      </div>

      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
      <div
        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
          ? 'flex'
          : 'hidden'}"
      >
        <a class="text-gray-800 hover:text-blue-400" href="/home">Home</a>
        <a class="text-gray-800 hover:text-blue-400" href="/blog">Blogs</a>
        <a class="text-gray-800 hover:text-blue-400" href="/contact"
          >Contact US</a
        >
        <a class="text-gray-800 hover:text-blue-400" href="/about">About Us</a>

        <form class="flex items-center space-x-2 border-2 border-blue-600 rounded-full p-2">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="w-6 h-6 text-gray-800"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"
            />
          </svg>

          <input
            class="w-full outline-none placeholder-gray-800 text-gray-800"
            type="text"
            placeholder="Search"
          />
        </form>
      </div>
    </nav>
  </div>
</div>