Skip to content
fandhe-frontend
GitHub

Image Cropper

fandhe-frontend-pre-styled-uiimage_cropper mod が提供するスタイル済み Image Cropper 部品です。

関連 API: fandhe-frontend-pre-styled-ui API / fandhe-frontend-headless-ui API

Demo

画像切り抜き範囲の選択 UI。headless-ui の `ImageCropper` 状態機械(既定: 100x100 の全域選択)をラップする。

Features

  • `size` variant クラスを `root` へ付与し、headless-ui の `ImageCropper` 状態機械(切り抜き範囲・原寸を保持)へ委譲する。
  • `selection` パーツが `--fandhe-image-cropper-*`(4 個)custom property を含む `style` を動的値の唯一の出力点として持つ。

Anatomy

root
  selection

API Reference

Arguments

NameTypeDefaultDescription
sizeSizeSize::Mdサイズ variant。
state&ImageCropperheadless-ui の切り抜き状態機械。
attrsVec<(&str, &str)>root パーツへ合成する追加属性。
childrenVec<Node>root 配下の子ノード(通常 `selection` を含む)。

CSS Variables

VariableDefault
--fandhe-image-cropper-h100%
--fandhe-image-cropper-handle-size0.75rem
--fandhe-image-cropper-w100%
--fandhe-image-cropper-x0%
--fandhe-image-cropper-y0%