hogwarts-ui 官方网站

Appearance

Theme 主题组件 ​

  • h-themt-v1 组件本身无内容，只用来存储主题数据，数据是对象类型
  • 每个主题可以对应多个选择器和类，使用该主题时会自动遍历该主题下所有 selector 选择器，并在其对应的位置追加 class，可以全局复用
vue
<h-theme-v1 :h_data="h_theme"></h-theme-v1>
<h-theme-v1 :h_data="h_theme"></h-theme-v1>
yaml
theme_name1:
  - selector: .h-card1
    class: text-white1
  - selector: .h-card2
    class: text-white2
theme_name2:
  - selector: .h-card3
    class: text-white3
theme_name1:
  - selector: .h-card1
    class: text-white1
  - selector: .h-card2
    class: text-white2
theme_name2:
  - selector: .h-card3
    class: text-white3
  • 数据定义存储好之后，会缓存到本地，就可以在其他组件上进使用，使用时在组件 class 上 追加 ht-theme_name1，即可
vue
<h-card-v1 h_data="ui_card_v51" class="ht-theme_name1"></h-card-v1>
<h-card-v1 h_data="ui_card_v51" class="ht-theme_name1"></h-card-v1>
  • 需要确保该数据组件先被使用，然后才是其他组件调用

基础用法-存储主题 ​

  • 比如新增一个主题 card_blue，将标题改为蓝色，描述改为深灰色，描述背景添加浅灰色
js
{
		card_blue: [
			{
				selector: '.h-header',
				class: 'text-blue-500'
			},
			{
				selector: '.h-description',
				class: 'text-gray-800 bg-gray-200'
			}
		],
	}
{
		card_blue: [
			{
				selector: '.h-header',
				class: 'text-blue-500'
			},
			{
				selector: '.h-description',
				class: 'text-gray-800 bg-gray-200'
			}
		],
	}
点击查看示例代码
vue
<template>
	<h-theme-v1 :h_data="h_theme_1"></h-theme-v1>
</template>

<script setup>
	const h_theme_1 = {
		card_blue: [
			{
				selector: '.h-header',
				class: 'text-blue-500'
			},
			{
				selector: '.h-description',
				class: 'text-gray-800 bg-gray-200'
			}
		],
		card_orange: [
			{
				selector: '.h-header',
				class: 'text-orange-500'
			}
		]
	}
</script>
<template>
	<h-theme-v1 :h_data="h_theme_1"></h-theme-v1>
</template>

<script setup>
	const h_theme_1 = {
		card_blue: [
			{
				selector: '.h-header',
				class: 'text-blue-500'
			},
			{
				selector: '.h-description',
				class: 'text-gray-800 bg-gray-200'
			}
		],
		card_orange: [
			{
				selector: '.h-header',
				class: 'text-orange-500'
			}
		]
	}
</script>
点击查看示例代码（yaml）
yaml
card_blue:
  - selector: '.h-header'
    class: 'text-blue-500'
  - selector: '.h-description'
    class: 'text-gray-800 bg-gray-200'
card_orange:
  - selector: '.h-header'
    class: 'text-orange-500'
card_blue:
  - selector: '.h-header'
    class: 'text-blue-500'
  - selector: '.h-description'
    class: 'text-gray-800 bg-gray-200'
card_orange:
  - selector: '.h-header'
    class: 'text-orange-500'

使用主题数据 1 ​

  • 使用时，直接在改组件的 class，追加 ht-主题名称, class: 'ht-card_blue',
点击查看示例代码
vue
<template>
	<h-card-v1 h_data="ui_card_v51"></h-card-v1>
</template>
<script setup>
	const ui_card_v51 = {
		class: 'ht-card_blue',
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com', target: '_blank' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
<template>
	<h-card-v1 h_data="ui_card_v51"></h-card-v1>
</template>
<script setup>
	const ui_card_v51 = {
		class: 'ht-card_blue',
		image:
			'https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png',
		header: '90天产品经理实战班',
		meta: ['BAT大厂', '7200元', '三个月'],
		description: [
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理',
			'学习大厂实用方法论，做有大局观、能拿结果的产品经理'
		],
		extra: [
			{ name: '查看详情', link: 'https://www.baidu.com', target: '_blank' },
			{ name: '修改', link: 'https://www.baidu.com' }
		]
	}
</script>
点击查看示例代码（yaml）
yaml
class: 'ht-card_blue'
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
    target: '_blank'
  - name: 修改
    link: 'https://www.baidu.com'
class: 'ht-card_blue'
image: >-
  https://ceshiren.com/uploads/default/original/3X/4/d/4d3b8204803034fe7293fcd7b1b3473c759827c8.png
header: 90天产品经理实战班
meta:
  - BAT大厂
  - 7200元
  - 三个月
description:
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
  - 学习大厂实用方法论，做有大局观、能拿结果的产品经理
extra:
  - name: 查看详情
    link: 'https://www.baidu.com'
    target: '_blank'
  - name: 修改
    link: 'https://www.baidu.com'