순풍 CSS가 있는 부동 양식 필드

15054 단어 tailwindcsswebdevcss
다음 수업에서는 Tailwind CSS 실용 프로그램 우선 순위 방법을 사용하여 Material Design 에서 이미 알고 있는 부동 폼 필드를 만드는 방법을 배울 것입니다.이것은 사람을 경외하게 하는 영상 계발이다.

새로운 프로젝트에서 따라갈 수도 있고 GitHub에서 얻을 수도 있다source code.

설치 프로그램


빈 디렉터리부터 package.json 를 사용하여 기본 npm init -y 파일을 설정합니다.

순풍 CSS 설정


설치Tailwind
npm i -D tailwindcss postcss-cli autoprefixer
순풍 프로필을 생성하고 나중에 부동 폼 필드 customize 순풍을 생성합니다.
npx tailwindcss init
postcss.config.js 파일을 만들려면 플러그인tailwindcss 및 autoprefixer이 필요합니다.
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer")
  ]
};
css/tailwind.css에서 순풍 스타일 만들기
@tailwind base;
@tailwind components;
@tailwind utilities;
이 스크립트를 package.json 에 추가하면 하나는 생성에 사용되고, 다른 하나는 tailwind.css 파일에 대한 변경 사항을 볼 수 있습니다.
"scripts": {
  "build": "postcss css/tailwind.css -o public/build/tailwind.css",
  "dev": "postcss css/tailwind.css -o public/build/tailwind.css -w"
},

HTML 설정


다음 간단한 HTML 레이아웃부터 시작하여 공통 디렉토리에 생성합니다index.html.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>FFFwT</title>

    <link rel="stylesheet" href="build/tailwind.css" />
  </head>
  <body class="antialiased p-10">
    <form>
      <div>
        <input type="text" name="username" placeholder=" " />
        <label for="username">Username</label>
      </div>
    </form>
  </body>
</html>
live-server 를 사용하여 실시간으로 다시 불러오는 dev 서버를 시작할 수 있습니다.
live-server public
이것은 당신의 출발점입니다. 입력과 라벨입니다.

부동 폼 필드를 만들기 위해 스타일을 추가합니다.

부동 양식 필드


초점 테두리


먼저 div 를 사용하여 아래쪽 테두리를 border-b-{width} 에 추가합니다.
<div class="border-b-2">
  <input type="text" name="username" placeholder=" " />
  <label for="username">Username</label>
</div>

입력에 초점을 맞출 때 테두리 색을 변경하려면 위조 클래스focus-within를 사용하십시오.변체 섹션 아래borderColor에 추가하여 tailwind.config.js 순풍에 사용focus-within variant:
variants: {
  borderColor: ['responsive', 'hover', 'focus', 'focus-within'],
},
초점의 테두리 색상을 변경하려면 focus-within:border-blue-500 추가
<div class="my-4 border-b-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " />
  <label for="username">Username</label>
</div>

부동 레이블


먼저 div 의 위치를 relative 로 변경하여 top 제어 label 의 위치를 사용할 수 있도록 합니다.class="absolute top-0"에 추가합니다.label는 블록 요소로 변경하기 위해 Tailwindinput 클래스를 추가하는 내연 요소입니다.또한 block 입력 폭을 100%로 설정하여 전체 폼 필드의 입력을 클릭할 수 있습니다.또한 브라우저의 특정 스타일을 삭제하기 위해 입력에 w-full 및 appearance-none 을 추가합니다.
<div class="relative my-4 border-b-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none" />
  <label for="username" class="absolute top-0">Username</label>
</div>
현재 탭이 입력 필드를 덮어쓰므로 입력에 초점을 맞추지 못합니다🙈.

레이블의 focus:outline-none 을 z-index 로 설정하고 입력 필드 뒤에 있는 것으로 변경합니다.'순풍'테마를 확장하여 마이너스 z 지수를 생성합니다.
theme: {
  extend: {
    zIndex: {
      "-1": "-1",
    },
  },
}
태그에 클래스z-index: -1를 추가하면 태그가 더 이상 보이지 않습니다.-z-1에 추가합니다.
<div class="relative my-4 border-b-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
  <label for="username" class="absolute top-0 -z-1">Username</label>
</div>
탭이 다시 표시되거나 탭을 붙여서 입력 필드에 초점을 맞출 수 있습니다🐵.
다음에 위류bg-transparent를 다시 사용하여 라벨을 입력 위에 띄웁니다.input를 열고 다음 CSS 선택기를 추가합니다.
input:focus-within ~ label {

}
이제 Tailwind@apply를 사용하여 입력 포커스에서 태그 텍스트 색상을 변경, 축소 및 변경합니다.
input:focus-within ~ label {
 @apply transform scale-75 -translate-y-6 text-blue-500;
}
라벨 변환 지속 시간을 제어하기 위해 focus-within 을 label 클래스에 추가합니다.

너무 좋아요. 라벨이 떠요.🎈, 그러나 입력에서 포커스를 제거하면 부동이 중지됩니다.😞. 입력 필드에 내용이 있으면 탭이 부동해야 합니다.tailwind.css을(를) 대상으로 하고 표시되지 않는 경우duration-300 내용을 입력하면 태그가 부동해야 합니다.
input:focus-within ~ label,
input:not(:placeholder-shown) ~ label {
  @apply transform scale-75 -translate-y-6;
}

