components/Markdown/custom_tags/select-box.md

select-box

Add a selection interaction box to markdown text.

How to Use

Basic Usage

Card Style

Card Adapts to Width of Inner Elements

Listening to Python Events

API and Parameter List

value

The corresponding value of custom_data value in the custom event; returns the user's inputted value for options. If type="checkbox", it returns a list.

props

Attribute	Type	Default Value	Description
type	'checkbox' | 'radio'	'radio'	The type of selection box: 'radio' for radio buttons, 'checkbox' for checkboxes.
disabled	boolean		Disable the selection, usually used when reading historical information for re-rendering.
value	string		The default selected value, usually used to pre-select some options for the user when type="checkbox" and to set the default value for rendering after setting disabled.
direction	'horizontal' | 'vertical'	'horizontal'	Arrange selection boxes horizontally or vertically.
shape	'card' | 'default'	'default'	The style of the selection box.
options	(string | { label?: string, value?: string, imgSrc?: string })[]		The options provided to the user, each item can be a string or an object. When the value is an object, it can accept more custom values, where imgSrc only takes effect when shape="card".
select-once	boolean	false	Whether to allow the user to make a selection only once.
submit-text	string		The display value of the submit button. When this attribute has a value, the submit button will be displayed, and the selection event will only be triggered after the user clicks the submit button.
columns	number | { xs?: number, sm?: number, md?: number, lg?: number, xl?: number, xxl?: number }	{ xs: 1, sm: 2, md: 2, lg: 4 }	Effective only when shape="card". The number of columns each row of options occupies, the value range is 1 - 24, it is recommended that this value is divisible by 24, otherwise, the number of columns may not meet expectations. When this item is passed as an object, it can responsively control the number of rendered columns per row, responsive thresholds are as follows: - xs: screen < 576px - sm: screen ≥ 576px - md: screen ≥ 768px - lg: screen ≥ 992px - xl: screen ≥ 1200px - xxl: screen ≥ 1600px This configuration does not take effect when direction is vertical.
item-width	string		Effective only when shape="card". The width of each option, such as: 'auto', '100px', the default uses the width automatically allocated by columns.
item-height	string		Effective only when shape="card". The height of each option, defaults to adapt to the height of the element.
img-height	string	'160px'	Effective only when shape="card". The height of the images within each option.
equal-height	boolean	false	Effective only when shape="card". Whether the height of the options in each row should be equal, using the height of the tallest option.