Skip to content

Latest commit

 

History

History
259 lines (165 loc) · 6.35 KB

readme_PictureTile.md

File metadata and controls

259 lines (165 loc) · 6.35 KB
Raw

PictureTile Class

Types

Live readme-sample on Heroku

picture_src

Required
Type: string

Name of image file

picture_tile = {picture_src: '1_east_van.png'}

normal_area

Type: AREA_PROP_TYPE
Default: 'middle'
Cascades from ReactHoverGrid.normal_area if none

Location of text when image is not being hovered on

picture_tile = {...
              , normal_area: 'north-east'}

hover_area

Type: AREA_PROP_TYPE
Default: 'middle'
Cascades from ReactHoverGrid.hover_area if none

Location of text when image is being hovered on

picture_tile = {...
              , hover_area: 'south-west'}

normal_style

Type: STRING_OR_OBJECT_CSS
Cascades from ReactHoverGrid.normal_style if none

Style of text when image is not being hovered on

picture_tile = {...
              , normal_style: 'font-size: 24px; color: #aabbcc'} 
picture_tile = {...
              , normal_style: '.css-style-from-file'}
picture_tile = {...
              , normal_style: {fontSize: '24px', color: '#aabbcc'} }

hover_style

Type: STRING_OR_OBJECT_CSS
Cascades from ReactHoverGrid.hover_style if none

Style of text when image is being hovered on

picture_tile = {...
              , hover_style: 'font-size: 24px; color: #aabbcc'} 
picture_tile = {...
              , hover_style: '.css-style-from-file'}
picture_tile = {...
              , hover_style: {fontSize: '24px', color: '#aabbcc'} }

hover_gradient

Type: CSS_GRADIENT
Cascades from ReactHoverGrid.hover_gradient if none
Overridden by hover_linear_gradient

Gradient over image when it is being hovered on

picture_tile = {...
              , hover_gradient: 'rgba(255, 0, 0, 0.1)' }

normal_gradient

Type: CSS_GRADIENT
Cascades from ReactHoverGrid.normal_gradient if none
Overridden by normal_linear_gradient

Gradient over image when it is not being hovered on

picture_tile = {...
              , normal_gradient: 'rgba(255, 0, 0, 0.1)' }

hover_linear_gradient

Type: LINEAR_GRADIENT
Cascades from ReactHoverGrid.hover_linear_gradient if none
overrides hover_gradient

Linear gradient over image when it is being hovered on

picture_tile = {...
              , hover_linear_gradient: {clear_percent: 50
                                      , gradient_rgba: 'rgba(255, 255, 255, 1)'} }

normal_linear_gradient

Type: LINEAR_GRADIENT
Cascades from ReactHoverGrid.normal_linear_gradient if none
overrides normal_gradient

Linear gradient over image when it is not being hovered on

picture_tile = {...
              , normal_linear_gradient: {clear_percent: 75 
						               , gradient_rgba: 'rgba(0, 0, 0, 0.99)'} }

normal_title_style

Type: STRING_OR_OBJECT_CSS
Cascades from ReactHoverGrid.normal_title_style if none
Style of first line of text when image is not being hovered on

picture_tile = {...
              , normal_title_style: 'font-size: 24px; color: #aabbcc'} 
picture_tile = {...
              , normal_title_style: '.css-style-from-file'}
picture_tile = {...
              , normal_title_style: {fontSize: '24px', color: '#aabbcc'} }

normal_text_style

Type: STRING_OR_OBJECT_CSS
Cascades from ReactHoverGrid.normal_text_style if none
Style of second line of text when image is not being hovered on

picture_tile = {...
              , normal_text_style: 'font-size: 12px; color: #112233'} 
picture_tile = {...
              , normal_text_style: '.css-style-from-file'}
picture_tile = {...
              , normal_text_style: {fontSize: '12px', color: '#112233'} }

hover_title_style

Type: STRING_OR_OBJECT_CSS
Cascades from ReactHoverGrid.hover_title_style if none
Style of first line of text when image is being hovered on

picture_tile = {...
              , hover_title_style: 'font-size: 24px; color: #aabbcc'} 
picture_tile = {...
              , hover_title_style: '.css-style-from-file'}
picture_tile = {...
              , hover_title_style: {fontSize: '24px', color: '#aabbcc'} }

hover_text_style

Type: STRING_OR_OBJECT_CSS
Cascades from ReactHoverGrid.hover_text_style if none
Style of second line of text when image is being hovered on

picture_tile = {...
              , hover_text_style: 'font-size: 12px; color: #112233'} 
picture_tile = {...
              , hover_text_style: '.css-style-from-file'}
picture_tile = {...
              , hover_text_style: {fontSize: '12px', color: '#112233'} }

filter_normal

Type: CSS_FILTER
Cascades from ReactHoverGrid.filter_normal if none
Filter when image is not being hovered on

picture_tile = {...
              , filter_normal: 'hue-rotate(150deg)'}

filter_hover

Type: CSS_FILTER
Cascades from ReactHoverGrid.filter_hover if none
Filter when image is being hovered on

picture_tile = {...
              , filter_hover: 'hue-rotate(150deg)'}

link_url

Type: string

If no link_url then an image click will display the original image

picture_tile = {...
              , link_url: 'http://www.heroku.com'}

normal_title

Type: string

The first line of text when image is not being hovered on

picture_tile = {...
              , normal_title: 'First line of normal text'}

normal_info

Type: string

The second line of text when image is not being hovered on

picture_tile = {...
              , normal_info: 'Second line of normal text'}

hover_title

Type: string

The first line of text when image is being hovered on

picture_tile = {...
              , hover_title: 'First line of hover text'}

hover_info

Type: string

The second line of text when image is being hovered on

picture_tile = {...
              , hover_info: 'Second line of hover text'}

static_col

Type: number
Always show image in this column, only one image can have this setting.
Must be paired with static_row

react_hover_grid = {...
   , static_col: 2 }

static_row

Type: number
Always show image in this row, only one image can have this setting.
Must be paired with static_col

react_hover_grid = {...
   , static_row: 2 }

Created by

Steen Hansen

License

MIT ©