@ctmobile/ui-accordion-sd

    1.0.2 • Public • Published

    Accordion

    基本布局

    常见的布局如下:

    
        <div class="ct-accordion-radius">
          <div>
            <dl>
              <dt>title...</dt>
              <dd>
                content...
              </dd>
            </dl>
            <dl>
              <dt>title...</dt>
              <dd>
                content...
              </dd>
            </dl>
            <dl>
              <dt>title...</dt>
              <dd>
                content...
              </dd>
            </dl>
            ...
          </div>
        </div>
    
    
    • ct-accordion-... - 代表是一个accordion组件 dl - 代表一组
      • dt - 头
      • dd - 体

    类型

    一共有四中类型:

    • 圆角灰边
    
            <div class="ct-accordion-radius">
              <div>
                <dl>
                  <dt>item1-title</dt>
                  <dd>
                    第1项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item2-title</dt>
                  <dd>
                    第二项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item3-title</dt>
                  <dd>
                    第三项内容
                  </dd>
                </dl>
              </div>
            </div>
    
    
    • 极简无边框
    
            <div class="ct-accordion-base">
              <div>
                <dl>
                  <dt>item1-title</dt>
                  <dd>
                    第1项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item2-title</dt>
                  <dd>
                    第二项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item3-title</dt>
                  <dd>
                    第三项内容
                  </dd>
                </dl>
              </div>
            </div>
    
    
    • 经典
    
            <div class="ct-accordion-classic">
              <div>
                <dl>
                  <dt>item1-title</dt>
                  <dd>
                    第1项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item2-title</dt>
                  <dd>
                    第二项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item3-title</dt>
                  <dd>
                    第三项内容
                  </dd>
                </dl>
              </div>
            </div>
    
    
    • 箭头
    
            <div class="accordion-type-arrow">
              <div>
                <dl>
                  <dt>item1-title</dt>
                  <dd>
                    第1项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item2-title</dt>
                  <dd>
                    第二项内容
                  </dd>
                </dl>
                <dl>
                  <dt>item3-title</dt>
                  <dd>
                    第三项内容
                  </dd>
                </dl>
              </div>
            </div>
    
    

    可折叠

    
      <div class="ct-accordion-radius">
        <div>
          <dl>
            <dt data-collapse="collapse">item1-title</dt>
            <dd>
              第1项内容
            </dd>
          </dl>
          <dl>
            <dt>item2-title</dt>
            <dd>
              第二项内容
            </dd>
          </dl>
          <dl>
            <dt>item3-title</dt>
            <dd>
              第三项内容
            </dd>
          </dl>
        </div>
      </div>
    
    
    • data-collapse="collapse"为默认打开

    初始化

    
      import Accordion from @ctmobile/ui-accordion;
      const accordion = Accordion(el);
    
    

    例子

    html

    
          <p>圆角灰边</p>
          <div class="ct-accordion-radius">
            <div>
              <dl>
                <dt>item1-title</dt>
                <dd>
                  第1项内容
                </dd>
              </dl>
              <dl>
                <dt>item2-title</dt>
                <dd>
                  第二项内容
                </dd>
              </dl>
              <dl>
                <dt>item3-title</dt>
                <dd>
                  第三项内容
                </dd>
              </dl>
            </div>
          </div>
          <p>极简无边框</p>
          <div class="ct-accordion-base">
            <div>
              <dl>
                <dt>item1-title</dt>
                <dd>
                  第1项内容
                </dd>
              </dl>
              <dl>
                <dt>item2-title</dt>
                <dd>
                  第二项内容
                </dd>
              </dl>
              <dl>
                <dt>item3-title</dt>
                <dd>
                  第三项内容
                </dd>
              </dl>
            </div>
          </div>
          <p>经典</p>
          <div class="ct-accordion-classic">
            <div>
              <dl>
                <dt>item1-title</dt>
                <dd>
                  第1项内容
                </dd>
              </dl>
              <dl>
                <dt>item2-title</dt>
                <dd>
                  第二项内容
                </dd>
              </dl>
              <dl>
                <dt>item3-title</dt>
                <dd>
                  第三项内容
                </dd>
              </dl>
            </div>
          </div>
          <p>箭头</p>
          <div class="accordion-type-arrow">
            <div>
              <dl>
                <dt>item1-title</dt>
                <dd>
                  第1项内容
                </dd>
              </dl>
              <dl>
                <dt>item2-title</dt>
                <dd>
                  第二项内容
                </dd>
              </dl>
              <dl>
                <dt>item3-title</dt>
                <dd>
                  第三项内容
                </dd>
              </dl>
            </div>
          </div>
          <p>默认展开</p>
          <div class="ct-accordion-radius">
            <div>
              <dl>
                <dt data-collapse="collapse">item1-title</dt>
                <dd>
                  第1项内容
                </dd>
              </dl>
              <dl>
                <dt>item2-title</dt>
                <dd>
                  第二项内容
                </dd>
              </dl>
              <dl>
                <dt>item3-title</dt>
                <dd>
                  第三项内容
                </dd>
              </dl>
            </div>
          </div>
          <p>展开/(关闭)所有</p>
          <div class="ct-accordion-radius">
            <div>
              <dl>
                <dt>item1-title</dt>
                <dd>
                  第1项内容
                </dd>
              </dl>
              <dl>
                <dt>item2-title</dt>
                <dd>
                  第二项内容
                </dd>
              </dl>
              <dl>
                <dt>item3-title</dt>
                <dd>
                  第三项内容
                </dd>
              </dl>
            </div>
          </div>
    
    

    js

    
            import $ from 'jquery';
            import Accordion from '@ctmobile/ui-accordion';
    
            Accordion($('#cuddd-ct-accordion-radius')[0]);
            Accordion($('#cuddd-ct-accordion-base')[0]);
            Accordion($('#cuddd-ct-accordion-classic')[0]);
            Accordion($('#cuddd-ct-accordion-arrow')[0]);
            Accordion($('#cuddd-collapse')[0]);
            const collapseAll = Accordion($('#cuddd-collapse-all')[0]);
            const collapseRefresh = Accordion($('#cuaddd-refresh')[0]);
            const collapseMethods = Accordion($('#cuaddd-collapse-methods')[0]);
    
            // 展开全部
            $('#cuddd-collapse-openall').on('click', () => {
              collapseAll.showAll();
            });
    
            // 关闭全部
            $('#cuddd-collapse-closeall').on('click', () => {
              collapseAll.closeAll();
            });
    
            // 动态修改样式
            $('#cuaddd-refresh-dynamicclass').on('click', () => {
              $('#cuaddd-refresh').find('[data-collapse="collapse"]').attr('data-collapse', '');
            });
    
            // 刷新
            $('#cuaddd-refresh-dynamicrefresh').on('click', () => {
              collapseRefresh.refresh();
            });
    
            const $dt = $('#cuaddd-collapse-methods-dt');
    
            // 通过属性打开
            $('#cuaddd-collpase-methods-modiprops-open').on('click', () => {
              $dt[0].dataset.collapse = 'collapse';
              collapseMethods.refresh();
            });
            // 通过属性关闭
            $('#cuaddd-collpase-methods-modiprops-close').on('click', () => {
              $dt[0].dataset.collapse = '';
              collapseMethods.refresh();
            });
            // 通过api打开
            $('#cuaddd-collpase-methods-api-open').on('click', () => {
              collapseMethods.show($dt[0]);
            });
            // 通过api关闭
            $('#cuaddd-collpase-methods-api-close').on('click', () => {
              collapseMethods.close($dt[0]);
            });
    
    

    方法

    show(dtDom) - 打开某一项

    • dtDom-HtmlElement 要展开行dt元素的dom对象

    close(dtDom) - 关闭某一项

    • dtDom-HtmlElement 要关闭行dt元素的dom对象

    showAll() - 打开所有项

    closeAll() - 关闭所有项

    refresh() - 刷新整个Accordion

    on(type, handler) - 注册事件

    • type-string 注册事件的类型,包括[beforeshow,aftershow,beforehide,afterhide]
    • handler-Function 注册事件的回调函数

    事件

    名称 说明
    beforeshow 一项展开之前触发
    aftershow 一项展开之后触发
    beforehide 一项关闭之前触发
    afterhide 一项关闭之后触发
    
      import $ from 'jquery'
      import Accordion from '@ctmobile/ui-accordion';
    
      const accordion = Accordion($('#cuddd-ct-accordion-radius')[0]);
      accordion.on('beforeshow', (dtDom) => {
        console.log('beforeshow');
      });
      accordion.on('aftershow', (dtDom) => {
        console.log('aftershow');
      });
      accordion.on('beforehide', (dtDom) => {
        console.log('beforehide');
      });
      accordion.on('afterhide', (dtDom) => {
        console.log('afterhide');
      });
    
    

    Install

    npm i @ctmobile/ui-accordion-sd

    DownloadsWeekly Downloads

    4

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    28.4 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar