Snackbar

Default
.e-snackbar

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="e-row">
  <div style="height: 250px; position: relative; border: 1px solid #ddd" class="e-col-12">
    <div class="e-snackbar">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Lorem ipsum dolor sit amet
          </h3>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button onclick="alert('close')" class="e-btn e-btn-primary">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>


                        <div class="e-row">
                          <div style="height: 250px; position: relative; border: 1px solid #ddd" class="e-col-12">
                            <div class="e-snackbar">
                              <div class="e-snackbar__content">
                                <div class="e-snackbar__description">
                                  <h3>Lorem ipsum dolor sit amet</h3>
                                  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                                </div>
                                <div class="e-snackbar__actions">
                                  <button class="e-btn">Cancel</button>
                                  <button onclick="alert('close')" class="e-btn e-btn-primary">Confirm</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

Variations

Align bottom
.e-snackbar-bottom

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="e-row">
  <div style="height: 250px; position: relative; border: 1px solid #ddd" class="e-col-12">
    <div class="e-snackbar e-snackbar-bottom">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Lorem ipsum dolor sit amet
          </h3>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button onclick="alert('close')" class="e-btn e-btn-primary">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>


                          <div class="e-row">
                            <div style="height: 250px; position: relative; border: 1px solid #ddd" class="e-col-12">
                              <div class="e-snackbar e-snackbar-bottom">
                                <div class="e-snackbar__content">
                                  <div class="e-snackbar__description">
                                    <h3>Lorem ipsum dolor sit amet</h3>
                                    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                                  </div>
                                  <div class="e-snackbar__actions">
                                    <button class="e-btn">Cancel</button>
                                    <button onclick="alert('close')" class="e-btn e-btn-primary">Confirm</button>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>

Last update

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