input:focus-within ~ label {
  @apply text-blue-500;
}

그래🤩, 내용을 입력하면 레이블이 초점에 떠 있습니다.태그가 입력 필드와 일치하지 않는 것 같습니다.레이블의 placeholder 을 0%로 설정합니다.Tailwind를 생성하고 열고input:not(:placeholder-shown) ~ label 테마 섹션에 추가합니다.
theme: {
  extend: {
    transformOrigin: {
      "0": "0%",
    },
    zIndex: {
      "-1": "-1",
    },
  },
}
태그에 transform-origin 를 추가합니다. 마지막으로 Tailwind CSS를 사용하여 부동 양식 필드를 만들 수 있습니다.😍🚀

구축 양식


부동 폼 필드를 복사하거나 @apply 추출 스타일을 사용하여 폼 필드를 구축합니다.
양식에 tailwind.config.js 을 추가하여 입력 필드 사이에 여백을 추가합니다.너도 카드로 그것을 싸도 된다.
 <form class="max-w-sm mx-auto rounded-lg shadow-xl overflow-hidden p-6 space-y-10">
  <h2 class="text-2xl font-bold text-center">Login</h2>
  <div class="relative border-b-2 focus-within:border-blue-500">
    <input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
    <label for="username" class="absolute top-0 -z-1 duration-300 origin-0">Username</label>
  </div>
  <div class="relative border-b-2 focus-within:border-blue-500">
    <input type="text" name="email" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
    <label for="email" class="absolute top-0 -z-1 duration-300 origin-0">Email</label>
  </div>
  <div class="relative border-b-2 focus-within:border-blue-500">
    <input type="password" name="password" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
    <label for="password" class="absolute top-0 -z-1 duration-300 origin-0">Password</label>
  </div>
</form>
이것은 부동 폼 필드를 사용하는 첫 번째 폼입니다.

그런 다음 다른 스타일 - 아웃라인 양식 필드를 시도합니다.

개요 양식 필드


이 스타일에서 폼 필드 주위에 윤곽이 있고 라벨이 윤곽으로 떠다닌다.부동 양식 필드를 다시 사용하고 origin-0 를 space-y-{size} 로 변경하면 대강을 제공합니다.
채우기border-b-2를 추가하여 아웃라인에 공간을 만들고 입력 및 레이블의 글꼴 크기border-2를 늘립니다.
<div class="relative border-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
  <label for="username" class="absolute top-0 p-4 text-lg -z-1 duration-300 origin-0">Username</label>
</div>
개요 양식 필드 보기

입력에 초점을 맞추면 라벨이 윤곽을 덮어쓰지 않았다는 것을 알 수 있습니다.

태그를 아웃라인을 덮어쓰려면 아웃라인 양식 필드에 적용되는 부동 CSS를 사용자 정의합니다.p-4에서 사용자 정의 CSS를 복사하고 text-lg 클래스를 두 선택기에 추가합니다.입력 및 레이블 주위tailwind.css에 클래스.outline를 추가합니다.
.outline input:focus-within ~ label,
.outline input:not(:placeholder-shown) ~ label {
  @apply transform scale-75 -translate-y-6;
}
레이블의 일부 스타일을 업데이트하여 위쪽 및 아래쪽 채우기를 제거합니다 - outline.동시에 좌우 채우기를 div 로 줄이고 왼쪽 여백 py-0 을 추가하여 입력에 맞게 정렬합니다.z 인덱스를 px-1 로 재설정하여 레이블을 아웃라인 위에 배치합니다.마지막으로 레이블이 컨투어와 완전히 일치할 때까지 변환 y 값을 줄입니다.
.outline input:focus-within ~ label,
.outline input:not(:placeholder-shown) ~ label {
  @apply transform scale-75 -translate-y-4 z-0 ml-3 px-1 py-0;
}
완벽한 라벨은 완전히 윤곽에 있지만 선은 여전히 보인다.

윤곽을 숨기려면 탭의 배경을 양식 필드를 배치한 컨테이너의 동일한 배경으로 설정합니다.태그에 ml-3 를 추가하면 됩니다.
<div class="outline relative border-2 focus-within:border-blue-500">
  <input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
  <label for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
</div>
현재, 대강 표 필드도 일하고 있다.👍

구축 양식


이제 윤곽 스타일을 사용하여 폼을 만듭니다.
<form class="max-w-sm mx-auto rounded-lg shadow-xl overflow-hidden p-6 space-y-10">
  <h2 class="text-2xl font-bold text-center">Login</h2>
  <div class="outline relative border-2 focus-within:border-blue-500">
    <input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
    <label for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
  </div>
  <div class="outline relative border-2 focus-within:border-blue-500">
    <input type="email" name="email" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
    <label for="email" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Email</label>
  </div>
  <div class="outline relative border-2 focus-within:border-blue-500">
    <input type="password" name="password" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
    <label for="password" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Password</label>
  </div>
</form>

따라다니면 순풍 CSS가 있는 부동 폼 필드를 만들고 사용자 정의합니다.트위터에 너의 디자인을 나에게 보내라.
3. Git FAQ
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-war-plugin:2.1.1:war

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage