Dropdown

Default
<e-dropdown>

 
Preview Edit Copy Delete 
 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>


                        <div class="e-row">
                          <div class="e-col-6">&nbsp;</div>
                          <div class="e-col-6">
                            <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
                                                <div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
                                                    <e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
                                                    <e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
                                                    <e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
                                                    <e-icon icon="eye" type="table"></e-icon> Delete&nbsp;</a></div>
                            </e-dropdown>
                          </div>
                        </div>

Variations

Align right
data-dropdown-align="right"

 
Preview Edit Copy Delete 
 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-dropdown-align="right" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="Dropdown" data-dropdown-align="right" data-markup-class="e-btn e-btn-dropdown">
                                                  <div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="eye" type="table"></e-icon> Delete&nbsp;</a></div>
                              </e-dropdown>
                            </div>
                          </div>

With right icon
.e-dropdown__item-righticon

 
Version A
Version B
Version Long name Lorem ipsum dolor sit
Create new based on Version A 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div href="#" class="e-dropdown__item">
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version A
          </a>
        </div>
        <div href="#" class="e-dropdown__item e-dropdown__item-righticon">
          <div class="float-right">
            <e-icon icon="trash-o" type="table"></e-icon>
          </div>
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version B
          </a>
        </div>
        <div href="#" class="e-dropdown__item e-dropdown__item-righticon">
          <div class="float-right">
            <e-icon icon="trash-o" type="table"></e-icon>
          </div>
          <a href="#">
            <e-icon icon="file-text" type="table"></e-icon>
             Version Long name Lorem ipsum dolor sit
          </a>
        </div>
        <hr style="margin-bottom: 0;" class="e-separator">
        <a href="#" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Create new based on Version A
        </a>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
                                <div class="e-dropdown__content">
                                  <div href="#" class="e-dropdown__item"><a href="#">
                                      <e-icon icon="file-text" type="table"></e-icon> Version A</a></div>
                                  <div href="#" class="e-dropdown__item e-dropdown__item-righticon">
                                    <div class="float-right">
                                      <e-icon icon="trash-o" type="table"></e-icon>
                                    </div><a href="#">
                                      <e-icon icon="file-text" type="table"></e-icon> Version B</a>
                                  </div>
                                  <div href="#" class="e-dropdown__item e-dropdown__item-righticon">
                                    <div class="float-right">
                                      <e-icon icon="trash-o" type="table"></e-icon>
                                    </div><a href="#">
                                      <e-icon icon="file-text" type="table"></e-icon> Version Long name Lorem ipsum dolor sit</a>
                                  </div>
                                  <hr style="margin-bottom: 0;" class="e-separator"><a href="#" class="e-dropdown__item">
                                    <e-icon icon="eye" type="table"></e-icon> Create new based on Version A</a>
                                </div>
                              </e-dropdown>
                            </div>
                          </div>

Long item name
.e-dropdown__item-fixwidth

 
Preview Ex quis cupidatat in, cillum proident ut anim ullamco, irure incididunt id culpa commodo. Cillum, dolor do in, ex dolore sint? Et ipsum, proident nisi irure commodo cillum est. Quis non nostrud do mollit aliquip aliquip sint magna. Incididunt consequat ut reprehenderit, id ad, enim ut, qui magna. 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a href="#0" class="e-dropdown__item e-dropdown__item-fixwidth">
          <e-icon icon="eye" type="table"></e-icon>
          Ut, qui velit cupidatat laborum, officia, ullamco occaecat, deserunt eiusmod, tempor. Ad, in anim, quis culpa ea, cillum aliqua fugiat? Minim id incididunt enim dolore dolor, consectetur. Consectetur enim ipsum esse sed dolore, ut sunt anim. Quis lorem magna mollit laborum sint et enim pariatur nisi occaecat, ut. 
        </a>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
                                <div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
                                    <e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item e-dropdown__item-fixwidth">
                                    <e-icon icon="eye" type="table"></e-icon>Aliquip esse laborum et, ut veniam laboris adipiscing enim? Ad sed mollit ad? Ad enim nisi consectetur, ad ut, dolore quis, cupidatat quis. Esse culpa ea, eu adipiscing? In, elit do quis in. </a></div>
                              </e-dropdown>
                            </div>
                          </div>

