Title: Metro Tabs – Responsive Tabs Block
Author: Ciprian Popescu
Published: <strong>2026 年 3 月 12 日</strong>
Last modified: 2026 年 5 月 20 日

---

搜索插件

![](https://ps.w.org/metro-tabs/assets/banner-772x250.png?rev=3481383)

![](https://ps.w.org/metro-tabs/assets/icon-256x256.png?rev=3481383)

# Metro Tabs – Responsive Tabs Block

 作者：[Ciprian Popescu](https://profiles.wordpress.org/butterflymedia/)

[下载](https://downloads.wordpress.org/plugin/metro-tabs.1.1.6.zip)

 * [详情](https://cn.wordpress.org/plugins/metro-tabs/#description)
 * [评价](https://cn.wordpress.org/plugins/metro-tabs/#reviews)
 * [开发进展](https://cn.wordpress.org/plugins/metro-tabs/#developers)

 [支持](https://wordpress.org/support/plugin/metro-tabs/)

## 描述

Metro Tabs adds block-editor (Gutenberg) blocks for building tabbed content. You
add a **Metro Tabs: Tab Group** block, then add one or more **Metro Tabs: Tab Item**
blocks inside it. Each tab has a heading (the label visitors click) and a content
area where you can add any blocks—paragraphs, images, lists, etc. On the front end,
visitors see a simple tab bar and panes; clicking a tab switches the visible content
without reloading the page.

#### Features

 * **Tab Group block** – Container for one set of tabs. You can use multiple Tab
   Group blocks on the same page for different tab sets.
 * **Tab Item block** – A single tab: editable heading and a content area that supports
   any blocks (paragraphs, headings, images, etc.).
 * **No JavaScript libraries** – Uses vanilla JavaScript only; no jQuery or jQuery
   UI.
 * **Block API version 3** – Compatible with the current block editor (WordPress
   6.3+ iframe editor).
 * **Lightweight styling** – Discrete front-end styles (underline-style active tab);
   you can override with your theme or custom CSS.

#### How to use

 1. In the block editor, add a **Metro Tabs: Tab Group** block (search for “Metro Tabs”
    or “Tab Group”).
 2. Inside the group, you’ll see placeholder Tab Items (e.g. “Tab 1”, “Tab 2”). Click
    each **Metro Tabs: Tab Item** block and:
 3.  * Edit the **tab heading** (the text shown on the tab).
     * Add any blocks in the **tab content** area (paragraphs, images, etc.).
 4. Add or remove Tab Item blocks as needed. You can add more Tab Groups elsewhere 
    on the page for separate tab sets.
 5. Publish or update. On the front end, the tab bar and panes are built automatically;
    clicking a tab switches the visible pane.

No settings or configuration are required. The plugin enqueues its script and styles
on the front end when the page contains tab blocks.

#### Compatibility

 * Requires WordPress 6.0 or higher (block editor).
 * Requires PHP 8.0 or higher.

## 屏幕截图

[⌊Front-end tabs⌉⌊Front-end tabs⌉[

Front-end tabs

[⌊Front-end tabs⌉⌊Front-end tabs⌉[

Front-end tabs

[⌊Front-end tabs⌉⌊Front-end tabs⌉[

Front-end tabs

[⌊Back-end block editor with Tab Group and Tab Item blocks⌉⌊Back-end block editor
with Tab Group and Tab Item blocks⌉[

Back-end block editor with Tab Group and Tab Item blocks

[⌊Back-end block editor with Tab Group and Tab Item blocks⌉⌊Back-end block editor
with Tab Group and Tab Item blocks⌉[

Back-end block editor with Tab Group and Tab Item blocks

[⌊Source code demonstrating ARIA roles and keyboard navigation attributes⌉⌊Source
code demonstrating ARIA roles and keyboard navigation attributes⌉[

Source code demonstrating ARIA roles and keyboard navigation attributes

## 区块

该插件提供了 1 个区块.

 *   Metro Tabs: Tab Item One tab (heading + content) for use inside a Metro Tabs
   tab group.

## 评价

此插件暂无评价。

## 贡献者及开发者

「Metro Tabs – Responsive Tabs Block」是开源软件。 以下人员对此插件做出了贡献。

贡献者

 *   [ Ciprian Popescu ](https://profiles.wordpress.org/butterflymedia/)

[帮助将「Metro Tabs – Responsive Tabs Block」翻译成简体中文。](https://translate.wordpress.org/projects/wp-plugins/metro-tabs)

### 对开发感兴趣吗?

您可以[浏览代码](https://plugins.trac.wordpress.org/browser/metro-tabs/)，查看[SVN仓库](https://plugins.svn.wordpress.org/metro-tabs/)，
或通过[RSS](https://plugins.trac.wordpress.org/log/metro-tabs/?limit=100&mode=stop_on_copy&format=rss)
订阅[开发日志](https://plugins.trac.wordpress.org/log/metro-tabs/)。

## 更新日志

#### 1.1.6

 * UPDATE: Tested up to WordPress 7.0

#### 1.1.5

 * Add WAI-ARIA Tabs pattern (roles, states, and properties)
 * Add keyboard navigation (Arrow keys, Home, End) with automatic activation
 * Add roving tabindex and visible focus styles for keyboard users
 * Rename .simple-tabs-block CSS class to .metro-tabs-block

#### 1.1.4

 * Rename all internal references from TabX to Metro Tabs
 * Rename asset files to use metrotabs prefix
 * Add docblocks for all PHP functions

#### 1.1.3

 * Use plugin_dir_path() and plugin_dir_url() for correct path/URL resolution
 * Remove updater
 * Shorten readme short description
 * Add version and $in_footer to enqueued scripts and styles

#### 1.1.2

 * Fixed plugin name

#### 1.1.1

 * Fixed block registration

#### 1.1.0

 * First release

## 额外信息

 *  版本 **1.1.6**
 *  最后更新：**3 周前**
 *  活跃安装数量 **100+**
 *  WordPress 版本 ** 6.0 或更高版本 **
 *  已测试的最高版本为 **7.0**
 *  PHP 版本 ** 8.0 或更高版本 **
 *  语言
 * [English (US)](https://wordpress.org/plugins/metro-tabs/)
 * 标签
 * [blocks](https://cn.wordpress.org/plugins/tags/blocks/)[gutenberg](https://cn.wordpress.org/plugins/tags/gutenberg/)
   [responsive](https://cn.wordpress.org/plugins/tags/responsive/)[tab](https://cn.wordpress.org/plugins/tags/tab/)
   [tabs](https://cn.wordpress.org/plugins/tags/tabs/)
 *  [高级视图](https://cn.wordpress.org/plugins/metro-tabs/advanced/)

## 评级

尚未提交反馈。

[Your review](https://wordpress.org/support/plugin/metro-tabs/reviews/#new-post)

[查看全部评论](https://wordpress.org/support/plugin/metro-tabs/reviews/)

## 贡献者

 *   [ Ciprian Popescu ](https://profiles.wordpress.org/butterflymedia/)

## 支持

有话要说吗？是否需要帮助？

 [查看支持论坛](https://wordpress.org/support/plugin/metro-tabs/)