アップロードとエディター

バリデーション（ファイル形式、サイズ、件数。メッセージは翻訳済み）、プレビュー、進捗表示に対応したドラッグ＆ドロップのアップロード（list と single バリアント）。Editor は contenteditable ベースの軽量なリッチテキストエディターです。

アップロード

アップロード

Vue

<div class="thl-row">
  <div class="thl-col-12 thl-col-md-6"><ThlUpload multiple :max-size="2 * 1024 * 1024" accept="image/*" :request="fakeRequest" /></div>
  <div class="thl-col-12 thl-col-md-6"><ThlUpload variant="single" /></div>
</div>

React

<Upload multiple maxSize={2 * 1024 * 1024} accept="image/*"
  request={(file, onProgress) => api.upload(file, onProgress)} onChange={setFiles} />
<Upload variant="single" />

Angular

<thl-upload multiple [maxSize]="2 * 1024 * 1024" accept="image/*" [request]="upload" (filesChange)="files.set($event)" />
<thl-upload variant="single" />

エディター

エディター

Vue

<div><ThlEditor v-model="html" :min-height="140" /><pre style="font-size:12px;margin-top:8px;white-space:pre-wrap">{{ html }}</pre></div>

React

<Editor value={html} onChange={setHtml} minHeight={140} />

Angular

<thl-editor [(value)]="html" [minHeight]="140" />

API

Upload

<ThlUpload> · import { ThlUpload } from '@thl-ui/vue'

Prop	型	デフォルト
accept	string	—
maxSize	number	—
multiple	boolean	—
maxFiles	number	—
request	function	—
variant	string	"list"
hint	string	—

イベント: change

Editor

<ThlEditor> · import { ThlEditor } from '@thl-ui/vue'

Prop	型	デフォルト
modelValue	string	""
placeholder	string	—
minHeight	number	—
ariaLabel	string	—

イベント: update:modelValue