{"id":20,"date":"2015-02-24T05:22:48","date_gmt":"2015-02-24T05:22:48","guid":{"rendered":"http:\/\/dart.honobono-life.info\/?p=20"},"modified":"2017-10-03T04:26:28","modified_gmt":"2017-10-03T04:26:28","slug":"bootstrap3-offcanvas-with-angulardart-ui-bootstrap-in-wordpress","status":"publish","type":"post","link":"http:\/\/dart.honobono-life.info\/?p=20","title":{"rendered":"Bootstrap3 Offcanvas with AngularDart UI Bootstrap in WordPress"},"content":{"rendered":"<ul>\r\n<li>AngularDart : 1.1.0<\/li>\r\n<li>Dart : 1.8.5<\/li>\r\n<li>Bootstrap : 3.2.0<\/li>\r\n<li>include file<\/li>\r\ndart.js\r\n<\/ul>\r\n<!--more-->\r\n<div role=\"tabpanel\">\r\n  <ul class=\"nav nav-tabs\">\r\n    <li class=\"active\"><a href=\"#demo1\" data-toggle=\"tab\">css,pubspec<\/a><\/li>\r\n    <li><a href=\"#html1\" data-toggle=\"tab\">header.php<\/a><\/li>\r\n    <li><a href=\"#script1\" data-toggle=\"tab\">dart<\/a><\/li>\r\n  <\/ul>\r\n  <div class=\"tab-content\">\r\n    <div class=\"tab-pane active\" id=\"demo1\">\r\n\r\n<pre>\r\n(css)\r\n.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }\r\n\/*\r\n * Off Canvas\r\n * --------------------------------------------------\r\n *\/\r\n@media screen and (max-width: 767px) {\r\n  .row-offcanvas {\r\n    position: relative;\r\n    -webkit-transition: all 0.25s ease-out;\r\n    -moz-transition: all 0.25s ease-out;\r\n    transition: all 0.25s ease-out;\r\n  }\r\n\r\n  .row-offcanvas-right\r\n  .sidebar-offcanvas {\r\n    right: -50%; \/* 6 columns *\/\r\n  }\r\n\r\n  .row-offcanvas-left\r\n  .sidebar-offcanvas {\r\n    left: -50%; \/* 6 columns *\/\r\n  }\r\n\r\n  .row-offcanvas-right.active {\r\n    right: 50%; \/* 6 columns *\/\r\n  }\r\n\r\n  .row-offcanvas-left.active {\r\n    left: 50%; \/* 6 columns *\/\r\n  }\r\n\r\n  .sidebar-offcanvas {\r\n    position: absolute;\r\n    top: 0;\r\n    width: 50%; \/* 6 columns *\/\r\n  }\r\n}\r\n\r\n.row-offcanvas-right-active {\r\n    right: 50%; \/* 6 columns *\/\r\n  }\r\n#toggle-nav {\r\n        z-index: 5;\r\n        position: relative;\r\n}\r\n(pubspec.yaml)\r\ndependencies:\r\n  browser: '>=0.10.0+2 <0.11.0'\r\n  web_components: \">=0.10.1 <0.11.0\"\r\n  angular: '>=1.1.0 <2.0.0'\r\n  angular_ui: '>=0.6.4 <0.7.0'\r\ntransformers:\r\n- angular\r\n<\/pre>\r\n\r\n    <\/div>\r\n    <div class=\"tab-pane\" id=\"html1\">\r\n\r\n<pre>\r\n&lt;head>\r\n     :\r\n  &lt;?php wp_deregister_script('jquery'); ?>\r\n  &lt;script type=\"application\/dart\" src='http:\/\/dart.example.com\/wp-content\/themes\/wp\/dart\/main.dart'>&lt;\/script>\r\n  &lt;?php wp_enqueue_script('dart', get_template_directory_uri() . '\/dart\/packages\/browser\/dart.js') ?>\r\n  &lt;?php wp_head(); ?>\r\n&lt;\/head>\r\n&lt;body ng-app>\r\n  &lt;div class=\"navbar navbar-fixed-top navbar-inverse\" role=\"navigation\">\r\n    &lt;div class=\"container\">\r\n      &lt;div ng-cloak wp-controller>\r\n        &lt;div class=\"navbar-header\">\r\n          &lt;button class=\"navbar-toggle\" type=\"button\" ng-click=\"isCollapsed = !isCollapsed\">\r\n            &lt;span class=\"sr-only\">Toggle navigation&lt;\/span>\r\n            &lt;span class=\"icon-bar\">&lt;\/span>\r\n            &lt;span class=\"icon-bar\">&lt;\/span>\r\n            &lt;span class=\"icon-bar\">&lt;\/span>\r\n          &lt;\/button>\r\n        &lt;\/div>\r\n        &lt;div class=\"navbar-collapse\" collapse=\"isCollapsed\">\r\n          &lt;?php wp_nav_menu( array('theme_location' => 'primary',\r\n            'menu_class' => 'nav navbar-nav',\r\n            'fallback_cb' => 'wp_bootstrap_navwalker::fallback',\r\n            'walker' => new wp_bootstrap_navwalker()\r\n          ) );?>\r\n        &lt;\/div>\r\n      &lt;\/div>\r\n    &lt;\/div>&lt;!-- \/.container -->\r\n  &lt;\/div>&lt;!-- \/.navbar -->\r\n\r\n  &lt;div class=\"container\">\r\n    &lt;div id=\"page\" class=\"hfeed site\">\r\n      &lt;?php if ( get_header_image() ) : ?>\r\n      &lt;div id=\"site-header\">\r\n        &lt;a href=\"&lt;?php echo esc_url( home_url( '\/' ) ); ?>\" rel=\"home\">\r\n          &lt;img src=\"&lt;?php header_image(); ?>\"\r\n               width=\"&lt;?php echo get_custom_header()->width; ?>\"\r\n               height=\"&lt;?php echo get_custom_header()->height; ?>\" alt=\"\">\r\n        &lt;\/a>\r\n      &lt;\/div>\r\n      &lt;header id=\"masthead\" class=\"site-header\" role=\"banner\">\r\n        &lt;div class=\"header-main\">\r\n          &lt;h1 class=\"site-title\">\r\n            &lt;a href=\"&lt;?php echo esc_url( home_url( '\/' ) ); ?>\" rel=\"home\">\r\n               &lt;?php bloginfo( 'name' ); ?>\r\n            &lt;\/a>\r\n          &lt;\/h1>\r\n        &lt;\/div>\r\n      &lt;\/header>\r\n      &lt;?php else : ?>\r\n      &lt;div class=\"jumbotron\">\r\n        &lt;h1>\r\n          &lt;a href=\"&lt;?php echo esc_url( home_url( '\/' ) ); ?>\" rel=\"home\">&lt;?php bloginfo( 'name' ); ?>&lt;\/a>\r\n        &lt;\/h1>\r\n        &lt;p>&lt;?php bloginfo( 'description' ); ?>&lt;\/p>\r\n      &lt;\/div>\r\n      &lt;?php endif; ?>\r\n      &lt;div class=\"row row-offcanvas row-offcanvas-right\" ng-class=\"{'row-offcanvas-right-active': rowOffcanvas}\">\r\n        &lt;p id=\"toggle-nav\" class=\"pull-right visible-xs\">\r\n          &lt;button type=\"button\" class=\"btn btn-primary btn-xs\"\r\n                  ng-click=\"offcanvas()\">Toggle nav&lt;\/button>\r\n        &lt;\/p>\r\n<\/pre>\r\n\r\n    <\/div>\r\n\r\n    <div class=\"tab-pane\" id=\"script1\">\r\n<pre>\r\nlibrary WpDartExample;\r\n\r\nimport 'package:angular\/angular.dart';\r\nimport 'package:angular\/application_factory.dart';\r\nimport 'package:angular_ui\/angular_ui.dart';\r\n\r\n@Injectable()\r\nclass WpController {\r\n  bool isCollapsed = true;\r\n  bool rowOffcanvas = false;\r\n    \r\n  void offcanvas() {\r\n    rowOffcanvas = !rowOffcanvas;\r\n  }\r\n}\r\n\r\nclass MyAppModule extends Module {\r\n  MyAppModule() {\r\n    bind(WpController);\r\n  }\r\n}\r\n\r\nvoid main() {\r\n  applicationFactory()\r\n      .addModule(new AngularUIModule())\r\n      .addModule(new MyAppModule())\r\n      .rootContextType(WpController)\r\n      .run();\r\n}\r\n<\/pre>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>","protected":false},"excerpt":{"rendered":"<p>AngularDart : 1.1.0 Dart : 1.8.5 Bootstrap : 3.2.0 include file dart.js<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[4,3,5],"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/20"}],"collection":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=20"}],"version-history":[{"count":3,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":103,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=\/wp\/v2\/posts\/20\/revisions\/103"}],"wp:attachment":[{"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/dart.honobono-life.info\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}