Upload & Editor

Upload kéo-thả có kiểm tra (loại file, dung lượng, số lượng — thông báo được dịch), xem trước và tiến độ (kiểu list và single). Editor là trình soạn thảo rich text gọn nhẹ dựa trên contenteditable.

Upload

Upload

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" />

Editor

Editor

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	Kiểu	Mặc định
accept	string	—
maxSize	number	—
multiple	boolean	—
maxFiles	number	—
request	function	—
variant	string	"list"
hint	string	—

Sự kiện: change

Editor

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

Prop	Kiểu	Mặc định
modelValue	string	""
placeholder	string	—
minHeight	number	—
ariaLabel	string	—

Sự kiện: update:modelValue