TailwindCSS를 사용하여 대시보드 만들기 - 섹션 2

액체 오류: 내부

선결 조건

이 문장은 Create a dashboard with TailwindCSS - Part 1의 연장이기 때문에, 만약 당신이 아직 읽지 않았다면, 당신은 시작하기 전에 한 번 보아야 합니다.
너는 진도를 따라갔니?계속합시다.

스타일 가이드 페이지 만들기

스타일 가이드를 만들려면 NuxtJS 프로젝트의 페이지 폴더로 이동하여 styleguide라는 파일을 추가하는 새 페이지가 필요합니다.vue.
페이지를 만든 후, 나는 메인 제목이 있는 제목을 추가하고, 앉아서 내가 위에 표시하고 싶은 부분을 생각했다.모든 부분에 비슷한 제목과 간격이 있기 때문에 StyleSection이라는 구성 요소를 만들었습니다.모든 vue가 포함됩니다.
그래서 스타일guide.vue 템플릿에는 StyleSection 구성 요소에 대한 참조가 몇 개 있으며, 참조마다 다른 내용이 있습니다.

<template>
  <div>
    <header>
      <h1>Style guide</h1>
    </header>
    <style-section>
      <template slot="title">Colors</template>
      <colors />
    </style-section>
    <style-section>
      <template slot="title">
        <!-- Title: as Gradients, Font Style & Icons -->
      </template>
      <!-- Component: as Gradients, Fonts & Icons -->
    </style-section>
  </div>
</template>

우리 페이지의 스크립트에서, 우리는 모든 구성 요소만 가져올 것입니다.

As they'll be only in the style guide page, I've created a folder in components folder named styleguide where I will store each one of them.

<script>
import StyleSection from '~/components/styleguide/StyleSection.vue'
import Colors from '~/components/styleguide/Colors.vue'
/* Import Components */

export default {
  components: {
    StyleSection,
    Colors,
    /* Components imported */
  }
}
</script>

건축부재

이제 새로운 구성 요소와 그 기능을 살펴보자.

StyleSection

앞서 언급한 바와 같이, 일반적인 스타일을 가지고 같은 상자에 모든 구성 요소를 표시할 수 있도록 Style Section을 만들었습니다.styleguide 폴더의 vue입니다.

  <template>
    <div class="pt-8">
      <header class="pb-6">
        <h3 class="capitalize">
          <slot name="title"></slot>
        </h3>
        <p class="pb-2 border-b border-gray-300 text-gray-700">
          <slot name="title"></slot> for app theme.
        </p>
      </header>
      <slot />
    </div>
  </template>

여기서, 나는 단지 절 사이의 간격과 기본 제목 스타일을 추가하기만 하면 된다.나는 동적 내용을 불러오기 위해 두 개의 슬롯을 만들었다.제목이 제목인 슬롯에서 스타일guide 부분의 제목을 받습니다.vue를 통해

  <template slot="title">Colors</template>

이름이 지정되지 않은 슬롯에서 스타일 섹션 태그의 나머지 내용을 수신합니다.

Now that we have the basis of each section, let's see what each one is about!

색상

제가 여러분께 보여드리고자 하는 첫 번째 구성 요소는 저희 팔레트를 보여주는 구성 요소입니다.
이 글은 Tailwind CSS에 새로운 유틸리티를 추가할 가능성을 논의하고 싶습니다. 저는 뒤집기 카드와 같은 변환을 선택하여tailwind 기본 설정에 존재하지 않는 새로운 속성을 추가했습니다. 어떻게 추가하는지 보여 드리겠습니다!

We're going to add a new utility by creating our own plugin, everything I'm going to explain is taken from the official documentation.

우리가 해야 할 첫 번째 일은tailwindcss/plugin을 가져와tailwind의 변수에 저장하는 것입니다.구성js.

  const plugin = require('tailwindcss/plugin')

그것을 사용하려면 프로필의 플러그인 부분에 다음 코드를 추가해야 합니다.이 플러그인에서 카드 변환에 필요한 CSS 속성을 정의합니다. 이 속성들은 순풍의 초기 스타일에 없습니다.
이러한 속성은 원근, 뒷면 가시성, 값 보존이 있는 변환 스타일 - 3d와 회전 변환입니다.

  plugin(function({ addUtilities }) {
      const newUtilities = {
        '.rotate-y-0': {
          transform: 'rotateY(0deg)'
        },
        '.rotate-y-180': {
          transform: 'rotateY(180deg)'
        },
        '.transform-style-3d': {
          transformStyle: 'preserve-3d'
        },
        '.backface-hidden': {
          backfaceVisibility: 'hidden'
        },
        '.perspective': {
          perspective: '1000px'
        }
      }

      addUtilities(newUtilities, ['group-hover'])
   })

ddUtilities를 통해 새로운 클래스를 추가할 때, 그룹 호버 위조 변수가 있는 그룹을 전달합니다. 이렇게 하면 특정한 부모 요소에 멈출 때 하위 요소에 적용될 수 있습니다.

