Sha256: f65d091978d9afecdba2cea3b9171e5e2a91eac2346123cc54cb7efa7d6bd516

Contents?: true

Size: 1.22 KB

Versions: 1875

Compression:

Stored size: 1.22 KB

Contents

<style>
  .image-error:before {
    content: "Sorry, the image below seems to be broken.";
    display: block;
    margin-bottom: 10px;
  }
  .image-error {
    margin: 5px;
    padding: 5px;
    outline: 1px solid red;
  }
</style>

<%= pb_rails("body",
  props: {
    text: "Handle when an image fails to load or a broken link is passed. This is not neccessary most of the time."
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
    text: "Alter the display when the image fails to load:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.style.color = 'red'",
    rounded: true,
    size: "xs",
    url: "not_a_picture"
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
    text: "Give it an error class:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.classList.add('image-error')",
    padding_x: "none",
    rounded: true,
    size: "xs",
    url: "not_a_picture"
  }
) %>

<br>
<br>

<%= pb_rails("body",
  props: {
   text: "Or hide it completely:"
  }
) %>

<%= pb_rails("image",
  props: {
    alt: "This is the alt text!",
    on_error: "this.style.display = 'none'",
    rounded: true,
    size: "xs",
    url: "not_a_picture",
  }
) %>

Version data entries

1,875 entries across 1,875 versions & 2 rubygems

Version Path
playbook_ui-11.16.0.pre.alpha.paginationrails1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.16.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.16.0.pre.alpha.reactupgrade1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.15.0.pre.alpha.table1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.16.0.pre.alpha.pagination.rails1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.15.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.14.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.13.0.pre.alpha.fontawesome1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.13.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.12.1.pre.alpha.charts1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.12.1.pre.alpha.passphrase1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.12.1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.13.0.pre.alpha.fileupload1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.12.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.11.0.pre.alpha.paginate2 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.11.0.pre.alpha.dialog2 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.11.0.pre.alpha.paginate1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.11.0.pre.alpha.renderer1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.11.0.pre.alpha.dialog1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-11.11.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb