README

WordPress/WP Bones 的纯 CSS 切换按钮

需求

此包与使用 WP Bones 框架库 编写的 WordPress 插件一起工作。

安装

您可以通过使用以下命令安装第三方包

php bones require  wpbones/pure-css-switch

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

您可以使用 composer 安装此包

composer require  wpbones/pure-css-switch

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

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

并运行

composer install

开发安装

使用 yarn 安装开发工具。然后，使用 gulp --production 编译资源。

控制器排队

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

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

  // ...

}

PureCSSSwitchProvider

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

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

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

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

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

模式

默认情况下，切换按钮作为开/关按钮工作。您可以通过设置 mode 属性来更改模式，

<?php echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )
            ->mode( 'select' ); ?>

在上面的示例中，您可以用选择器代替开/关按钮。

主题

当然，您可以使用 theme 属性或其流畅版本来切换主题。目前，我们支持两种主题

• flat-round - 默认
• flat-square

您应该使用类似以下的内容

<?php echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )
            ->theme( 'flat-square' ); ?>

示例

在您的视图中，您可以使用 WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton 类

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-1' );

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-2' )
  ->left_label( 'Swipe me' );

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-3' )
  ->right_label( 'Swipe me' );

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-4' )
  ->left_label( 'Swipe me' )
  ->right_label( 'Swipe me' );

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-5' )
  ->left_label( 'Swipe me' )
  ->checked( true );

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-6' )
  ->left_label( 'Swipe me' )
  ->disabled( true );

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-7' )
  ->theme( 'flat-square' );

echo WPKirk\PureCSSSwitch\Html\HtmlTagSwitchButton::name( 'test-switch-8' )
  ->left_label( 'Turn left' )
  ->right_label( 'Turn right' )
  ->mode( 'select' );