10up 导航组件

无障碍和反应灵敏的导航组件.

安装

国家预防机制

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

独立

克隆此还原并导入 navigation.js 财务报告和审定财务报表 navigation.css 从 dist/ 目录.

API 密码

此组件接受两个参数,即导航容器的选择器和一个包含配置设置和可选回调的对象.

设置

• action: 用于打开菜单项目的动作 (默认) 盘旋
• breakpoint: 切换到小屏幕菜单的 Viewport 断点 (默认) (明-微: 48

回电

• onCreate: 组件初始化后在页面负荷中调用
• onOpen: 打开菜单项时调用
• onClose: 当菜单项关闭时调用
• onSubmenuOpen: 打开子菜单项时调用
• onSubmenuClose: 当子菜单项关闭时调用

使用量

标记

这是组件预期的标记模板 .

<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>

支助科

样式可以通过使用 PostCSS 导入来导入到您现有的代码库, 或者通过将独立的 CSS 文件包含在您的工程中 .

PostCSS 导入

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

独立

包含 navigation.css 从文档 dist/ 目录.

Java 脚本

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

国家预防机制

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' );
    }
} );

独立

包含 navigation.js 从文档 dist/ 目录和从 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 目录.

支助级别

活动 : 10up公司正在积极开展这方面的工作,我们期望在可预见的未来继续工作,包括不断测试最新的WordPress版本。 欢迎错误报告、特性请求、问题和拉动请求.

就像你看到的一样?