Header

Example

기본

타이틀

우측 아이콘이 최대 4개있는 경우

타이틀

우측 아이콘이 없는 경우

타이틀

네비게이션 c-icon이 없는 경우

타이틀

Source Code

<template>
  <div>
    <div class="label">기본</div>
    <c-header title="타이틀">
      <template #left>
        <c-icon name="action-topbar-back-black" size="large" class="icon-button" />
      </template>
      <template #right>
        <c-icon name="action-topbar-share-AOS-black" size="large" class="icon-button" />
        <c-icon :name="`action-topbar-like-${like ? 'on' : 'off'}`" size="large" @click="handleClickLikeButton" class="icon-button" />
      </template>
    </c-header>

    <div class="label">우측 아이콘이 최대 4개있는 경우</div>
    <c-header title="타이틀">
      <template #left>
        <c-icon name="action-topbar-back-black" size="large" class="icon-button" />
      </template>
      <template #right>
        <c-icon name="action-topbar-share-AOS-black" size="large" class="icon-button" />
        <c-icon name="action-topbar-more-black" size="large" class="icon-button" />
        <c-icon name="action-topbar-alert-black" size="large" class="icon-button" />
        <c-icon name="tagclose" size="large" class="icon-button" />
      </template>
    </c-header>

    <div class="label">우측 아이콘이 없는 경우</div>
    <c-header title="타이틀">
      <template #left>
        <c-icon name="action-topbar-back-black" size="large" class="icon-button" />
      </template>
    </c-header>

    <div class="label">네비게이션 c-icon이 없는 경우</div>
    <c-header title="타이틀">
      <template #right>
        <c-icon name="action-topbar-share-AOS-black" size="large" class="icon-button" />
        <c-icon name="action-topbar-more-black" size="large" class="icon-button" />
      </template>
    </c-header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      like: false,
    }
  },
  methods: {
    handleClickLikeButton() {
      this.like = !this.like
    },
  },
}
</script>

<style lang="scss" scoped>
.label {
  padding: 30px 0 10px 0;
}
.icon-button {
  margin-right: 12px;
  &:last-of-type {
    margin-right: 0;
  }
}
</style>

slots

...

props

...