animation-block
v0.1.10arrow_drop_downv0.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
132
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
104 KB
1 contributor
Like
Install animation-block as a package?
Copied
npm i @bit/clui.nui-ui.blocks.tutorial.animation-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 any of the 1 million components
and packages in Bit or NPM to the example.toggle layout
chevron_left
chevron_right
Description
For selectable animations/images layout.
Import from bit.dev
https://bit.dev/clui/nui-ui/blocks/tutorial/animation-block
yarn add @bit/clui.nui-ui.blocks.tutorial.animation-block
import AnimationBlock from '@bit/clui.nui-ui.blocks.tutorial.animation-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 |
|---|---|---|---|
| imgArr | imgObj[] | - | - |
| imgAlignment | ‘left’ | ‘right’ | ‘top’ | ‘bottom’ | - | - |
| cardColor | ‘white’ | ‘lightgrey’ | ‘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 |
| 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 |