Dart Example

Just another WordPress site

AngularDart UI Bootstrap Sample

AngularDart UI Bootstrap Sample Code,Demo

#INDEX
1. Accordion
2. Carousel
3. Collapse
4. DropDown
5. Modal(embedded)

1. Accordion



2. Carousel



3. Collapse



4. DropDown



5. Modal(embedded)



<div class="panel panel-default">
  <div class="panel-heading">Modal from embedded template</div>
  <div class="panel-body">
    <div>
      <button class="btn btn-default" ng-click="open('sm')">Small modal</button>
      <button class="btn btn-default" ng-click="open('lg')">Large modal</button>
      <div ng-show="selected != null">Selected: {{ selected }}</div>
    </div>
  </div>
</div>

library WpDartExample.modalemb;

import 'package:angular/angular.dart';
import 'package:angular_ui/angular_ui.dart';

@Component(
  selector: 'modalemb-demo', 
  useShadowDom: false,
  templateUrl: 'modalemb_demo.html',
  exportExpressions: const ["tmp", "ok"]
)
class ModalembDemoComponent implements ScopeAware {
  List<String> items = ["item1", "item2", "item3", "item4"];
  String selected;
  String tmp;
  
  Modal modal;
  ModalInstance modalInstance;
  Scope scope;
  
  String template = """
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 class="modal-title">I'm a modal!</h4>
</div>
<div class="modal-body">
  <ul>
    <li ng-repeat="item in items">
      <a ng-click="tmp = item">{{ item }}</a>
    </li>
  </ul>
  Selected: <b>{{tmp}}</b>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" ng-click="ok(tmp)">OK</button>
</div>
""";
  
ModalembDemoComponent(this.modal);
  
  ModalInstance getModalInstance(size) {
    return modal.open(new ModalOptions(template:template,size:size), scope);
  }
  
  void open(size) {
    modalInstance = getModalInstance(size);
    
    modalInstance.opened
      ..then((v) {
        print('Opened');
      }, onError: (e) {
        print('Open error is $e');
      });
    modalInstance.close = (result) { 
      selected = result;
      print('Closed with selection $selected');
      modal.hide();
    };
    modalInstance.dismiss = (String reason) { 
      print('Dismissed with $reason');
      modal.hide();
   };
  }
  
  void ok(sel) {
    modalInstance.close(sel);
  }
}
(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.8 <0.7.0'
transformers:
- angular:
    html_files:
      - lib/component/modalemb_demo.html
      - lib/component/accordion_demo.html

6. Modal(external)



<script type="text/ng-template" id="template_2.html">
<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
  <h4 class="modal-title">I'm a modal!</h4>
</div>
<div class="modal-body">
  <ul>
    <li ng-repeat="item in items">
      <a ng-click="tmp = item">{{ item }}</a>
    </li>
  </ul>
  Selected: <b>{{tmp}}</b><br>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
  <button type="button" class="btn btn-primary" ng-click="ok(tmp)">OK</button>
</div>
</script>

<div class="panel panel-default">
  <div class="panel-heading">Modal from template page</div>
  <div class="panel-body">
    <div>
      <button class="btn btn-default" ng-click="openUrl('template_2.html','sm')">Small modal</button>
      <button class="btn btn-default" ng-click="openUrl('template_2.html','lg')">Large modal</button>
      <div ng-show="selected != null">Selected: {{ selected }}</div>
    </div>
  </div>
</div>

library WpDartExample.modalext;

import 'package:angular/angular.dart';
import 'package:angular_ui/angular_ui.dart';

@Component(
  selector: 'modalext-demo', 
  useShadowDom: false,
  templateUrl: 'modalext_demo.html',
  exportExpressions: const ["tmp", "ok"]
)
class ModalextDemoComponent implements ScopeAware {
  List items = ["Java", "Dart", "JavaScript", "Ruby"];
    
  String selected;
  String tmp;
  String other;
  
  Modal modal;
  ModalInstance modalInstance;
  Scope scope;
  
  ModalextDemoComponent(this.modal) {
  }
  
  void openUrl(String templateUrl, String size) {
    modalInstance = modal.open(new ModalOptions(templateUrl:templateUrl, size: size), scope);
    
    modalInstance.result
      ..then((value) {
        selected = value;
        print('Closed with selection $value');
      }, onError:(e) {
        print('Dismissed with $e');
      });
  }
  
  void ok(sel) {
    modalInstance.close(sel);
  }
}
(css)
[ng-cloak], [data-ng-cloak], .ng-cloak ,.ng-hide{
   display: none !important;
}

(pubspec.yaml)
dependencies:
  browser: '>=0.10.0+2 <0.11.0'
  web_components: ">=0.10.1 <0.11.0"
  angular: '>=1.1.0 <2.0.0'
  angular_ui: '>=0.6.8 <0.7.0'
transformers:
- angular:
    html_files:
      - lib/component/modalext_demo.html
      - lib/component/accordion_demo.html

7. datepicker



8. Tooltip,Popover



One thought on “AngularDart UI Bootstrap Sample”

  1. I have noticed you don’t monetize your site, don’t waste your traffic, you can earn additional bucks every
    month because you’ve got high quality content. If you want to know how to make extra money, search for: best adsense
    alternative Boorfe’s tips

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.