@forter/select NPM

fc-select

An element to select values from a list

Usage

<script>
   import '@forter/select';
</script>

<fc-select list='["-","foo","bar","zoo","loo","doo","ree","mee","faa","sol","la"]'>
</fc-select>

Examples

<!-- slot and value -->
<fc-select value="coolDog">
   <option value="coolDog">My Cool Dog Properties</option>
   <option value="coolCat">My Cool Cat Properties</option>
   <option value="elseValue">Else text</option>
</fc-select>

Properties

Property	Attribute	Type	Default	Description
`activate`		`any`
`clear`		`any`
`close`		`any`
`deactivate`		`any`
`disabled`	`disabled`	`boolean`	false	If the element is disabled
`dropdownignoreoverflowclipping`	`dropdownignoreoverflowclipping`	`boolean`	false	If the element should ignore hiding rules such as overflow: hidden on the parent.
`extended`	`extended`	`"" \\| "width: auto"`
`flat`	`flat`	`boolean`	false	Whether the input had no depth or border
`invalid`	`invalid`	`boolean`		Whether the input is invalid
`item`		`any`
`label`	`label`	`string`
`list`	`list`	`string`		The element text for no data scenario. example: `['foo','bar']`
`loading`	`loading`	`boolean`	false	If the button is loading
`onOptionHover`		`any`
`optionText`		`any`
`path`		`string`		Pre-Defined size
`placeholder`	`placeholder`	`string`	"Select"
`required`	`required`	`boolean`		If the element is required
`search`		`any`
`select`		`any`
`supportSecondLineOption`	`supportSecondLineOption`	`boolean`	false	If fc-select should support 2 lines of single option, instead of tooltip
`typing`		`any`
`updatePosition`		`any`
`valid`	`valid`	`boolean`		Whether the input is valid
`value`	`value`	`string`		Selected value. example: `foo`
`warning`	`warning`	`string`

Events

Event	Description
`activate`	execute when activate a value
`clear`	execute when clear list.
`close`	execute when close list.
`deactivate`	execute when activate a value
`search`	execute when searching value
`select`	execute when select value from list
`typing`	execute when typing

Slots

Name	Description
`all`	title at top of the list. example: `<option value="coolDog">My Cool Dog Properties</option><option value="coolCat">My Cool Cat Properties</option><option value="elseValue">Else text</option>`

CSS Custom Properties

Property	Description
`--fc-select-background-color`	background
`--fc-select-border-color`	border-color
`--fc-select-border-radius`	border-radius
`--fc-select-box-shadow`	box-shadow
`--fc-select-color`	color
`--fc-select-cursor`	cursor
`--fc-select-disabled-color`	disabled color. example: `gray`
`--fc-select-font-family`	font-family
`--fc-select-font-size`	font-size
`--fc-select-font-weight`	font-weight
`--fc-select-outline`	outline
`--fc-select-padding`	padding