Yugen UI

Slide

Slide trượt phần tử vào từ một cạnh — start, end, top hoặc bottom.

start/end là hướng logic: trong RTL, start là cạnh phải (tự đảo qua biến thể rtl:). Khoảng trượt 20px (spacingXL) kèm mờ dần; dùng cho thông báo, thanh hành động, nội dung chuyển bước.
start
end
top
bottom

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Slide } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

start → từ phải
end → từ trái

Hướng logic trong RTL

Cùng from="start" nhưng trong vùng dir="rtl" phần tử trượt vào từ bên phải.

Thông báo trượt vào

from="bottom" + unmountOnExit cho thông báo tạm thời.

Cách dùng

Nên
  • Trượt từ phía phần tử sẽ "neo" vào (thông báo từ dưới, panel từ cạnh).
  • Dùng start/end thay cho left/right để đúng RTL.
Không nên
  • Không trượt nhiều phần tử theo các hướng khác nhau cùng lúc.
  • Không dùng Slide cho tooltip, menu — đã có animation riêng.

Props

Prop · KiểuMặc địnhMô tả
visiblebooleanMặc định: —true: chạy chuyển động vào; false: chạy chuyển động ra.
appearbooleanMặc định: falseChạy chuyển động vào ngay lần render đầu (khi visible = true).
unmountOnExitbooleanMặc định: falseGỡ phần tử khỏi DOM khi thoát xong; nếu false phần tử được ẩn (visibility: hidden).
duration"faster" | "fast" | "normal" | "gentle" | "slow"Mặc định: "normal"Thời lượng pha vào — map tới token --durationFaster … --durationSlow; easing --curveDecelerateMid.
exitDuration"faster" | "fast" | "normal" | "gentle" | "slow"Mặc định: = durationThời lượng pha ra; easing --curveAccelerateMid.
onMotionFinish(direction: "enter" | "exit") => voidMặc định: —Gọi khi một pha chuyển động kết thúc.
childrenReactElementMặc định: —Một phần tử duy nhất — nhận class chuyển động qua Slot.
from"start" | "end" | "top" | "bottom"Mặc định: "bottom"Cạnh trượt vào (start/end theo hướng chữ).
animateOpacitybooleanMặc định: trueKèm mờ dần.