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



「AngularDart UI Bootstrap Sample」への1件のフィードバック

  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

コメントは停止中です。