hogwarts-ui 官方网站meta-v1 副标题
- meta副标题，可以设置它的颜色和大小
基本用法
点击查看示例代码
vue
<template>
<h-meta-v1 :h_data="h_data1"></h-meta-v1>
</template>
<script setup>
const h_data1 = {
// 组件名称
component: 'h-meta-v1',
// 样式
class: '',
// 图片
content: [
'行业专家+名校教授，带你快速提升AI技能',
]
}
</script><template>
<h-meta-v1 :h_data="h_data1"></h-meta-v1>
</template>
<script setup>
const h_data1 = {
// 组件名称
component: 'h-meta-v1',
// 样式
class: '',
// 图片
content: [
'行业专家+名校教授，带你快速提升AI技能',
]
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
点击查看示例代码(yaml)
yaml
component: h-meta-v1
content:
- 行业专家+名校教授，带你快速提升AI技能component: h-meta-v1
content:
- 行业专家+名校教授，带你快速提升AI技能1
2
3
2
3
整体变换样式
- 整体变换样式只需要在class中添加样式即可生效
点击查看示例代码
vue
<template>
<h-meta-v1 :h_data="h_data4"></h-meta-v1>
</template>
<script setup>
const h_data4 = {
// 组件名称
component: 'h-meta-v1',
// 样式
class: '!text-3xl',
// 图片
content: [
'行业专家+名校教授，带你快速提升AI技能',
]
}
</script><template>
<h-meta-v1 :h_data="h_data4"></h-meta-v1>
</template>
<script setup>
const h_data4 = {
// 组件名称
component: 'h-meta-v1',
// 样式
class: '!text-3xl',
// 图片
content: [
'行业专家+名校教授，带你快速提升AI技能',
]
}
</script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
点击查看示例代码(yaml)
yaml
component: h-meta-v1
class: !text-3xl
content:
- 行业专家+名校教授，带你快速提升AI技能component: h-meta-v1
class: !text-3xl
content:
- 行业专家+名校教授，带你快速提升AI技能1
2
3
4
2
3
4