# Шапка страницы (opens new window)

Папка блока

/components/sections/header

Виды шапки определены в компонентах

вид компонента
view1 HeaderView1.vue
view2 HeaderView2.vue
view3 HeaderView3.vue
view4 HeaderView4.vue
view5 HeaderView5.vue
view6 HeaderView6.vue

Компоненты меню в папке /components/sections/header/menu

Компоненты иконок социальных сетей в папке /components/sections/header/social

Svg картинки задются в компоненте SocialList.vue в поле icons

  ...
  data: () => ({
    ...
    icons: {
      vk: `<svg
          width="16"
          height="9"
          viewBox="0 0 16 9"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            ...
          />
        </svg>`,
      fb: `<svg
          width="9"
          height="17"
          viewBox="0 0 9 17"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            ...
          />
        </svg>`,
      youtube: `<svg
          width="16"
          height="12"
          viewBox="0 0 16 12"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            ...
          />
        </svg>`,
      ok: `<svg viewBox="0 0 32 32" width="32" height="32">
          <path
            ...
          ></path>
        </svg>`,
      twitter: `<svg
          width="16"
          height="12"
          viewBox="0 0 16 12"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            ...
          />
        </svg>`,
      instagram: `<svg
          width="16"
          height="16"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            ...
          />
        </svg>`
    }
  })

Имена полей соответствуют символьным кодам, задаваемые в компоненте SocialListEditorItem.vue

...
  data: () => ({
    ...
    types: [
      {
        name: "Вконтакте",
        value: "vk"
      },
      {
        name: "Facebook",
        value: "fb"
      },
      {
        name: "Youtube",
        value: "youtube"
      },
      {
        name: "Одноклассники",
        value: "ok"
      },
      {
        name: "Twitter",
        value: "twitter"
      },
      {
        name: "Instagram",
        value: "instagram"
      }
    ]
  }),
...
Изменено: 18 января 2021 г., 9:54