bootstrap-material-design icon indicating copy to clipboard operation
bootstrap-material-design copied to clipboard

Option to ignore HTML by framework

Open ybelenko opened this issue 4 years ago • 0 comments

Test Case

https://codepen.io/ybelenko/pen/VwKgwPw

Summary

I try to apply framework to specific part of the application. However it adds classes to all entities within page body.

$('.use-bmd').bootstrapMaterialDesign({});
<!-- apply bootstrap material design to next div -->
<div class="container use-bmd">

  <h3>Floating label <i class="material-icons">face</i></h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </div>
 
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">

  <h3>Bootstrap vanilla</h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-static">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="form-text">We'll never share your email with anyone else.</span>
  </div>
 
</div>

Expected result

I would expect HTML inside .keep-vanilla untouched

<!-- apply bootstrap material design to next div -->
<div class="container use-bmd">

  <h3>Floating label <i class="material-icons">face</i></h3>
  <div class="form-group bmd-form-group">
    <label for="exampleInputEmail1" class="bmd-label-floating">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="bmd-help">We'll never share your email with anyone else.</span>
  </div>
 
</div>
<!-- keep next div not modified -->
<div class="container keep-vanilla">

  <h3>Bootstrap vanilla</h3>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1">
    <span class="form-text">We'll never share your email with anyone else.</span>
  </div>
 
</div>

Additional Information

It would also be great to have some ignore classes or data attributes. Like:

<!-- please don't add bmd-form-group and everything to next div -->
<div class="bmd-ignore" data-bmd-ignore>
    ...
</div>

ybelenko avatar Jan 17 '21 13:01 ybelenko