three-images-block
v0.1.11arrow_drop_downv0.1.11
v0.1.10
v0.1.9
v0.1.8
v0.1.7
v0.1.6
v0.1.5
v0.1.4
v0.1.3
v0.1.2
v0.1.1
v0.1.0
STATUS
Passing
DOWNLOADS
156
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
104 KB
1 contributor
Like
Install three-images-block as a package?
Copied
npm i @bit/clui.nui-ui.blocks.tutorial.three-images-block
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
and packages in Bit or NPM to the example. any of the 1 million componentstoggle layout
modifieddraft
chevron_left
chevron_right
Description
For simple 2/3 columns img/animation/text layout.
Import from bit.dev
https://bit.dev/clui/nui-ui/blocks/tutorial/three-images-block
yarn add @bit/clui.nui-ui.blocks.tutorial.three-images-block
import ThreeImagesBlock from '@bit/clui.nui-ui.blocks.tutorial.three-images-block';
Props
This component inherits ui/common/section-block. Please refer to /?path=/story/ui-common-sectionblock–default for all the inherited props.
Below are the props defined for this component:
Name | Type | Default | Description |
---|---|---|---|
html | string | - | - |
imgArr | ImgObj[] | - | - |
textAlign | “left” | “right” | “inherit” | “center” | “justify” | - | - |
imgAlignment | “left” | “right” | “top” | “bottom” | - | - |
imgObj props
Name | Type | Default | Description |
---|---|---|---|
type | ‘img’ | ‘sprite’ | ‘sequence’ | ‘img’ | - |
fileList | string[] | - | for ‘sequence’ type, an array of file names |
url | string | - | for ‘sprite’ or ‘img’ type |
alt | string | - | image description, caption |
html | string | - | detailed description |
textAlign | ‘left’ | ‘right’ | ‘inherit’ | ‘center’ | ‘justify’ | ‘center’ | description text alignment |
fps | number | 10 | frame per second, affect the playback speed |
frameNum | number | 1 | for ‘sprite’ type, the number of frames the sprite image contains |