Sha256: f65d091978d9afecdba2cea3b9171e5e2a91eac2346123cc54cb7efa7d6bd516

Contents?: true

Size: 1.22 KB

Versions: 1600

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,600 entries across 1,600 versions & 2 rubygems

Version Path
playbook_ui-10.25.0.pre.alpha3 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.25.0.pre.treeshaking1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.24.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.24.0.pre.alpha1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.23.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.23.0.pre.alpha2 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.23.0.pre.cachetest app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.23.0.pre.alpha1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.22.1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.22.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.1.pre.alpha1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.0.pre.alpha.lightbox.2 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.0.pre.alpha.lightbox app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.0.pre.alpha.rg1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.0.pre.alpha.jg1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.0.pre.alpha.na1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.21.0.pre.alpha.jd1 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.20.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb
playbook_ui-10.19.0 app/pb_kits/playbook/pb_image/docs/_custom_error_image.html.erb