Hiệu ứng khi rê chuột

Chọn một phần tử rồi nhìn hàng Trạng thái ở đầu bảng bên phải — nó nằm ở đầu cả hai tab, Chung lẫn Nâng cao, vì phần lớn thứ bạn sẽ chỉnh (Nền, Chữ, Bố cục) nằm ở tab Chung. Bên cạnh Mặc định giờ có thêm:

• Di chuột — dáng của chính phần tử này khi con trỏ nằm trên nó.
• Di chuột ▸ <tên khối> — dáng của nó khi con trỏ nằm ở đâu đó trong khối chứa nó. Ô này gọi tên khối đó, nên không bao giờ phải đoán.

Ô thứ hai mới là cái đáng để mở trang này ra đọc. Ô thứ nhất chỉ làm được những gì con trỏ đặt thẳng lên phần tử — đổi màu một dòng chữ, làm sáng một tấm ảnh. Ô thứ hai làm được thứ mà mọi trang bán hàng đều có: rê vào cả thẻ sản phẩm thì ảnh phóng nhẹ, tiêu đề đổi màu, nút mua nhanh hiện lên — ba phần tử khác nhau cùng phản ứng với một con trỏ không hề nằm trên phần tử nào trong số đó.

Thẻ sản phẩm dựng sẵn nằm phẳng: ảnh, tiêu đề, giá đều là con trực tiếp của thẻ. Nên chọn ảnh rồi mở Di chuột ▸ Sản phẩm là bạn đang chỉnh đúng cái "khi rê vào thẻ" mà không phải sắp xếp gì thêm. Lồng sâu hơn thì khối chứa gần nhất mới là khối được lấy — và tên trong ô nói thẳng đó là khối nào.

Chọn xong một trạng thái, mọi thứ bạn chỉnh — Nền, Viền và bóng, Giãn cách, Bố cục, Chữ — chỉ áp dụng cho lúc đó. Dáng bình thường không suy suyển. Bấm lại Mặc định để quay về.

Hàng Hiệu ứng: năm cái tên thay cho việc tự chỉnh

Ngay dưới hàng Trạng thái, khi đang ở một trong hai ô trên, có hàng Hiệu ứng với năm lựa chọn: Nhấc lên, Phóng to, Mờ đi, Sáng lên, Gạch chân.

Chúng không phải một cơ chế riêng — bấm một cái là nó điền sẵn vài dòng vào đúng các nhóm ngay bên dưới, y như bạn tự gõ. Nên chỉnh tay tiếp được, và khi bạn chỉnh thì cái tên tự bỏ sáng: hiệu ứng đã khác cái tên đó rồi. Bấm lại cái đang sáng là xoá.

Không cái nào trong năm cái đổi kích thước của phần tử, và đó là chủ ý. Một hộp phình ra dưới con trỏ sẽ đẩy mọi thứ quanh nó — kể cả cái người xem đang nhắm tới. Phóng to dùng phép biến hình, ảnh to lên mà không có gì xê dịch. Vì vậy tab Di chuột cũng không có nhóm Kích thước.

Ảnh phóng to mà tràn ra ngoài thẻ thì đó là việc của thẻ, không phải của ảnh: chọn thẻ, Nâng cao → Tràn đặt thành ẩn.

Nút chỉ hiện khi rê

Nút "Thêm vào giỏ" nằm sẵn trên thẻ nhưng chỉ hiện khi rê chuột vào — đây là thứ duy nhất trong trang này không làm bằng trạng thái, vì một trạng thái chỉ đè lên dáng có sẵn, mà ở đây phải có gì đó giấu nút đi trước đã.

Chọn nút, mở Nâng cao → Hiển thị, bật công tắc Khi rê chuột. Nút biến mất, và hiện lại khi con trỏ vào khối chứa nó. Công tắc chỉ xuất hiện khi phần tử thật sự nằm trong một khối nào đó — không có gì để rê thì bật lên chỉ là xoá mất cái nút.

Nút được giấu bằng cách làm mờ và tắt tương tác, không phải bằng cách bỏ khỏi trang: nó vẫn giữ chỗ của mình, nên thẻ không giật lên giật xuống lúc hiện ra, và lúc đang vô hình thì không ai bấm nhầm vào nó.

Điện thoại: không có con trỏ, và không mất gì

Đây là điều đáng biết nhất ở trang này.

Màn hình cảm ứng không có "rê chuột". Nếu để nguyên, một cú chạm sẽ dính lại trạng thái hover cho tới khi chạm chỗ khác — và tệ hơn nhiều: cái nút bạn đặt "chỉ hiện khi rê" sẽ vô hình vĩnh viễn trên điện thoại, không có cử chỉ nào lấy nó lại.

Nên toàn bộ những gì trong trang này chỉ có hiệu lực trên thiết bị có con trỏ. Trên điện thoại, mọi hiệu ứng hover đơn giản là không chạy, còn nút "chỉ hiện khi rê" thì luôn hiện — đúng cách mọi trang bán hàng làm. Bạn không phải tắt gì cả.

Mỗi khổ màn hình chỉnh riêng

Cả hai trạng thái lẫn công tắc Khi rê chuột đều theo khổ màn hình, đúng quy tắc lan truyền ở Sửa riêng cho điện thoại. Đặt ở máy tính là có hiệu lực xuống mọi khổ nhỏ hơn cho tới khi một khổ nói khác đi.

Trên canvas, rê chuột lên phần tử là thấy ngay hiệu ứng thật. Còn trong lúc bạn đang mở tab Di chuột để chỉnh, canvas giữ nguyên dáng-khi-rê — nếu không thì con trỏ đang ở bên bảng điều khiển, và bạn sẽ chỉnh màu mà chẳng thấy gì đổi.

Hiệu ứng chuyển giữa hai dáng được thêm sẵn cho đúng những thuộc tính bạn đổi, khoảng một phần năm giây. Tự đặt hiệu ứng chuyển riêng thì giá trị của bạn được giữ.

Vài phần tử có ô Di chuột của riêng chúng

Nút bấm, mục tab, mục menu, ô lọc, tuỳ chọn phân loại — những phần tử này vốn đã có ô Di chuột riêng từ trước, do chính chúng vẽ. Ở đó bạn thấy đúng một ô Di chuột chứ không phải hai, và nó vẫn hoạt động như cũ.

Còn những phần tử "da" — mục tab, nút tăng giảm số lượng — không tự vẽ khung riêng trên trang, nên chúng không có ô Di chuột ▸ nào cả. Muốn cả hàng phản ứng thì chỉnh trên khối chứa chúng.