소개

Requires a basic understanding of html, vue and tailwindcss.

이 때문에 <details> 태그의 기본 스타일이 보기 흉한 것으로 나타났습니다.
대부분의 사람들은 그것을 사용하지 않기로 결정하고 어떤 종류의 divs , h1 및 ul 로 대체합니다.
이를 지원하는 국가 관리.

기본적으로 스타일링 없이 닫혀 있는 것처럼 보입니다.



그리고 이건 개봉하면



그러나 Tailwind와 약간의 vue 마법을 사용하면 이를 달성할 수 있습니다.


열 때.

낭비할 시간 없이 시작하겠습니다.

프로젝트 구조

이를 vue 웹사이트에 통합하기 위해 새로운 npm 또는 yarn 또는 pnpm vue 앱을 시작할 필요가 없습니다.

저는 개인적으로 이 프로젝트에 pnpm과 vite를 사용했습니다.

pnpx create-vite .
pnpm install . 
pnpm install tailwindcss autoprefixer postcss 
tailwindcss init -p
pnpm run dev

구성 요소 파일과 tailwindcss만 활성화하면 됩니다. 이것보다 더 작아 보이지 않아야 합니다.



최상의 결과를 얻으려면 원하는 벡터 라이브러리를 추가하십시오. 하지만 이 프로젝트에서는 font-awesome을 사용할 것입니다.

이 스크립트 태그를 index.html에 추가하여 벡터 라이브러리를 포함했습니다.

    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>

index.css 파일을 main.js 파일로 가져오는 것을 잊지 마세요.

App.vue

여기에는 아무것도 없습니다. 기본 가져오기 및 데이터 선언만 수행합니다.

<template>
  <custom-details :title="heading" :data="tools" />
</template>

<script>
import CustomDetails from './components/custom-details.vue';
export default {
  components: { CustomDetails },
  data(){
    return {
      heading: "Tools for building a website",
      tools: ["HTML", "CSS", "JavaScript", "VueJS", "ReactJS", "Vite"]
    }
  }
}
</script>

커스텀 디테일 컴포넌트

사용자 정의 세부 구성 요소에서 일부 템플릿을 작성해 보겠습니다.

<template>
  <details>
    <summary>
      <div>
        <h2> {{title}} </h2>
        <i class="fa fa-caret-down"></i>
      </div>
    </summary>
    <ul>
      <li v-for="(detail, index) in detailData" :key="index">
        {{ detail }}
      </li>
    </ul>
  </details>
</template>

In this template, no style is being added to it to keep it readable and easy to modify. All styles will be written in the styles tag.

일부 기능을 추가할 시간

스크립트 태그에서

<script>
export default {
  props: ["title", "data"],
  data(){
    return {
      detailData: this.data instanceof Array ? [...this.data] : []
    }
  }
}
</script>

설명

먼저 props 특성을 사용하여 사용자 지정 세부 정보에 필요한 제목 및 일부 문자열 데이터 배열 데이터를 정의해야 합니다.

  ...
  props: ["title", "data"]
  ...

그런 다음 부모 구성 요소에서 제공하는 data가 배열인지 확인해야 하므로 데이터가 배열인지 확인하고 배열이 아니면 테너리 연산자를 사용하여 빈 배열을 반환합니다.

this.data instanceof Array ? [...this.data] : []

몇 가지 스타일을 추가할 시간입니다(재미있는 부분 :)

코드를 깔끔하게 만들기 위해 styles 태그를 사용하고 있습니다.

기본 스타일

일반적으로 빌드 도구에서 자동으로 main.js 파일로 가져오는 style.css의 맨 위에 다음을 추가합니다.

  @tailwind base;
  @tailwind utilities;

@tailwind components;는 더 이상 스타일이 필요하지 않기 때문에 추가되지 않았습니다.

구성 요소 스타일

스타일 태그는 초기에 다음과 같아야 합니다.

  <style scoped>
  </style>

먼저 details 태그에 스타일을 추가해 보겠습니다.

    details{
      @apply border border-gray-300 rounded-md my-2 mx-auto;
    }

다음으로 summary 태그의 기본 마커를 제거하고 스타일을 지정합니다.

    ...
    summary::-webkit-details-marker,
    summary::marker{
      display: none;
    }

    details > summary{
      @apply flex py-2 cursor-pointer;
    }

    details[open] > summary{
      @apply border-b border-gray-300;
    }
    ...

그런 다음 내부 요약 div 스타일 지정

    ...

    summary > div {
      @apply flex items-center gap-x-6 w-full text-gray-700 px-4;
    }

    ...

마지막으로 목록의 스타일을 지정합니다.

    ...

    details > ul {
      @apply flex flex-col divide-y-2 divide-gray-200;
    }

    ul > li {
      @apply flex px-4 hover:bg-gray-50 cursor-pointer text-sm text-gray-500 font-bold py-1.5
    }

최종 CSS는 다음과 같아야 합니다.

<style scoped>

  details{
    @apply border border-gray-300 rounded-md my-2 mx-auto;
  }

  details > summary{
    @apply flex py-2 cursor-pointer;
  }

  details[open] > summary{
    @apply border-b border-gray-300;
  }

  summary::-webkit-details-marker,
  summary::marker{
    display: none;
  }

  summary > div {
    @apply flex items-center gap-x-6 w-full text-gray-700 px-4;
  }

  details > ul {
    @apply flex flex-col divide-y-2 divide-gray-200;
  }

  ul > li {
    @apply flex px-4 hover:bg-gray-50 cursor-pointer text-sm text-gray-500 font-bold py-1.5
  }

</style>

제대로 따랐다면 결과는 다음과 같습니다.



읽어주셔서 감사하고 좋은 하루 되세요.