디자인 시스템의 중첩 구성 요소

재사용 가능하고 반응이 좋은 프론트 엔드 구성 요소, 특히 중첩 된 구조물이있는 구성 요소를 구축하는 것은 중요한 과제를 제시합니다. 이 기사는 과도한 미디어 쿼리와 복제 된 스타일의 함정을 피하는 솔루션을 탐구합니다.

간단한 CTA (Call-to-Action) 구성 요소를 고려하십시오. 작은 화면에서는 컴팩트 한 레이아웃을 원합니다. 간단한 미디어 쿼리는이를 달성 할 수 있지만 중첩 구성 요소에서는 문제가 발생합니다. 예를 들어, CTA 내의 버튼에 이미 전체 폭 기능이있는 경우, 부모에게 미디어 쿼리를 적용하는 스타일을 중복시킵니다.

이 문제는보다 복잡한 중첩으로 확대되어 상당한 코드 복제 및 유지 보수 두통이 발생합니다. 전체 너비 버튼 스타일로 변경하려면 여러 곳에서 업데이트가 필요합니다. 더 우아한 솔루션이 필요합니다. 컨테이너 쿼리는 잠재력을 제공하지만 화면 크기에 따라 다양한 구성 요소 소품을 동적으로 조정해야 할 필요성을 완전히 해결하지 못합니다.

이 기사는 다른 접근법을 제안합니다. 반응 형 스타일을 제어하기 위해 구성 요소 소품과 JavaScript를 활용합니다.

추적 창 너비

우리는 창 너비를 추적하고 중단 점을 정의하는 것으로 시작합니다. 이 예제는 VUE Composable을 사용합니다.

 // composables/evidebreakpoints.js
"vue"에서 {readonly, ref} 가져 오기;

const bps = ref ({xs : 0, sm : 1, md : 2, lg : 3, xl : 4});
const currentbreakpoint = ref (bps.xl);

내보내기 default () => {
  const updatebreakpoint = () => {
    const windowwidth = window.innerWidth;
    // ... (원본 기사에서와 같이 브레이크 포인트 로직) ...
  };

  return {currentBreakPoint : ReadOnly (currentBreakPoint), bps : readOnly (bps), updatebreakpoint};
};

이 composable은 App.vue 에서 크기 조정 이벤트를 듣는 데 사용됩니다.

 // app.vue
"@/composables/easebreakpoints"에서 easebreakpoints 가져 오기;
'vue'에서 {onmounted, onunmounted} import;

내보내기 기본값 {
  // ...
  설정() {
    const {updatebreakpoint} = eedbreakpoints ();

    onmounted (() => {
      UpdateBreakPoint ();
      window.addeventListener ( 'resize', updatebreakpoint);
    });

    OnUnmounted (() => {
      window.removeEventListener ( 'Resize', UpdateBreakPoint);
    });
  }
};

(참고 : Defouncing은 생산 환경에서 성능을 향상시킬 것입니다.)

반응 형 스타일

CTA 구성 요소는 displayMode Prop을 수락하도록 수정됩니다.

 // 구성 요소/cta.vue
<template>
  <div :class="`cta ${mode}`">
    <div class="cta-content">
      <h5>제목</h5>
      <p>설명</p>
    </div>
    <btn :block="mode === 'compact'">계속하다</btn>
  </div>
</template>

<script>
import Btn from "@/components/ui/Btn";
import { useResponsive, withResponsiveProps } from "@/composables/useResponsive";

export default {
  name: "CTA",
  components: { Btn },
  props: withResponsiveProps(['default', 'compact'], {}),
  setup(props) {
    const { mode } = useResponsive(props);
    return { mode };
  }
};
</script>

<style scoped>
.cta {
  display: flex;
  align-items: center;
  &.compact {
    flex-direction: column;
    .cta-content {
      margin-right: 0;
      margin-bottom: 2rem;
    }
  }
}
</style>

mode currentBreakpoint 기반으로 결정됩니다.

<cta :display-mode="currentBreakpoint.value > bps.md ? 'default' : 'compact'"></cta>

이렇게하면 구성 요소 내에서 미디어 쿼리가 필요하지 않습니다.

고급 기능 및 재사용 성

이 접근법은 이전 중단 점으로 되돌리거나 페이지 전체에 다른 모드를 사용하는 것과 같은보다 복잡한 시나리오로 확장됩니다. customMode Props는 파열 당 모드 사양을 허용합니다.

<cta :custom-mode="['compact', 'default', 'compact']"></cta>

또한, 반응 형 동작 및 소품 검증을 관리하기위한 재사용 가능한 합성물을 추출하여 코드를 크게 향상시킬 수 있습니다. useResponsive 및 withResponsiveProps Composables가이를 보여줍니다.

결론

이 방법은 반응 형 구성 요소 시스템을 구축하기위한보다 강력하고 유지 관리 가능한 솔루션을 제공합니다. JavaScript 및 CSS 클래스를 활용하여 코드 복제를 최소화하고 일관성을 향상 시키며 복잡한 반응 형 레이아웃 및 중첩 구성 요소를 처리 할 수있는 유연성을 제공합니다.

위 내용은 디자인 시스템의 중첩 구성 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!