Image Cropper
fandhe-frontend-pre-styled-ui の image_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
selectionAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
| size | Size | Size::Md | サイズ variant。 |
| state | &ImageCropper | headless-ui の切り抜き状態機械。 | |
| attrs | Vec<(&str, &str)> | root パーツへ合成する追加属性。 | |
| children | Vec<Node> | root 配下の子ノード(通常 `selection` を含む)。 |
CSS Variables
| Variable | Default |
|---|---|
| --fandhe-image-cropper-h | 100% |
| --fandhe-image-cropper-handle-size | 0.75rem |
| --fandhe-image-cropper-w | 100% |
| --fandhe-image-cropper-x | 0% |
| --fandhe-image-cropper-y | 0% |