panning-viewport
v0.0.3arrow_drop_downv0.0.3
v0.0.2
v0.0.1
STATUS
Passing
DOWNLOADS
48
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
N/A
1 contributor
Like
Install panning-viewport as a package?
Copied
npm i @bit/clui.nui-ui.ui.challenge.panning-viewport
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
This component is for rendering out the interactive viewport for the challenge module.
Import from bit.dev
https://bit.dev/clui/nui-ui/ui/challenge/panning-viewport
yarn add @bit/clui.nui-ui.ui.challenge.panning-viewport
import PanningViewport from '@bit/clui.nui-ui.ui.challenge.panning-viewport';
Props
Below are the props defined for this component:
| Name | Type | Default | Description |
|---|---|---|---|
| question | ChallengeQuestion | - | - |
| selectedAnswers | number[] | - | - |
| onSelectAnswer | (answer: ChallengeAnswer) => void | - | - |
| footer | React.ReactNode | - | - |
| footerClassName | string | - | - |
| isActive | boolean | - | - |
| disabled | boolean | - | - |
ChallengeQuestion
| Name | Type | Default | Description |
|---|---|---|---|
| id* | number | - | - |
| variant* | “DEFAULT” | “SIGN” | “PIN” | - | - |
| pickMany | boolean | - | - |
| isAttempted | boolean | - | - |
| html | string | - | - |
| hint | string | - | - |
| buttonLabel | string | - | - |
| imgURL | string | - | - |
| imgAlt | string | - | - |
| answers | ChallengeAnswer[] | - | - |
| questionData | { [key: string]: string | number } | - | - |
ChallengeAnswer
| Name | Type | Default | Description |
|---|---|---|---|
| id* | number | - | - |
| html | string | - | - |
| x | number | - | - |
| y | number | - | - |
| data | string | - | - |