hogwarts-ui 官方网站

Appearance

Divider 分割线 ​

基础用法 ​

点击查看示例代码
vue
<template>
  <h-divider-v1 :h_data="h_data"></h-divider-v1>
</template>

<script setup>
const h_data = {
  component: 'h-divider-v1',
}
</script>
<template>
  <h-divider-v1 :h_data="h_data"></h-divider-v1>
</template>

<script setup>
const h_data = {
  component: 'h-divider-v1',
}
</script>

分割线中间加内容 ​

点击查看示例代码
vue
<template>
  <h-divider-v1 :h_data="h_data1"></h-divider-v1>
</template>

<script setup>
const h_data1 = {
  component: 'h-divider-v1',
  display_name: '下一题'
}
</script>
<template>
  <h-divider-v1 :h_data="h_data1"></h-divider-v1>
</template>

<script setup>
const h_data1 = {
  component: 'h-divider-v1',
  display_name: '下一题'
}
</script>

段落分割线（加宽了普通分割线） ​

点击查看示例代码
vue
<template>
  <h-divider-v1 :h_data="h_data2"></h-divider-v1>
</template>

<script setup>
const h_data2 = {
  component: 'h-divider-v1',
  class: 'section',
  display_name: '下一题'
}
</script>
<template>
  <h-divider-v1 :h_data="h_data2"></h-divider-v1>
</template>

<script setup>
const h_data2 = {
  component: 'h-divider-v1',
  class: 'section',
  display_name: '下一题'
}
</script>