Only icon (use in the table)
data-markup-content="<e-icon icon='dots' type='table'></e-icon>"

 
Preview Edit Copy Delete 
 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="&lt;e-icon icon='dots' type='table'&gt;&lt;/e-icon&gt;" data-markup-class="e-dropdown__button" data-markup-class-active="e-dropdown__button-open">
      <div class="e-dropdown__content">
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="&lt;e-icon icon='dots' type='table'&gt;&lt;/e-icon&gt;" data-markup-class="e-dropdown__button" data-markup-class-active="e-dropdown__button-open">
                                                  <div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="eye" type="table"></e-icon> Delete&nbsp;</a></div>
                              </e-dropdown>
                            </div>
                          </div>

Rich content
.e-dropdown__container

 
Lorem exercitation veniam exercitation non, pariatur eu id. Deserunt officia labore occaecat do lorem cupidatat reprehenderit, irure veniam. 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Cupidatat non, dolore dolor laboris fugiat, lorem qui consectetur. Duis excepteur magna, culpa anim dolor aliquip ut do. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="Dropdown" data-markup-class="e-btn e-btn-dropdown">
                                <div class="e-dropdown__content">
                                  <div class="e-dropdown__container">Esse adipiscing, ea, fugiat aliqua laborum exercitation dolor reprehenderit. In sit esse, ipsum est cupidatat enim consequat enim consectetur tempor. 
                                  </div>
                                </div>
                              </e-dropdown>
                            </div>
                          </div>

Auto close
data-autoclose

 
Preview Edit Copy Delete 
 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-autoclose data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Preview
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Edit
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="pencil" type="table"></e-icon>
           Copy
        </a>
        <a href="#0" class="e-dropdown__item">
          <e-icon icon="eye" type="table"></e-icon>
           Delete&nbsp;
        </a>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="Dropdown" data-autoclose="" data-markup-class="e-btn e-btn-dropdown">
                                                  <div class="e-dropdown__content"><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="pencil" type="table"></e-icon> Preview</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="eye" type="table"></e-icon> Edit</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="pencil" type="table"></e-icon> Copy</a><a href="#0" class="e-dropdown__item">
                                                      <e-icon icon="eye" type="table"></e-icon> Delete&nbsp;</a></div>
                              </e-dropdown>
                            </div>
                          </div>

Colored content
.e-dropdown__inner-danger

 
Ut fugiat aliqua irure mollit do, consequat excepteur pariatur dolore. Non laborum non aliquip consequat do ad aute nulla, elit. 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-danger" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Ex est aliqua tempor id do aute. Aliquip, incididunt adipiscing sint esse do incididunt magna. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-danger" data-markup-class="e-btn e-btn-dropdown">
                                <div class="e-dropdown__content">
                                  <div class="e-dropdown__container">Incididunt, irure laboris enim esse, nostrud deserunt cupidatat, incididunt, do magna cillum. Fugiat, irure amet in reprehenderit eu, incididunt incididunt ipsum lorem ut ad? 
                                  </div>
                                </div>
                              </e-dropdown>
                            </div>
                          </div>

Colored content
.e-dropdown__inner-success

 
Culpa cupidatat lorem minim, ut, commodo ea nulla. Lorem labore sit culpa elit, pariatur, laboris ut consectetur ut? 
<div class="e-row">
  <div class="e-col-6">
    &nbsp;
  </div>
  <div class="e-col-6">
    <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-success" data-markup-class="e-btn e-btn-dropdown">
      <div class="e-dropdown__content">
        <div class="e-dropdown__container">
          Ea duis minim eu anim? Laboris ad, sunt aliquip nostrud aute occaecat aliquip. 
        </div>
      </div>
    </e-dropdown>
  </div>
</div>


                          <div class="e-row">
                            <div class="e-col-6">&nbsp;</div>
                            <div class="e-col-6">
                              <e-dropdown data-markup-content="Dropdown" data-inner-class="e-dropdown__inner-success" data-markup-class="e-btn e-btn-dropdown">
                                <div class="e-dropdown__content">
                                  <div class="e-dropdown__container">Voluptate labore anim fugiat aute consectetur pariatur irure. Cillum eu incididunt dolore cillum, mollit excepteur velit. 
                                  </div>
                                </div>
                              </e-dropdown>
                            </div>
                          </div>

Related components

TableButtonHeader

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history