Link copied!

Rule List Examples

<e-rulelist-group>
  <div slot="header">
    <e-icon icon="logic-and" color="neutral"></e-icon>
    <e-select>
      <e-select-option selected="selected">Match all (AND)</e-select-option>
      <e-select-option>Match any (OR)</e-select-option>
    </e-select>
  </div>
  <div slot="items">
    <e-rulelist-item>
      <div slot="summary">Rule A</div>
      <div slot="summary-action">
        <button class="e-btn e-btn-onlyicon e-btn-borderless">
          <e-icon icon="trash"></e-icon>
        </button>
      </div>
      <div slot="header">
        <b>Edit Rule:</b> Rule A
      </div>
      <div slot="content" class="e-field">
        <label class="e-field__label" for="input1">Input Label</label>
        <input class="e-input" id="input1" type="text" placeholder="Type text here"/>
      </div>
      <button slot="footer-action" class="e-btn">Cancel</button>
      <button slot="footer-action" class="e-btn e-btn-highlight">Save</button>
    </e-rulelist-item>
  </div>
</e-rulelist-group>
<e-rulelist-group>
  <div slot="header">
    <e-icon icon="logic-and" color="neutral"></e-icon>
    <e-select>
      <e-select-option selected="selected">Match all (AND)</e-select-option>
      <e-select-option>Match any (OR)</e-select-option>
    </e-select>
  </div>
  <div slot="items">
    <e-rulelist-item>
      <div slot="summary">Rule A</div>
      <button slot="summary-action" class="e-btn e-btn-onlyicon e-btn-borderless">
        <e-icon icon="trash"></e-icon>
      </button>
      <div slot="header">
        <b>Edit Rule:</b>Rule A
      </div>
      <div slot="content" class="e-field">
        <label class="e-field__label" for="input1">Input Label</label>
        <input class="e-input" id="input1" type="text" placeholder="Type text here"/>
      </div>
      <button slot="footer-action" class="e-btn">Cancel</button>
      <button slot="footer-action" class="e-btn e-btn-highlight">Save</button>
    </e-rulelist-item>
    <e-rulelist-item>
      <div slot="relation">AND</div>
      <div slot="summary">Rule B</div>
      <button slot="summary-action" class="e-btn e-btn-onlyicon e-btn-borderless">
        <e-icon icon="trash"></e-icon>
      </button>
      <div slot="header">
        <b>Edit Rule:</b>Rule B
      </div>
      <div slot="content" class="e-field">
        <label class="e-field__label" for="input1">Input Label</label>
        <input class="e-input" id="input1" type="text" placeholder="Type text here"/>
      </div>
      <button slot="footer-action" class="e-btn">Cancel</button>
      <button slot="footer-action" class="e-btn e-btn-highlight">Save</button>
    </e-rulelist-item>
  </div>
</e-rulelist-group>
<e-rulelist-group>
  <div slot="header">
    <e-icon icon="logic-and" color="neutral"></e-icon>
    <e-select>
      <e-select-option selected="selected">Match all (AND)</e-select-option>
      <e-select-option>Match any (OR)</e-select-option>
    </e-select>
  </div>
  <div slot="feedback">
    <e-notification type="error">
      <e-notification-title>Notification Title Goes Here</e-notification-title>
      <e-notification-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</e-notification-content>
    </e-notification>
  </div>
  <div slot="items">
    <e-rulelist-item>
      <div slot="summary">Rule A</div>
      <button slot="summary-action" class="e-btn e-btn-onlyicon e-btn-borderless">
        <e-icon icon="trash"></e-icon>
      </button>
      <div slot="header">
        <b>Edit Rule:</b>Rule A
      </div>
      <div slot="content" class="e-field">
        <label class="e-field__label" for="input1">Input Label</label>
        <input class="e-input" id="input1" type="text" placeholder="Type text here"/>
      </div>
      <button slot="footer-action" class="e-btn">Cancel</button>
      <button slot="footer-action" class="e-btn e-btn-highlight">Save</button>
    </e-rulelist-item>
  </div>
</e-rulelist-group>
<e-rulelist-group>
  <div slot="header">
    <e-icon icon="logic-and" color="neutral"></e-icon>
    <e-select>
      <e-select-option selected="selected">Match all (AND)</e-select-option>
      <e-select-option>Match any (OR)</e-select-option>
    </e-select>
  </div>
  <div slot="feedback" class="e-padding-l">
    <e-illustrated-message>
      <e-icon icon="picture-o" size="large" color="inherit" slot="icon"></e-icon>
      <div slot="title">Title Goes Here</div>
      <div slot="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam hendrerit turpis quis interdum porttitor.</div>
      <button class="e-btn e-btn-highlight" slot="actions">Primary Action</button>
      <button class="e-btn" slot="actions">Secondary Action</button>
    </e-illustrated-message>
  </div>
</e-rulelist-group>