# ContentPages

Content Pages for static content

# Most common usage scenario

<template>
  <SfContentPages
    :title="title"
    :active="activePage"
    @click:change="activePage = $event"
  >
    <SfContentPage
      v-for="(page, key) in pages"
      :key="page.title + key"
      :title="page.title"
    >
      <SfTabs v-if="page.tabs" :open-tab="1">
        <SfTab
          v-for="(tab, key) in page.tabs"
          :key="tab.title + key"
          :title="tab.title"
          >{{ tab.content }}</SfTab
        >
      </SfTabs>
      <p v-else :style="{ padding: '1rem' }">{{ page.content }}</p>
    </SfContentPage>
  </SfContentPages>
</template>
<script>
import { SfContentPages } from "@storefront-ui/vue";
import { SfTabs } from "@storefront-ui/vue";
export default {
  components: {
    SfContentPages,
    SfTabs,
  },
  data() {
    return {
      activePage: "About us",
      pages: [
        {
          title: "About us",
          tabs: [
            {
              title: "Security",
              content:
                "This website ('website') is operated by Luma Inc., which includes Luma stores, and Luma Private Sales.",
            },
            {
              title: "Privacy Policy",
              content:
                "This website ('website') is operated by Luma Inc., which includes Luma stores, and Luma Private Sales.",
            },
            {
              title: "Additional Information",
              content:
                "This website ('website') is operated by Luma Inc., which includes Luma stores, and Luma Private Sales.",
            },
          ],
        },
        {
          title: "Customer service",
          tabs: [
            {
              title: "Size guide",
              content:
                "This website ('website') is operated by Luma Inc., which includes Luma stores, and Luma Private Sales.",
            },
            {
              title: "Where's my order?",
              content:
                "This website ('website') is operated by Luma Inc., which includes Luma stores, and Luma Private Sales.",
            },
          ],
        },
        {
          title: "Store locator",
          content:
            "This website ('website') is operated by Luma Inc., which includes Luma stores, and Luma Private Sales.",
        },
      ],
      title: "Help",
    };
  },
};
</script>

# Props

  • title

    • Pages title
    • type: string
    • defaultValue: ""
  • active

    • Active page
    • type: string
    • defaultValue: ""

# Slots

  • menu-item

    • Custom menu-item markup
    • bindings: updatePage, page, active
  • default

    • Slot for Content Page

# Events

  • click:change
    • Active page updated event

# CSS modifiers

  • .sf-content-pages__section--is-active

# CSS custom properties (variables)

  • --content-pages-content-page-font
  • --content-pages-content-page-font-weight
  • --content-pages-content-page-font-size
  • --content-pages-content-page-font-line-height
  • --content-pages-content-page-font-family
  • --content-pages-height
  • --content-pages-section-margin
  • --content-pages-transition
  • --content-pages-section-active-transform
  • --content-pages-sidebar-flex
  • --content-pages-sidebar-padding
  • --content-pages-sidebar-background
  • --content-pages-content-flex
  • --content-pages-content-padding
  • --content-pages-sidebar-title-margin
  • --content-pages-sidebar-title-font
  • --content-pages-sidebar-title-font-weight
  • --content-pages-sidebar-title-font-size
  • --content-pages-sidebar-title-font-line-height
  • --content-pages-sidebar-title-font-family
  • --content-pages-sidebar-category-title-margin
  • --content-pages-sidebar-category-title-font
  • --content-pages-sidebar-category-title-font-weight
  • --content-pages-sidebar-category-title-font-size
  • --content-pages-sidebar-category-title-font-line-height
  • --content-pages-sidebar-category-title-font-family

# Overridden other components CSS variables

  • --list-item-padding
  • --list-item-border-width
  • --list-item-margin
  • --list-item-border

You can override CSS variables values bound to this component.

# Internal components

# ContentCategory

# Props

  • title
    • Category title
    • type: string
    • defaultValue: ""

# Slots

  • default

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# ContentPage

# Props

  • title

    • Page title
    • type: string
    • defaultValue: ""
  • icon

    • Page nav title
    • type: string|array
    • defaultValue: ""

# Slots

  • default
    • Custom page markup

# Events

None.

# CSS modifiers

None.

# CSS variables

None.

# Play with this component

See all available configurations and play with this component on Storybook.