A pseudo-class variant allows you to style elements on hover, focus, and more. Check the multiple variants here.

현재 우리는 클래스를 만들었습니다. 클래스를 사용하여 변환합시다!
색상이라는 구성 요소를 만들었습니다.vue, styleguide 폴더에 있습니다.그 중에서 나는 모든 색깔의 색조 목록을 포함하는 flexbox를 정의했다.

  <template>
    <div>
      <div
        v-for="color in colors"
        :key="color.name"
        class="flex flex-wrap justify-center md:justify-start -mr-4"
      >
        <div v-for="item in color.palette" :key="item.color" class="pr-4 pb-4">
          <!-- Flip Card template -->
        </div>
      </div>
    </div>
  </template>

이런 상황에서 우리는 두 가지 색깔이 있는데, 원색과 상호보완색, 각각 열 가지 색조가 있다.
그것들을 표시하기 위해서 나는 두 개의 대상을 포함하는'색'이라는 그룹을 만들었다. 하나는 원색과 팔레트이고, 다른 하나는 서로 색을 보완하는 데 쓰인다.구조는 다음과 같습니다.

  colors: [
    {
      name: 'primary',
      palette: [
        {
          color: 'bg-primary-50',
          hex: '#e0f3ed',
          name: '50'
        },
        /* Other options */
      ]
    },
    {
      name: 'complementary',
      palette: [
        {
          color: 'bg-complementary-50',
          hex: '#fce5ea',
          name: '50'
        },
        /* Other options */
      ]
    }
  ]

회전 카드 컴포넌트
flexbox 용기 안에는 뒤집기 과도가 있는 색카드가 있을 것입니다. 보기에는 다음과 같습니다.

그러기 위해서는 세 가지를 고려해야 한다.

카드의 크기는 동적일 수 없으며 부모 면과 요소 면에서 정적 크기를 정의해야 합니다.부모 객체에는 회전에서 깊이감을 제공하는 원근 뷰가 있습니다.

회전은 하나의 중간 요소에 의해 실행될 것이다. 우리가 아래 코드에서 보듯이 이 요소는 그룹 정지 변체를 가지고 있다.부모 요소는 그룹 클래스를 포함해야 합니다. 그룹이 멈추어야 작동합니다.

변환은 -3d를 유지하고 회전과 같은 중간 요소에서 실행해야 합니다.

생성된 템플릿은 다음과 같습니다.

  <div class="group perspective w-28 h-28 cursor-pointer">
    <div class="relative group-hover:rotate-y-180 transform-style-3d transition ease-linear duration-700">
      <div class="card__front">
        <!-- Front Card Content (Show by default) -->
      </div>
      <div :class="item.color" class="card__back">
        <!-- Back Card Content -->
      </div>
    </div>
  </div>

면에 대해 우리는 위치, 크기, 뒷면 가시성, 숨겨진 카드 효과 생성에 필요한 스타일 등 흔히 볼 수 있는 스타일을 정의해야 한다.그리고 Y 축에서 회전하는 특정 스타일을 사용하여 중간 요소의 그룹 스톱을 수행할 때 올바른 면을 표시합니다.
따라서 이 스타일을 제공하기 위해 두 종류의 카드\uufront와 카드\uuback을 정의해야 합니다.

  <style scoped>
  .card__front,
  .card__back {
    @apply backface-hidden absolute top-0 right-0 rounded-lg flex flex-col items-center justify-center shadow-md w-28 h-28;
  }
  .card__front {
    @apply bg-white z-10 rotate-y-0 p-4;
  }
  .card__back {
    @apply rotate-y-180 p-2;
  }
  </style>

지금, 우리는 임의의 많은 색깔과 색조를 추가할 수 있다!!✨

사다리

너는 교과서가 매우 길다고 생각할 수도 있지만, 걱정하지 마라. 내용이 더 많은 구성 요소는 이전이다.이제 남은 건 산책이야!
이 구성 요소에 대해 TailwindCSS plugin package 는 플러그인을 만들지 않아도 된다는 것을 알려주고 싶습니다.
그것을 사용하려면 로컬에 설치하기만 하면 됩니다.

  npm i tailwindcss-plugins -D

우리의 순풍을 높이다.구성js 파일 플러그인 부분, 우리가 사용할 플러그인은 이 예에서 점차적으로 변한다.

  plugins: [
    require('tailwindcss-plugins/gradients')
  ]

그래디언트를 정의하려면 테마로 이동하여 다음과 같이 그래디언트를 추가하면 됩니다.그런 다음 그래디언트 이름을 선택하여 선택한 bg 이름으로 사용하고 사용할 방향과 색을 설정하는 그룹을 만듭니다.

  theme: {
    ...,
    gradients: (theme) => ({
      'primary-45': [
        '45deg',
        theme('colors.primary.700'),
        theme('colors.primary.300')
      ],
      'complementary-45': [
        '45deg',
        theme('colors.complementary.700'),
        theme('colors.complementary.300')
      ],
      'mixed-45': [
        '45deg',
        theme('colors.complementary.300'),
        theme('colors.primary.100')
      ]
    })
  },

