Image
Installation
npm i boundless-image --save
Then use it like:
/** @jsx createElement */ import createElement PureComponent from 'react';import Button from 'boundless-button';import Image from 'boundless-image'; state = normal: Date delayed: Date error: Date { this; } { return <div ='demo-image spread center'> <figure> <h5>Normal</h5> <Image ='normal' = ='A snowy drive.' /> <Button = => Remount Image </Button> </figure> <figure> <h5>Delayed</h5> <Image ='delayed' = ='An aerial shot of a snow-covered forest.' /> <Button = => Remount Image </Button> </figure> <figure> <h5>Errored Out</h5> <Image ='error' = ='A dead image.' /> <Button = => Remount Image </Button> </figure> </div> ; }
Image can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
;
Props
Note: only top-level props are in the README, for the full list check out the website.
Required Props
-
src
· a valid path to the desired imageExpects Default Value string
'about:blank'
Optional Props
-
*
· any React-supported attributeExpects Default Value any
n/a
-
alt
· a written description of the image for search engines, hovertext and those using accessibility technologiesExpects Default Value string
''
-
component
· overrides the component HTML tagExpects Default Value string
'div'
Reference Styles
Stylus
You can see what variables are available to override in variables.styl.
// Redefine any variables as desired, e.g:color-accent = royalblue // Bring in the component styles; they will be autoconfigured based on the above@require "node_modules/boundless-image/style"
CSS
If desired, a precompiled plain CSS stylesheet is available for customization at /build/style.css
, based on Boundless's default variables.