README

此包提供了一种简单的方法，在 WordPress/WP Bones 中使用纯 CSS 创建选项卡。

要求

此包与使用 WP Bones 框架库 编写的 WordPress 插件兼容。

安装

您可以使用以下方法安装第三方包：

php bones require  wpbones/pure-css-tabs

我建议使用此命令而不是 composer require，因为这样做将自动重命名。

您可以使用 composer 安装此包

composer require  wpbones/pure-css-tabs

您也可以在您的插件 composer.json 文件中添加 " wpbones/pure-css-tabs": "~0.7"

  "require": {
    "php": ">=7.4",
    "wpbones/wpbones": "~1.5",
    " wpbones/pure-css-tabs": "~0.7"
  },

并运行

composer install

为控制器排队

您可以使用提供者来排队样式。

public function index()
{
  // enqueue the minified version
  PureCSSTabsProvider::enqueueStyles();

  // ...

}

PureCSSTabsProvider

这是一个由 composer 自动加载的静态类。您可以使用它来排队或获取样式路径

// enqueue the minified version
PureCSSTabsProvider::enqueueStyles();

// enqueue the flat version
PureCSSTabsProvider::enqueueStyles( false );

// return the absolute path of the minified css
PureCSSTabsProvider::css();

// return the absolute path of the flat css
PureCSSTabsProvider::css();

HTML 标记

<!-- main tabs container -->
<div class="wpbones-tabs">

  <!-- first tab -->
  <input id="tab-1" type="radio" name="tabs" checked="checked" aria-hidden="true">
  <label for="tab-1" tabindex="0"><?php _e( 'Database' ) ?</label>
  <div class="wpbones-tab">
    <h3>Content</h3>
  </div>

  <!-- second tab -->
  <input id="tab-2" type="radio" name="tabs" aria-hidden="true">
  <label for="tab-2" tabindex="0"><?php _e( 'Posts' ) ?></label>
  <div class="wpbones-tab">
    <h3>Content</h3>
  </div>

  <!-- son on... -->

</div>

当然，您也可以使用 片段 功能来包含单个选项卡

<!-- main tabs container -->
<div class="wpbones-tabs">

  <!-- first tab -->
  <?php echo WPkirk()->view( 'folder.tab1' ) ?>

  <!-- second tab -->
  <?php echo WPkirk()->view( 'folder.tab2' ) ?>

  <!-- son on... -->

</div>

在 /folder/tab1.php 中，您只需插入以下标记

<!-- first tab -->
<input id="tab-1" type="radio" name="tabs" checked="checked" aria-hidden="true">
<label for="tab-1" tabindex="0"><?php _e( 'Database' ) ?></label>
<div class="wpbones-tab">
 <h3>Content</h3>
</div>

自定义

当然，您可以编辑 CSS 或 LESS 文件以更改选项卡的显示效果。在 LESS 文件中，您还可以找到颜色变量。

@wpbones-tab-border-color : #aaa;
@wpbones-tab-responsive-accordion-border : #ddd;
@wpbones-tab-disabled : #ddd;
@wpbones-tab-content-color : #fff;

💡 无论如何，自定义您的选项卡的最佳方法是覆盖默认样式。否则，当更新时，您将丢失自定义设置。

助手

此外，您还可以使用 PureCSSTabsProvider 类提供的一些方法。在您的 HTML 视图中，您可能使用

    /**
     * Display tabs by array
     *
     *     self::tabs(
     *       'tab-1' => [ 'label' => 'Tab 1', 'content' => 'Hello', 'selected' => true ],
     *       'tab-2' => [ 'label' => 'Tab 1', 'content' => 'Hello' ],
     *       ...
     *     );
     *
     * @param array $array
     */
    WPKirk\PureCSSTabs\PureCSSTabsProvider::tabs(
      'tab-1' => [ 'label' => 'Tab 1', 'content' => 'Hello', 'selected' => true ],
      'tab-2' => [ 'label' => 'Tab 1', 'content' => 'Hello' ],
      ...
    );

此外，您还可以使用 openTab() 和 closeTab() 方法

  /**
   * Display the open tab.
   *
   * @param string $label    The label of tab.
   * @param null   $id       Optional. ID of tab. If null, will sanitize_title() the label.
   * @param bool   $selected Optional. Default false. TRUE for checked.
   */
   public static function openTab( $label, $id = null, $selected = false ) {}

<div class="wpbones-tabs">

  <?php WPKirk\PureCSSTabs\PureCSSTabsProvider::openTab( 'Tab 1', null, true ) ?>
    <h2>Hello, world! I'm the content of tab-1</h2>
  <?php WPKirk\PureCSSTabs\PureCSSTabsProvider::closeTab ?>

  <?php WPKirk\PureCSSTabs\PureCSSTabsProvider::openTab( 'Tab 2' ) ?>
    <h2>Hello, world! I'm the content of tab-2</h2>
  <?php WPKirk\PureCSSTabs\PureCSSTabsProvider::closeTab ?>

</div>

👆 请记住，在上面的示例中，我使用了 WPKirk 基础命名空间。您应该将其替换为您自己的命名空间。