Yugen UI

Foundations · Yugen Labs

Glass

Vật liệu trong mờ cho lớp điều hướng nổi trên nội dung: thanh công cụ, thanh tab, sidebar, menu và các bề mặt tạm. Nội dung vẫn là trung tâm; glass chỉ nằm trên lớp điều khiển.

Labs: tên prop và token có thể đổi trước 1.0

Tổng quan

Lấy cảm hứng từ Liquid Glass, chuyển sang web và token của Yugen. Bật glass trên từng component bằng material="glass"; giao diện mặc định không đổi. Cuộn trong khung dưới đây: ảnh trượt dưới thanh trên và thanh tab, thanh tab thu gọn khi cuộn xuống.

Ngày 1
Ngày 2
Ngày 3
Ngày 4
Ngày 5
Ngày 6
Ngày 7
Ngày 8
Ngày 9
Ngày 10
import { Toolbar, ToolbarButton, TabsList, TabsTrigger, Tabs, useScrollMinimize } from "yugen-ui";

function TripBars() {
  const minimized = useScrollMinimize();
  return (
    <>
      <header className="scroll-edge sticky top-0 z-10 flex justify-center pt-3">
        <Toolbar material="glass" aria-label="Trip actions">
          <ToolbarButton icon={<Share20Regular />} aria-label="Share" />
        </Toolbar>
      </header>
      {/* … content … */}
      <Tabs defaultValue="home" className="fixed inset-x-0 bottom-3 flex justify-center">
        <TabsList material="glass" minimized={minimized} aria-label="Sections">
          <TabsTrigger value="home" icon={<Home20Regular />}>Home</TabsTrigger>
        </TabsList>
      </Tabs>
    </>
  );
}

Biến thể

glass dùng chung, theo theme sáng / tối. glass-clear dùng trên ảnh và media: luôn đặt glass-scrim lên ảnh để chữ trắng đọc được. glass-tinted (Button appearance="glass-prominent") cho một hành động chính.

Khúc xạ

Như ánh sáng đi qua vành ly, mép của bề mặt glass bẻ cong phần nền phía sau; phần giữa vẫn mờ để chữ giữ tương phản. Rõ nhất trên ảnh.

Cầu đỏ bắc qua hào

Ảnh: mko294, CC BY 4.0

import { GlassRefraction, YugenProvider } from "yugen-ui";

export function App() {
  return (
    <YugenProvider>
      <GlassRefraction />
      {/* … app … */}
    </YugenProvider>
  );
}
  • Đặt <GlassRefraction /> một lần ở gốc app. Nó theo dõi mọi phần tử glass, glass-clear và glass-tinted (cả trong portal) và tạo một bộ lọc SVG cho mỗi kích thước và độ bo góc.
  • Chỉ trình duyệt Chromium vẽ được bộ lọc SVG trong backdrop-filter. Safari và Firefox giữ glass như cũ, không cần làm gì thêm.
  • Tắt cùng blur: giảm trong suốt, tăng tương phản, forced colors, theme tương phản cao, glass lồng trong glass. Bề mặt lớn hơn 400.000 px² giữ glass thường.

Component

ComponentPropGhi chú
ToolbarmaterialThanh nổi bo tròn hai đầu; nút bên trong bo đồng tâm.
TabsListmaterial · minimizedTab đang chọn là nền bo tròn. minimized chỉ còn icon (dùng với useScrollMinimize).
NavmaterialSidebar nổi có đệm và bo góc.
SearchBox / Inputappearance="glass"Ô nhập trong thanh glass.
Buttonappearance="glass" · "glass-prominent"Nút nổi trên nội dung; prominent là màu brand.
MenuPopover · PopoverSurface · TooltipContentmaterialBề mặt tạm mở từ thanh glass. Menu và Popover mọc ra từ nút mở và thu về đó khi đóng (trừ khi giảm chuyển động).
Slider · Switchmaterial="glass"Thumb thành glass khi đang nhấn hoặc kéo: Slider to ra, Switch dài ra.
GlassRefraction—Đặt một lần ở gốc app: mép của mọi bề mặt glass khúc xạ (Chromium).
DialogSurface · DrawerSurface · SheetContentmaterialBottom sheet glass lồi vào trong mép màn hình và đặc dần khi kéo lên nấc cao nhất.

