dropdown

https://github.com/ShuyunFF2E/ccms-components

by arzyu

HTML

<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.6/angular-resource.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-router/0.2.18/angular-ui-router.js"></script>
<script src="http://114.215.169.170:8080/dist/ccms-components.js"></script>
<link rel="stylesheet" href="http://114.215.169.170:8080/dist/ccms-components.css">
<div ng-controller="DemoCtrl as ctrl">
  <h1>下拉</h1>
  <div style="margin: 0.5em 0;">
    <textarea class="log" style="width: 100%">log: </textarea>
    <button ng-click="ctrl.setOpenState(!ctrl.isOpen)">toggle is-open</button>
  </div>
  <div class="demos">
    <div class="demo">
      <dropdown
          on-dropdown-open="ctrl.log('已打开')"
          on-dropdown-close="ctrl.log('已关闭')">
        <div>
          <button dropdown-toggle>下拉1号</button>
          <div class="hide" dropdown-panel>
            <div>这是下拉内容。</div>
          </div>
        </div>
      </dropdown>
    </div>
    <div class="demo">
      <dropdown auto-close="false" is-open="ctrl.isOpen">
        <div>
          <button dropdown-toggle>下拉2号</button>
          <div class="hide" dropdown-panel>
            <div>这是下拉内容。</div>
          </div>
        </div>
      </dropdown>
    </div>
  </div>
</div>

SCSS

[ng-controller] {
  padding: 0.5em;
  h1 {
    border-bottom: dashed 1px #ccc;
    font-weight: normal;
  }
  .demos {
    display: flex;
    > .demo {
      flex: 1
    }
  }
  dropdown {
    display: inline-block;
  }
  [dropdown-panel] {
    width: 150px;
    padding: .5em;
    border: solid 1px #ccc;
    &.hide {
      display: none;
    }
  }
}

JavaScript

angular.module('demoApp', ['ccms.components'])
  .controller('DemoCtrl', DemoCtrl);

DemoCtrl.$inject = [];
function DemoCtrl() {
	this.log = (text) => {
  	textAreaEl = document.querySelector('textarea.log');
  	textAreaEl.value += text + ',';
  };
  this.isOpen = false;
  this.setOpenState = (openState) => {
  	this.isOpen = openState;
  };
}