設計システムのネストされたコンポーネント

再利用可能で応答性の高いフロントエンドコンポーネント、特にネストされた構造を持つコンポーネントは、重大な課題を提示します。この記事では、過剰なメディアクエリと複製されたスタイリングの落とし穴を回避するソリューションについて説明します。

簡単なアクション（CTA）コンポーネントを考慮してください。小さな画面では、コンパクトなレイアウトが必要です。シンプルなメディアクエリはこれを達成できますが、ネストされたコンポーネントで問題が発生します。たとえば、CTA内のボタンに完全な幅の機能が既にある場合、親の複製スタイリングにメディアクエリを適用します。

この問題は、より複雑なネスティングでエスカレートし、コードの重複とメンテナンスの頭痛にかかっています。全幅ボタンスタイリングの変更には、複数の場所での更新が必要です。よりエレガントなソリューションが必要です。コンテナクエリは可能性を提供しますが、画面サイズに基づいてさまざまなコンポーネントプロップを動的に調整する必要性に完全に対処しません。

この記事では、別のアプローチを提案します。コンポーネントのプロップとJavaScriptを活用して、レスポンシブスタイリングを制御します。

ウィンドウの幅を追跡します

まず、ウィンドウの幅を追跡し、ブレークポイントを定義することから始めます。この例では、Vue Composableを使用しています。

 // composables/usebreakpoints.js
"vue"から{readonly、ref}をimport;

const bps = ref（{xs：0、sm：1、md：2、lg：3、xl：4}）;
const currentbreakpoint = ref（bps.xl）;

Export Default（）=> {
  const updatebreakpoint =（）=> {
    const windowwidth = window.innerwidth;
    // ...（元の記事のようなブレークポイントロジック）...
  };

  return {currentBreakPoint：readonly（currentBreakPoint）、BPS：readonly（bps）、updatebreakpoint};
};

この合成可能は、 App.vueで使用されており、サイズのイベントをリッスンします。

 // app.vue
"@/composables/usebreakpoints"からusebreakpointsをインポートします。
'vue'から{onmounted、onunmounted}をimport;

デフォルトのエクスポート{
  // ...
  設定（） {
    const {updateBreakPoint} = usebreakpoints（）;

    onmounted（（）=> {
      UpdateBreakPoint（）;
      window.addeventlistener（ 'resize'、updatebreakpoint）;
    }）;

    onunmounted（（）=> {
      window.removeeventlistener（ 'resize'、updatebreakpoint）;
    }）;
  }
};

（注：脱出すると、生産環境のパフォーマンスが向上します。）

レスポンシブスタイリング

CTAコンポーネントは、 displayModeプロップを受け入れるように変更されています。

 //コンポーネント/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プロップでは、ブレークポイントごとのモードの仕様を許可します。

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

さらに、応答性のある動作と小道具の検証を管理するために再利用可能なコンポーゼブルズを抽出することにより、コードを大幅に改善できます。 useResponsive and withResponsiveProps Composablesがこれを示しています。

結論

この方法は、応答性のあるコンポーネントシステムを構築するための、より堅牢で保守可能なソリューションを提供します。 JavaScriptおよびCSSクラスを活用することにより、コードの複製を最小限に抑え、一貫性を高め、複雑なレスポンシブレイアウトとネストされたコンポーネントを処理するための柔軟性を高めます。

以上が設計システムのネストされたコンポーネントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。