mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-27 05:00:48 +08:00
Code Issues Packages Projects Releases Wiki Activity
d3d7f368b9
naive-ui/demo/documentation/components/popover/zhCN/placement.demo.md
07akioni 487001d697 build: add changelog to site, refactor loader based on suffix 
.demo.md for component demo
.demo-entry.md for demo entry
.md for common docs
2020-08-19 23:30:04 +08:00

3.4 KiB
Raw Blame History

位置

<div class="popover-grid">
  <n-popover placement="top-start" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 1 / 1 / 2 / 2;">
        Top Start
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="top" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 1 / 2 / 2 / 3;">
        Top
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="top-end" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 1 / 3 / 2 / 4;">
        Top End
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="left-start" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 2 / 1 / 3 / 2;">
        Left Start
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="left" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 3 / 1 / 4 / 2;">
        Left
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="left-end" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 4 / 1 / 5 / 2;">
        Left End
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="right-start" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 2 / 3 / 3 / 4;">
        Right Start
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="right" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 3 / 3 / 4 / 4;">
        Right
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="right-end" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 4 / 3 / 5 / 4;">
        Right End
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="bottom-start" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 5 / 1 / 6 / 2;">
        Bottom Start
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="bottom" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 5 / 2 / 6 / 3;">
        Bottom
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
  <n-popover placement="bottom-end" trigger="click">
    <template v-slot:activator>
      <n-button size="small" style="grid-area: 5 / 3 / 6 / 4;">
        Bottom End
      </n-button>
    </template>
    <div class="large-text">
      啊！
    </div>
  </n-popover>
</div>

.popover-grid {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-gap: 12px;
  justify-content: center;
  align-items: center;
}

.large-text {
  font-size: 48px;
}