@10up/component-navigation 中文文档教程

Question

10up Navigation component

可访问且响应迅速的导航组件。

Installation

NPM

npm install --save @10up/component-navigation

Standalone

克隆这个 repo 并从 dist 导入 navigation.js 和 navigation.css / 目录。

API

该组件接受两个参数，导航容器的选择器和一个包含配置设置和可选回调的对象。

Settings

• action: The action to use to open menu items (default) hover
• breakpoint: Viewport breakpoint to switch to small screen menu (default) (min-width: 48em)

Callbacks

• onCreate: Called after the component is initialized on page load
• onOpen: Called when a menu item is opened
• onClose: Called when a menu item is closed
• onSubmenuOpen: Called when a submenu item is opened
• onSubmenuClose: Called when a submenu item is closed

Usage

Markup

这是组件期望的标记模板。

<nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement">

    <a href="#primary-nav" aria-controls="primary-nav" class="site-menu-toggle">
        <span class="screen-reader-text">Primary Menu</span>
        <span aria-hidden="true">☰</span>
    </a>

    <?php
        wp_nav_menu( array(
            'theme_location' => 'primary',
            'menu_class'     => 'primary-menu',
            'menu_id'        => 'primary-nav',
            ) );
    ?>

</nav>

CSS

这些样式可以通过使用 PostCSS 导入或通过在您的项目中包含独立的 CSS 文件来导入到您现有的代码库中。

PostCSS Imports

@import '@10up/component-navigation';

Standalone

包含 dist/ 目录中的 navigation.css 文件。

JavaScript

通过提供用于导航的选择器和包含任何必要的配置设置和回调函数的对象来创建一个新实例。

NPM

import Navigation from '@10up/component-navigation';

new Navigation( '.navigation', {
    action: 'click',
    onCreate: function() {
        console.log( 'onCreate callback' );
    },
    onOpen: function() {
        console.log( 'onOpen callback' );
    },
    onClose: function() {
        console.log( 'onClose callback' );
    },
    onSubmenuOpen: function() {
        console.log( 'onSubmenuOpen callback' );
    },
    onSubmenuClose: function() {
        console.log( 'onSubmenuClose callback' );
    }
} );

Standalone

包含 dist/ 目录中的 navigation.js 文件，并从 gobal TenUp 对象访问该组件。

let myNavigation = new TenUp.navigation( '.navigation', {
    action: 'click',
    onCreate: function() {
        console.log( 'onCreate callback' );
    },
    onOpen: function() {
        console.log( 'onOpen callback' );
    },
    onClose: function() {
        console.log( 'onClose callback' );
    },
    onSubmenuOpen: function() {
        console.log( 'onSubmenuOpen callback' );
    },
    onSubmenuClose: function() {
        console.log( 'onSubmenuClose callback' );
    }
} );

Demo

可以在 demo 目录中找到示例实现。

Support Level

活跃：10up 正在为此积极努力，我们希望在可预见的未来继续努力，包括保持对最新版本 WordPress 的测试。 欢迎错误报告、功能请求、问题和请求请求。

Like what you see?