Vueで Card型の Atomic Componentを作成する方法

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Vueで Card型の Atomic Componentを作成する方法について解説していきます。

1 Vueで Card型の Atomic Componentを作成する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

Vueで Card型の Atomic Componentを作成する方法

Card型の Atomic Component の要件定義

今回、作成するCard型の Atomic Component の要件定義をまとめると、次のとおりです。

icon画像と、MainMessage、Description(SubMsg・説明文) の 3つの構成要素からなるCard型のComponent
iconImage, MainMsg, Description の 3つは、Propsで設定できる。
iconStyle, MainMsgStyle, DescriptionStyleなどの CSSもPropsで設定できる。

Card型の Atomic Component の SampleCode

<!-- AppealMsgCard_Component -->
<template>
  <div :style="cardStyle">
    <div :style="iconWrapperStyle">
      <img :src="svgIcon" :alt="iconAltName" :style="iconStyle" />
    </div>
    <div class="appeal_card_msg_block">
      <div v-text="mainMsg" :style="mainMsgStyle"></div>
      <div v-text="description" :style="descriptionStyle"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "AppealMsgCard",
  components: {},
  // カラーとアイコンとタイトルと説明を入力する
  props: {
    // 1. icon情報を Propsで受け取る
    svgIcon: {
      required: true,
    },
    // 2. img の alt属性
    iconAltName: {
      type: String,
      default: "",
    },
    // 3. Main の Msg
    mainMsg: {
      type: String,
      default: "",
      required: true,
    },
    // 4. Sub の Msg (説明文)
    description: {
      type: String,
      default: "",
    },
    // 5. Card 全体の Style
    cardStyle: {
      type: Object,
      default: () => {
        return {
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center",
          flexWrap: "nowrap",
          gap: "12px",
          width: "300px",
          height: "220px",
          margin: "20px",
          borderRadius: "5px",
          backgroundColor: "#fff",
          boxShadow: "0 3px 6px #ccc",
        };
      },
    },
    // 6. Icon_Image の Style
    iconStyle: {
      type: Object,
      default: () => {
        return {
          color: "#1C92FF",
          width: "106px",
          height: "77px",
        };
      },
    },
    // 7. Icon_Wrapper の Style
    iconWrapperStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // 8. Main の Msg の Style
    mainMsgStyle: {
      type: Object,
      default: () => {
        return {
          color: "#1C92FF",
        };
      },
    },
    // 9. Sub の Msg (説明文) の Style
    descriptionStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
.appeal_card_msg_block {
  display: flex;
  flex-direction: column;
}
</style>