Glass cho cả ứng dụng

glassNavigationDefaults là một bộ prop mặc định cho YugenProvider: mọi component điều hướng có glass nhận material="glass" ở một chỗ. Prop material đặt trên instance vẫn thắng, vd. glass-clear trên ảnh.

import { YugenProvider, glassNavigationDefaults } from "yugen-ui";

<YugenProvider applyToDocument defaults={glassNavigationDefaults}>
  <App />
</YugenProvider>

// Together with other defaults
<YugenProvider applyToDocument defaults={{ ...glassNavigationDefaults, Button: { shape: "circular" } }}>
  <App />
</YugenProvider>

Gồm Toolbar, TabsList, Nav, MenuPopover, MenuSubPopover, PopoverSurface, TooltipContent, DialogSurface, DrawerSurface và SheetContent. Xem Props mặc định & mật độ ở trang Theming.

Utility

UtilityDùng cho
glassNền glass theo theme, kèm viền sáng và các token chữ / hover giữ tương phản.
glass-clearGlass trên ảnh / media, chữ trắng.
glass-tintedGlass màu brand cho một hành động chính.
glass-scrimLớp làm tối đặt lên ảnh dưới glass-clear.
scroll-edge · scroll-edge-aboveNội dung cuộn dưới vùng thanh sticky nhoè và mờ dần, thay cho vạch kẻ. Đặt lên vùng thanh trải hết chiều rộng.
rounded-concentricGóc trong = --concentric-radius − --concentric-padding của phần tử cha.
<!-- Thanh tự làm: nền glass, nút bo đồng tâm -->
<nav class="glass sticky top-3 rounded-circular p-1 [--concentric-radius:var(--borderRadiusCircular)] [--concentric-padding:--spacing(1)]">
  <a class="rounded-concentric px-3 py-1.5" href="/">Home</a>
</nav>

<!-- Trên ảnh: làm tối ảnh rồi đặt glass-clear -->
<div class="relative">
  <img src="…" alt="" />
  <div class="glass-scrim absolute inset-0"></div>
  <div class="glass-clear absolute bottom-3 inset-s-3 rounded-circular px-3 py-1.5">…</div>
</div>

Trợ năng

Độ đục của glass được chọn để chữ chính và chữ phụ đạt ít nhất 4.5:1 cả khi phía sau là trắng hay đen hoàn toàn: nền trắng 80% ở theme sáng, xám 82% ở theme tối. Bên trong glass, chữ mờ (foreground-3, -4) dùng màu của foreground-2 và chữ brand dùng sắc đậm hơn. glass-clear cần glass-scrim: chữ trắng đạt 5.9:1 cả khi ảnh trắng.

Tình huốngGlass hiển thị
prefers-reduced-transparency: reduceNền đặc, không blur.
prefers-contrast: moreNền đặc, viền rõ.
Theme tương phản caoNền đen, viền trắng.
forced-colors: activeMàu hệ thống, không blur.
Trình duyệt không có backdrop-filterNền đặc.
Glass lồng trong glassChỉ còn lớp màu, không blur lần hai.

Kiểm tra với Giảm trong suốt, Tăng tương phản, Giảm chuyển động và chế độ màu cưỡng bức của hệ điều hành; thử trên ảnh sáng nhất và tối nhất mà app có thể hiển thị.

Hiệu năng

  • Một backdrop-filter cho mỗi thanh: nút bên trong dùng chung, không tự có glass.
  • Tránh glass trên vùng lớn đổi liên tục (video, canvas animate): blur tính lại mỗi khung hình.
  • Glass lồng nhau tự tắt blur ở lớp trong.
  • Khúc xạ: bộ lọc dùng chung cho các bề mặt cùng kích thước; bản đồ chỉ tính lại khi kích thước đổi xong. Như blur, nó tính lại khi nền phía sau đổi.

Nên & không nên

Nên
  • Dùng glass cho thanh công cụ, thanh tab, sidebar và menu nổi trên nội dung.
  • Đặt glass-scrim lên ảnh nằm dưới glass-clear.
  • Mỗi màn hình chỉ một hành động glass-prominent.
Không nên
  • Dùng glass cho nội dung: thẻ, hàng danh sách, ô bảng.
  • Chồng glass lên glass.
  • Dùng glass-clear trên ảnh sáng mà không có scrim.