README

这是一个非常简单的WordPress块编辑器标签块。

目标是创建一个极具灵活性的工具，提供简单的标记而不包含任何样式，便于您轻松将其与主题集成。

它还旨在提高可访问性。实现方式参考了MDN Aria标签角色文档。

性能也非常重要。JavaScript轻量且无依赖。

标签块由2个块组成。一个是容器标签块，另一个是子标签项块。标签项块只是一个包装器，允许您添加任何您希望的内容。

保存的标记。

本块的一个目标是将保存的HTML保持在非常简洁。即使此插件被禁用，也应该看起来不错。

所有功能和交互元素都是即时创建的，无论是服务器端渲染还是在JavaScript中构建。

标签的样式。

标签是功能性的，但没有样式。

以下是一个标记示例，展示了您可以使用来样式的类。

<div class="hm-tabs hm-tabs--is-initialized">
    <div class="hm-tabs__nav" role="tablist">
        <button class="hm-tabs__nav-button hm-tabs__nav-button--is-active">Tab 1</button>
        <button class="hm-tabs__nav-button">Tab 2</button>
        ...
    </div>
    <div class="hm-tabs__content">
        <div class="wp-block-hm-tabs-item hm-tabs-item">
            <h2 class="hm-tabs-item__title">Tab 1</h2>
            <div class="hm-tabs-item__content">
            </div>
        </div>
        <div class="wp-block-hm-tabs-item hm-tabs-item">
            <h2 class="hm-tabs-item__title">Tab 2</h2>
            <div class="hm-tabs-item__content">
            </div>
        </div>
        ...
    </div>
</div>

示例样式

以下是一些用于美化复古风格的标签的CSS。

.hm-tabs__nav {
	display: flex;
	position: relative;
	z-index: 1;
	margin: 0 0 -1px 0;
}

.hm-tabs__nav-button {
	background-color: #ddd;
	border: 1px solid #aaa;
	padding: 12px 16px;
	margin: 0;
	font-size: 12px;
}

.hm-tabs__nav-button + .hm-tabs__nav-button {
	border-left: none;
}

.hm-tabs__nav-button--is-active {
	background-color: #fff;
	border-bottom-color: #fff;
}

.hm-tabs__content {
	background-color: #fff;
	border: 1px solid #aaa;
	padding: 16px;
}

一些有用的样式和动画类。

• .hm-tabs--is-initialized 当JavaScript初始化标签功能时添加。
• .hm-tabs--is-visible 当标签首次滚动到视图中时添加。
• `.hm-tabs--is-focused`` 当标签处于活动状态时添加。
• .hm-tabs-item--is-active 当标签显示后添加，之后移除。

动画示例

除了上述样式外，使用此样式在切换标签时创建滑动/淡入效果。

@keyframes testFadeInLeft {
	from {
		visibility: hidden;
		opacity: 0;
		-webkit-transform: translate3d(-100%, 0, 0);
		transform: translate3d(-100%, 0, 0);
	}

	1% {
		visibility: visible;
	}

	to {
		opacity: 1;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
	}
}

@keyframes testFadeOutRight {
	from {
		opacity: 1;
		visibility: visible;
	}

	99% {
		visibility: visible;
	}

	to {
		opacity: 0;
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
		visibility: hidden;
	}
}

.hm-tabs__content {
	position: relative;
	display: grid;
	overflow: hidden;

	.hm-tabs-item {
		grid-column: 1;
		grid-row: 1;

		&[hidden="true"] {
			display: block;
			opacity: 0;
			visibility: hidden;
		}
	}
}

.hm-tabs-item {
	position: relative;

	&:not(.hm-tabs-item--is-active) {
		animation-duration: 0.25s;
		animation-name: testFadeOutRight;
	}

	&--is-active {
		opacity: 1;
		animation-duration: 0.25s;
		animation-name: testFadeInLeft;
	}
}