Skip to content
SHINSEGAE V UI

Tab+Product

샘플 페이지

3개
BRAND NAME
1 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
2 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
3 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
4 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
5 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
HTML
<section class="v-tmpl v-tmpl--tab-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">3개</h2>
  <script type="module">
    if (!window.customElements.get('swiper-container')) {
      import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
    }
    if (!window.customElements.get('tab-container')) {
      import('/ui/element/tab-container.js');
    }
  </script>


  <!-- 탭 -->
  <tab-container active-index="0" role="tablist" class="v-tab">
    <!-- … -->
  </tab-container>
  <!-- /탭 -->


  <script type="module">
    if (!window.customElements.get('swiper-container')) {
      import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
    }
  </script>


  <swiper-container
    space-between="24"
    slides-per-view="3"
    slides-per-group="3"
    navigation="true"
    pagination="true"
    class="v-carousel">
    <swiper-slide>
      <div class="v-product-unit">
        <div class="v-product-unit__media-grid">
          <a href="#" class="v-product-unit__link">
            <div class="v-media-embed v-media-embed--dim v-product-unit__media">
              <img
                class="v-media-embed__element v-media-embed__image"
                src="/dummy/images/s3/goods/org/328/250225061574328.jpg?RS=350&#38;SP=1"
                alt
                width="375"
                height="562" />
            </div>
          </a>


          <div class="v-product-unit__top-right">
            <button
              title="찜하기"
              data-command="toggleWish"
              type="button"
              class="v-button v-wish-button v-product-unit__wish-button">
              <svg fill="none" viewBox="0 0 24 24">
                <path
                  stroke="currentColor"
                  stroke-miterlimit="10"
                  d="M19.658 5.587a4.475 4.475 0 0 0-6.478 0L12 6.806l-1.18-1.22a4.475 4.475 0 0 0-6.478 0c-1.79 1.85-1.79 4.847 0 6.697L12 20.2l7.658-7.916c1.79-1.85 1.79-4.847 0-6.696Z"></path>
              </svg>
            </button>
          </div>
        </div>
        <a href="#" class="v-product-unit__link">
          <div class="v-product-unit__content">
            <div class="v-line-clamp-2 v-product-unit__brand">STUDIO TOMBOY</div>
            <div class="v-line-clamp-2 v-product-unit__name">[탭1] 레더 블루종 자켓</div>
            <div class="v-product-unit__price-group">
              <span class="v-product-unit__price">299,000</span>
            </div>
          </div>
        </a>
      </div>
      <!-- /상품 유닛 -->
    </swiper-slide>
    <!-- … -->
  </swiper-container>


  <div class="v-button-wrap">
    <button type="button" class="v-button v-button--outlined v-button--full">
      <span class="v-button__text"> 더 많은 상품 보기 </span>
    </button>
  </div>
</section>

3.5개
BRAND NAME
1 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
2 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
3 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
4 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
BRAND NAME
5 NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME NAME
000,000
HTML
<section class="v-tmpl v-tmpl--tab-product" style="margin-bottom: 48px">
  <h2 class="v-truncate v-title">3개</h2>
  <script type="module">
    if (!window.customElements.get('swiper-container')) {
      import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
    }
    if (!window.customElements.get('tab-container')) {
      import('/ui/element/tab-container.js');
    }
  </script>


  <!-- 탭 -->
  <tab-container active-index="0" role="tablist" class="v-tab">
    <!-- … -->
  </tab-container>
  <!-- /탭 -->


  <script type="module">
    if (!window.customElements.get('swiper-container')) {
      import('/ui/lib/swiper/swiper-element-customized-bundle.min.js');
    }
  </script>


  <swiper-container
    slides-offset-before="40"
    slides-offset-after="40"
    space-between="24"
    slides-per-view="3.6"
    free-mode="true"
    class="v-carousel">
    <swiper-slide>
      <div class="v-product-unit">
        <div class="v-product-unit__media-grid">
          <a href="#" class="v-product-unit__link">
            <div class="v-media-embed v-media-embed--dim v-product-unit__media">
              <img
                class="v-media-embed__element v-media-embed__image"
                src="/dummy/images/s3/goods/org/328/250225061574328.jpg?RS=350&#38;SP=1"
                alt
                width="375"
                height="562" />
            </div>
          </a>


          <div class="v-product-unit__top-right">
            <button
              title="찜하기"
              data-command="toggleWish"
              type="button"
              class="v-button v-wish-button v-product-unit__wish-button">
              <svg fill="none" viewBox="0 0 24 24">
                <path
                  stroke="currentColor"
                  stroke-miterlimit="10"
                  d="M19.658 5.587a4.475 4.475 0 0 0-6.478 0L12 6.806l-1.18-1.22a4.475 4.475 0 0 0-6.478 0c-1.79 1.85-1.79 4.847 0 6.697L12 20.2l7.658-7.916c1.79-1.85 1.79-4.847 0-6.696Z"></path>
              </svg>
            </button>
          </div>
        </div>
        <a href="#" class="v-product-unit__link">
          <div class="v-product-unit__content">
            <div class="v-line-clamp-2 v-product-unit__brand">STUDIO TOMBOY</div>
            <div class="v-line-clamp-2 v-product-unit__name">[탭1] 레더 블루종 자켓</div>
            <div class="v-product-unit__price-group">
              <span class="v-product-unit__price">299,000</span>
            </div>
          </div>
        </a>
      </div>
      <!-- /상품 유닛 -->
    </swiper-slide>
    <!-- … -->
  </swiper-container>


  <div class="v-button-wrap">
    <button type="button" class="v-button v-button--outlined v-button--full">
      <span class="v-button__text"> 더 많은 상품 보기 </span>
    </button>
  </div>
</section>