hogwarts-ui 官方网站

Appearance

header-v1 大标题 ​

  • header大标题，可以设置它的颜色和大小

基本用法 ​

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

<script setup>
const h_data1 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '',
  // 图片
  content: [
    '融合人工智能',
    '构建高效测试体系沙龙',
  ]
}
</script>
<template>
  <h-header-v1 :h_data="h_data1"></h-header-v1>
</template>

<script setup>
const h_data1 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '',
  // 图片
  content: [
    '融合人工智能',
    '构建高效测试体系沙龙',
  ]
}
</script>
点击查看示例代码(yaml)
yaml
component: h-header-v1
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
component: h-header-v1
content:
  - 融合人工智能
  - 构建高效测试体系沙龙

设置单行字体的大小和颜色 ​

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

<script setup>
const h_data2 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '',
  // 图片
  content: [
    '融合人工智能{text-7xl text-[#ea893e]}',
    '构建高效测试体系沙龙',
  ]
}
</script>
<template>
  <h-header-v1 :h_data="h_data2"></h-header-v1>
</template>

<script setup>
const h_data2 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '',
  // 图片
  content: [
    '融合人工智能{text-7xl text-[#ea893e]}',
    '构建高效测试体系沙龙',
  ]
}
</script>
点击查看示例代码(yaml)
yaml
component: h-header-v1
content:
  - 融合人工智能{text-7xl text-[#ea893e]}
  - 构建高效测试体系沙龙
component: h-header-v1
content:
  - 融合人工智能{text-7xl text-[#ea893e]}
  - 构建高效测试体系沙龙

某个字的大小和颜色 ​

  • special_class是新增的特殊样式，会遍历内容中包含这些字的内容改变对应的样式
点击查看示例代码
vue
<template>
  <h-header-v1 :h_data="h_data3"></h-header-v1>
</template>

<script setup>
const h_data3 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '',
  // 特殊样式
  special_class: '人工沙{text-7xl text-[#ea893e]}',
  // 图片
  content: [
    '融合人工智能',
    '构建高效测试体系沙龙',
  ]
}
</script>
<template>
  <h-header-v1 :h_data="h_data3"></h-header-v1>
</template>

<script setup>
const h_data3 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '',
  // 特殊样式
  special_class: '人工沙{text-7xl text-[#ea893e]}',
  // 图片
  content: [
    '融合人工智能',
    '构建高效测试体系沙龙',
  ]
}
</script>
点击查看示例代码(yaml)
yaml
component: h-header-v1
special_class: 人工沙{text-7xl text-[#ea893e]}
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
component: h-header-v1
special_class: 人工沙{text-7xl text-[#ea893e]}
content:
  - 融合人工智能
  - 构建高效测试体系沙龙

整体变换样式 ​

  • 整体变换样式只需要在class中添加样式即可生效
点击查看示例代码
vue
<template>
  <h-header-v1 :h_data="h_data4"></h-header-v1>
</template>

<script setup>
const h_data4 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '!text-3xl text-[#ea893e]',
  // 图片
  content: [
    '融合人工智能',
    '构建高效测试体系沙龙',
  ]
}
</script>
<template>
  <h-header-v1 :h_data="h_data4"></h-header-v1>
</template>

<script setup>
const h_data4 = {
  // 组件名称
  component: 'h-header-v1',
  // 样式
  class: '!text-3xl text-[#ea893e]',
  // 图片
  content: [
    '融合人工智能',
    '构建高效测试体系沙龙',
  ]
}
</script>
点击查看示例代码(yaml)
yaml
component: h-header-v1
class: !text-3xl text-[#ea893e]
content:
  - 融合人工智能
  - 构建高效测试体系沙龙
component: h-header-v1
class: !text-3xl text-[#ea893e]
content:
  - 融合人工智能
  - 构建高效测试体系沙龙