현재 우리는 템플릿에서 그것을 bg-primary-45, bg-complementary-45, bg-mixed-45로 사용할 수 있다.이러한 변수를 객체의 사다리꼴 속성으로 보내면 다음과 같이 동적으로 표현할 수 있습니다.

  <template>
    <div class="flex flex-wrap -mr-4 md:-mr-6">
      <div
        v-for="item in gradients" :key="item.name"
        class="w-full sm:w-1/2 md:w-56 pr-4 md:pr-6 pb-4"
      >
        <!-- Color composition -->
        <p
          :class="item.gradient /* item.gradient == 'bg-name-gradient' */"
        >{{ item.name }}</p>
      </div>
    </div>
  </template>

글꼴 스타일

글꼴vue 구성 요소는 신비롭지 않습니다.우리는 이미 기본 파일에 모든 스타일을 정의했기 때문에, 나는 단지 대시보드에 나타날 수 있는 모든 요소의 예시를 간단하게 배치했을 뿐이다.
이것은 생성된 템플릿과 뷰가 됩니다.

  <template>
    <div class="flex flex-wrap items-stretch justify-start">
      <header
        class="w-full lg:w-auto border-gray-400 pb-6 border-b lg:pb-0 lg:border-b-0 lg:pr-12 lg:border-r"
      >
        <h1>Heading h1</h1>
        <!-- Other Headings -->
      </header>
      <div
        class="w-full lg:max-w-xl border-gray-400 py-6 border-b lg:py-0 lg:border-b-0 lg:px-12 lg:border-r"
      >
        <p>
          Lorem ipsum
          <span class="italic">italic</span>
          <span class="text-primary-900">primary 900</span>
          <span class="underline">underline</span>
          ...
        </p>
        <p class="pt-4 font-bold">
          Font bold lorem ipsum.
        </p>
      </div>
      <p
        class="w-full lg:w-auto border-gray-400 pt-6 lg:pt-0 lg:pl-12 flex flex-col items-center justify-center"
      >
        <span class="text-giant leading-none">Aa</span>
        <span class="text-lg">Source Sans Pro</span>
      </p>
    </div>
  </template>

아이콘

마지막, 마지막 구성 요소!현재 사용 중인 아이콘을 대시보드에 표시하기로 결정했습니다.

I'll be expanding this component as I add new icons.

색을 결정해야 하고 우리의 가능성을 보여줄 수 있는 것을 피하기 위해 색 선택기를 만들기로 했습니다.간단하게 말하면, 색상 중 하나를 누르면 ChooseColor 변수가 업데이트되고, fillcurrent 속성이 있는 아이콘이 이 스타일을 적용합니다.
여기서, 나는 이 구성 요소를 당신들에게 보여 드리겠습니다. 왜냐하면 나는 계속하는 과정에서 아이콘을 추가해야 하기 때문에, 아이콘 스타일이라는 클래스를 만들어서 다시 사용할 수 있도록 했습니다.

As always with the styles of TailwindCSS using @apply.

  <template>
    <div :class="choosenColor">
      <ul class="w-full flex flex-wrap items-center pb-4">
        <li><p class="pr-4 pb-2 text-gray-700">Select color</p></li>
        <li v-for="color in colors" :key="color.bg" class="pr-2">
          <button
            :class="color.bg" class="w-6 h-6 rounded-full focus:outline-none"
            :aria-label="'Choose ' + color.text" @click="choosenColor = color.text"
          />
        </li>
      </ul>
      <div class="flex flex-wrap">
        <p class="pb-4 pr-4"><bone class="icon-style" /></p>
        <!-- Other Icons -->
      </div>
    </div>
  </template>

  <script>
  import Bone from '~/components/icons/Bone.vue'
  /* Other Icons */

  export default {
    components: {
      Bone,
      /* Other Icons imported */
    },
    data() {
      return {
        colors: [
          { text: 'text-primary-500', bg: 'bg-primary-500' },
          /* Other options */
        ],
        choosenColor: ''
      }
    }
  }
  </script>

  <style scoped>
  .icon-style {
    @apply bg-white rounded-lg shadow-md p-2 w-12 h-12 fill-current;
  }
  </style>

좋다나는 이미 계기판에서 너에게 진전 상황을 알려주었으니, 만약 네가 어떤 의문이 있거나 다음 문장을 지도하고 싶다면, 언제든지 나에게 연락해라💜
이것은 우리의 스타일 가이드 페이지입니다.

이 항목을 Heroku에 올렸기 때문에 Cabbage Dashboard 에서 결과를 볼 수 있습니다.💜
새 구성 요소를 추가하고 절차를 설명하지만, 이 시리즈에서 보고 싶은 모든 기능을 실행하도록 요구할 수 있습니다.🥰
저장소를 보려면 다음과 같이 하십시오. https://github.com/Dawntraoz/cabbage