Collapse 折叠面板

通过折叠面板收纳内容区域

引入

js

html

<script type="module">
  import "./node_modules/easy-component-ui/components/ea-collapse/index.js";
</script>

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html

<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式

移步到 CSS Part。

基础用法

可同时展开多个面板，面板之间不影响。通过设置元素上的 active 属性来控制指定面板的开或关，前提是设置好 name 属性，若不设置，则默认为子组件的顺序。

设置 active 为 ["1", "2", "3", "4"]

设置 active 为 []

Consistent with real life: in line with the process and logic of real life, and comply with languages and habits that the users are used to;

Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.

Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;

Visual feedback: reflect current state by updating or rearranging elements of the page.

Simplify the process: keep operating process simple and intuitive;

Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;

Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.

Decision making: giving advices about operations is acceptable, but do not make decisions for the users;

Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.

htmljs

html

<div class="demo">
  <ea-button-group>
    <ea-button id="basicCollapseOpenAllBtn" type="primary">
      设置 active 为 ["1", "2", "3", "4"]
    </ea-button>
    <ea-button id="basicCollapseCloseAllBtn" type="primary">
      设置 active 为 []
    </ea-button>
  </ea-button-group>
  <ea-collapse id="basicCollapse">
    <ea-collapse-item title="Consistency" name="1">
      <div>
        Consistent with real life: in line with the process and logic of real
        life, and comply with languages and habits that the users are used to;
      </div>
      <div>
        Consistent within interface: all elements should be consistent, such as:
        design style, icons and texts, position of elements, etc.
      </div>
    </ea-collapse-item>
    <ea-collapse-item title="Feedback" name="2">
      <div>
        Operation feedback: enable the users to clearly perceive their
        operations by style updates and interactive effects;
      </div>
      <div>
        Visual feedback: reflect current state by updating or rearranging
        elements of the page.
      </div>
    </ea-collapse-item>
    <ea-collapse-item title="Efficiency" name="3">
      <div>
        Simplify the process: keep operating process simple and intuitive;
      </div>
      <div>
        Definite and clear: enunciate your intentions clearly so that the users
        can quickly understand and make decisions;
      </div>
      <div>
        Easy to identify: the interface should be straightforward, which helps
        the users to identify and frees them from memorizing and recalling.
      </div>
    </ea-collapse-item>
    <ea-collapse-item title="Controllability" name="4">
      <div>
        Decision making: giving advices about operations is acceptable, but do
        not make decisions for the users;
      </div>
      <div>
        Controlled consequences: users should be granted the freedom to operate,
        including canceling, aborting or terminating current operation.
      </div>
    </ea-collapse-item>
  </ea-collapse>
</div>

const basicExample = {
  el: document.querySelector("#basicCollapse"),
  openAllBtn: document.querySelector("#basicCollapseOpenAllBtn"),
  closeAllBtn: document.querySelector("#basicCollapseCloseAllBtn"),

  init() {
    this.openAllBtn.addEventListener("click", () => {
      this.el.setActiveNames(["1", "2", "3", "4"]);
    });

    this.closeAllBtn.addEventListener("click", () => {
      this.el.setActiveNames([]);
    });
  },
};
basicExample.init();

手风琴效果

每次只能展开一个面板。通过设置 accordion 属性为 true 来开启手风琴模式。可以在元素上添加 change 事件来监听面板的展开和收起。