Introduction

fs-radio-picker-m is the modular invocation version of fs-radio-picker. It lets you invoke the single/multiple selector through a JavaScript method without declaring the component in the page, making usage more convenient.

Usage

Local import — configure it in the index.json of the page or component that needs it:

"usingComponents": {
  "dialog-center": "ava-ui/fxui/DialogCenter/DialogCenter"
}

Method invocation

import dialogSet from "../DialogCenter/DialogSet";
dialogSet.fsRadioPicker.show(options);

Code demos

Basic usage

---

API

Options

Parameter	Description	Type	Optional values	Default
title	Selector title	string	—	'Selector'
options	Option data	array	—	[]
value	Currently selected value	string/array	—	null
mode	Selection mode	string	single/multiple	single
showSearch	Whether to show the search box	boolean	true/false	true
searchPlaceholder	Search box placeholder	string	—	'Search'
showSelectAll	Whether to show the select-all button (only effective in multiple mode)	boolean	true/false	false
confirmButton	Confirm button configuration	object	—	null
cancelButton	Cancel button configuration	object	—	null
selectedCountText	Text showing the number of selected items	string	—	'Selected'
radioType	Radio type	string	circle/list	circle
overlay	Overlay configuration	object	—	{}
allowDeselect	Whether deselection is supported in single mode	boolean	true/false	true
confirm	Confirm callback; the callback parameter contains	function	—	—
cancel	Cancel callback	function	—	—
close	Close callback	function	—	—
overlayClick	Overlay click callback	function	—	—

Property	Description	Type	Default
zIndex	Overlay z-index	number	12000
backgroundColor	Overlay background color	string	'rgba(0,0,0,0.7)'
duration	Animation duration (ms)	number	300
preventScrollThrough	Whether to prevent scroll-through	boolean	true
closeOnOverlayClick	Whether clicking the overlay closes the popup	boolean	true
customStyle	Custom style	string	''
customClass	Custom style class name	string	''

---

Notes

1. Component import: You need to import the dialog-center component in the page's JSON file.
2. Callback handling: It is recommended to handle both confirm and cancel callbacks.
3. Parameter validation: The options array must not be empty.
4. Memory management: The component manages its lifecycle automatically; no manual destruction is needed.
5. Overlay configuration: The overlay configuration is passed through to the fs-popup component and supports all fs-popup overlay options.
6. Event handling: The overlayClick event fires when the overlay is clicked, regardless of the closeOnOverlayClick setting.
7. Z-index control: If the page has other popups, you can adjust the z-index via overlay.zIndex.
8. Select-all feature: showSelectAll only takes effect when mode='multiple'; it supports smart state toggling and is compatible with search.

---

Preview

打开预览