SSelect <s-select>

Một dropdown để chọn một tùy chọn từ danh sách. SSelect là Vue 3 wrapper có type cho web component <s-select> của Shopify Polaris.

import { SSelect } from 'polaris-vue-elements'

Best practices

• Dùng cho một tập lựa chọn đã biết. Select phù hợp khi người bán chọn từ một danh sách định sẵn. Khi người bán cần nhập giá trị tùy chỉnh hoặc tìm trong một danh sách dài, một text field gợi ý kết quả khớp khi họ gõ, hoặc một dropdown có thể tìm kiếm, sẽ phù hợp hơn.
• Sắp xếp các tùy chọn có chủ đích. Nhóm các tùy chọn liên quan, đặt những tùy chọn phổ biến nhất lên đầu, hoặc sắp xếp theo bảng chữ cái khi không có thứ tự tự nhiên, để người bán nhanh chóng tìm thấy lựa chọn của mình.
• Viết nhãn dễ lướt. Cho mỗi tùy chọn đủ ngữ cảnh để người bán phân biệt được các tùy chọn mà không phải mở ra và đọc qua nhiều tùy chọn.
• Chọn trạng thái ban đầu có chủ đích. Chọn sẵn một tùy chọn khi có một giá trị mặc định hiển nhiên, và dùng placeholder khi người bán nên đưa ra lựa chọn có cân nhắc. Đừng để trạng thái ban đầu mơ hồ.
• Giải thích lỗi xác thực. Khi một lựa chọn là bắt buộc hoặc không hợp lệ, dùng error để nói cụ thể người bán cần làm gì, vì thông báo được viết riêng giúp họ hoàn thành form nhanh hơn thông báo chung chung.

<SSelect label="Shipping speed" placeholder="Choose a shipping speed" required>
  <SOption value="standard">Standard (5–7 business days)</SOption>
  <SOption value="express">Express (2–3 business days)</SOption>
  <SOption value="overnight">Overnight (next business day)</SOption>
</SSelect>

Xem best practices của Shopify cho <s-select> (tiếng Anh) để có hướng dẫn đầy đủ.

Ví dụ

United StatesCanadaFranceGermany

Value: (none)

<script setup>
import { ref } from 'vue'
import { SSelect, SOption, SOptionGroup } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SSelect label="Shipping region" placeholder="Select a region" v-model="value">
    <SOptionGroup label="North America">
      <SOption value="us">United States</SOption>
      <SOption value="ca">Canada</SOption>
    </SOptionGroup>
    <SOptionGroup label="Europe">
      <SOption value="fr">France</SOption>
      <SOption value="de">Germany</SOption>
    </SOptionGroup>
  </SSelect>
  <p>Value: {{ value }}</p>
</template>

v-model

v-model trên <SSelect> gắn với property value và lắng nghe DOM event change.

<SSelect v-model="value" />

tương đương với:

<SSelect :value="value" @change="value = $event.target.value" />

Props

Prop	Kiểu	Mô tả
details	any	Văn bản bổ sung cung cấp ngữ cảnh hoặc hướng dẫn cho trường. Văn bản này được hiển thị cùng với trường và nhãn của nó để cung cấp thêm thông tin hoặc chỉ dẫn cho người dùng. Văn bản này cũng được cung cấp cho người dùng trình đọc màn hình.
disabled	boolean	Vô hiệu hóa trường, không cho phép bất kỳ tương tác nào.
error	any	Báo lỗi cho người dùng. Trường sẽ được áp dụng kiểu hiển thị riêng để thông báo các vấn đề cần được giải quyết ngay.
icon	"color" | "info" | "adjust" | "affiliate" | "airplane" | "alert-bubble" | "alert-circle" | "alert-diamond" … (553 more)	Loại icon hiển thị trong trường.
id	string	Định danh duy nhất của phần tử.
label	any	Nội dung dùng làm nhãn của trường.
labelAccessibilityVisibility	"visible" | "exclusive"	Thay đổi khả năng hiển thị của nhãn của component. - visible: nhãn hiển thị với mọi người dùng. - exclusive: nhãn bị ẩn về mặt thị giác nhưng vẫn nằm trong cây trợ năng (accessibility tree).
name	string	Định danh cho trường, là duy nhất trong form chứa nó gần nhất.
placeholder	string	Gợi ý ngắn mô tả giá trị mong đợi của trường.
required	boolean	Trường có bắt buộc phải có giá trị hay không. Yêu cầu này bổ sung giá trị ngữ nghĩa cho trường, nhưng sẽ không tự động hiển thị lỗi. Nếu muốn hiển thị lỗi khi trường này trống, bạn có thể dùng thuộc tính error.
value	string

Một số cột kiểu ở trên đã được rút gọn cho dễ đọc; union đầy đủ có trong type TypeScript được generate của thư viện (src/lib/generated/types.ts).

Events

Event	Kiểu
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Lắng nghe các event này bằng listener dạng @blur trên <SSelect>.

Slots

Slot	Mô tả
default	Các lựa chọn hiển thị trong danh sách dropdown. Chấp nhận component option cho từng mục có thể chọn, và component option group để sắp xếp các lựa chọn liên quan thành các nhóm logic có nhãn.
details
error