(css)
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
/*
* Off Canvas
* --------------------------------------------------
*/
@media screen and (max-width: 767px) {
.row-offcanvas {
position: relative;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.row-offcanvas-right
.sidebar-offcanvas {
right: -50%; /* 6 columns */
}
.row-offcanvas-left
.sidebar-offcanvas {
left: -50%; /* 6 columns */
}
.row-offcanvas-right.active {
right: 50%; /* 6 columns */
}
.row-offcanvas-left.active {
left: 50%; /* 6 columns */
}
.sidebar-offcanvas {
position: absolute;
top: 0;
width: 50%; /* 6 columns */
}
}
.row-offcanvas-right-active {
right: 50%; /* 6 columns */
}
#toggle-nav {
z-index: 5;
position: relative;
}
(pubspec.yaml)
dependencies:
browser: '>=0.10.0+2 =0.10.1 =1.1.0 =0.6.4
<head>
:
<?php wp_deregister_script('jquery'); ?>
<script type="application/dart" src='http://dart.example.com/wp-content/themes/wp/dart/main.dart'></script>
<?php wp_enqueue_script('dart', get_template_directory_uri() . '/dart/packages/browser/dart.js') ?>
<?php wp_head(); ?>
</head>
<body ng-app>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div ng-cloak wp-controller>
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse" collapse="isCollapsed">
<?php wp_nav_menu( array('theme_location' => 'primary',
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'walker' => new wp_bootstrap_navwalker()
) );?>
</div>
</div>
</div><!-- /.container -->
</div><!-- /.navbar -->
<div class="container">
<div id="page" class="hfeed site">
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>"
width="<?php echo get_custom_header()->width; ?>"
height="<?php echo get_custom_header()->height; ?>" alt="">
</a>
</div>
<header id="masthead" class="site-header" role="banner">
<div class="header-main">
<h1 class="site-title">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<?php bloginfo( 'name' ); ?>
</a>
</h1>
</div>
</header>
<?php else : ?>
<div class="jumbotron">
<h1>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
</h1>
<p><?php bloginfo( 'description' ); ?></p>
</div>
<?php endif; ?>
<div class="row row-offcanvas row-offcanvas-right" ng-class="{'row-offcanvas-right-active': rowOffcanvas}">
<p id="toggle-nav" class="pull-right visible-xs">
<button type="button" class="btn btn-primary btn-xs"
ng-click="offcanvas()">Toggle nav</button>
</p>
library WpDartExample;
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:angular_ui/angular_ui.dart';
@Injectable()
class WpController {
bool isCollapsed = true;
bool rowOffcanvas = false;
void offcanvas() {
rowOffcanvas = !rowOffcanvas;
}
}
class MyAppModule extends Module {
MyAppModule() {
bind(WpController);
}
}
void main() {
applicationFactory()
.addModule(new AngularUIModule())
.addModule(new MyAppModule())
.rootContextType(WpController)
.run();
}