Flippable Card

2つのレンダリングを可能にするISLEコンポーネント。

オプション

• button | string: ボタンラベル. Default: none.
• draggable | boolean: は、カードをドラッグするかどうかを制御します。. Default: false.
• flipSpeedBackToFront | number: 秒単位のカードの回転速度. Default: 1.
• flipSpeedFrontToBack | number: 数値} カードが前景から背景に切り替わる速度を秒単位で指定します。. Default: 1.
• oneTime | boolean: は、フリップ処理を一度だけ実行するかどうかを示します。. Default: false.
• perspective | number: 3D配置された要素にパースペクティブを与えるためのCSSプロパティ値. Default: 1000.
• size | number: カードのサイズ (幅と高さを設定します). Default: 250.
• disabled | boolean: フリッパブルカードを無効にするかどうかを制御します。. Default: false.
• value | boolean: カードのフリップ状態. Default: none.
• defaultValue | boolean: 初期フリップ状態. Default: false.
• containerStyle | object: コンテナのCSSスタイル. Default: {}.
• frontStyle | object: フロントカードのCSSスタイル. Default: {}.
• backStyle | object: バックカードのCSSスタイル. Default: {}.
• onChange | function: カードが反転されるとコールバックが起動され、現在の反転状態を唯一の引数として受け取ります。. Default: onChange() {}.

例としては、以下のようなものがあります。

• Minimal
• With CSS
• Slow Motion

ライブエディター

<FlippableCard containerStyle={{ float: 'none' }} size={200}> <img src="https://bit.ly/2YU5EbU" /> <img src="https://bit.ly/3aGv9mp" /> </FlippableCard>

<FlippableCard containerStyle={{ float: 'none' }} size={200}>
  <img src="https://bit.ly/2YU5EbU" />
  <img src="https://bit.ly/3aGv9mp" />
</FlippableCard>

結果

ReferenceError: Provider is not defined