v-overflow-btn is used to give the user the ability to select items from the list. It has 3 variations: editable, overflow and segmented
Si vous utilisez des objets pour la propriété items, vous devrez probablement associer item-text et item-value aux propriétés correspondantes sur vos propres objets. Ces valeurs sont par défaut text et value mais peuvent être modifiées pour coller à votre structure de données.
La propriété auto de menu-props n'est supportée que pour le style d'inputs par défaut.
Sélectionnez le composant désiré ci-dessous afin de voir les props, slots, événements et méthodes disponibles.
Permet au menu de déborder hors de l'écran
Ajoute une icône au composant, utilise la même syntaxe que v-icon
Ajoute une icône à l'entrée du composant, utilise la même syntaxe que v-icon
Spécifie l'élément DOM auquel ce composant doit détacher.String peut être n'importe quel querySelector et Object valide peut être un noeud valide. Cela attachera au composant racine v-app par défaut.
Lors de la recherche, la première option sera toujours mise en évidence
Active autofocus
Modifie la couleur de fond de l'entrée
Keeps a local unique copy of all items that have been passed through the items prop.
Changes display of selections to chips
Appliqué lors de l'utilisation de clearable et l'entrée est sale
Ajoute la fonctionnalité de nettoyage du champ, l'icône par défaut est clear de Material Design
Applique la couleur spécifiée à la commande - cela peut être le nom de la couleur matérielle (par exemple success ou purple) ou la couleur css (#033 ou rgba(255, 0, 0, 0.5)). Vous pouvez trouver la liste des classes construites dans la page couleurs.
Crée le compteur pour la longueur de l'entrée; si aucun numéro n'est spécifié, il est par défaut à 25. Ne s'applique à aucune validation.
Applique la variante du thème foncé au composant. Cela va par défaut la couleur des composants à white à moins que vous ayez configuré votre thème d'application à dark ou si vous utilisez le prop couleur sur le composant. Vous pouvez trouver plus d'informations sur la documentation de Design de matériaux pour thèmes foncés.
Adds a remove icon to selected chips
Réduit la hauteur de l'entrée
Disables keyboard lookup
Désactive le champ
Force le contenu des composants à effectuer le rendu sur les composants montés. Ceci est utile si vous avez du contenu qui ne sera pas rendu dans le DOM que vous voulez explorer pour le référencement.
Crée un bouton modifiable
Place le champ dans un état d'erreur manuel
Le nombre total d'erreurs devant s'afficher en même temps
Insère l'entrée dans un état d'erreur et passe par des messages d'erreur personnalisés. Il sera combiné avec toutes les validations qui se produisent à partir du prop rules Ce champ ne déclenchera pas la validation
Applique le style d'entrée remplie a la place
The function used for filtering items
Supprime l'élévation (ombre) ajoutée à l'élément lors de l'utilisation des propriétés solo ou solo-inverted
Indique le type d'entrée comme prenant la largeur complète
Définit la hauteur de l'entrée
Hides hint and validation errors. When set to auto messages will be rendered only if there's a message (hint, error message, counter value etc) to display
Masque le menu lorsqu'il n'y a pas d'options à afficher. Utile pour empêcher le menu de s'ouvrir avant que les résultats ne soient récupérés de manière asynchrone. Il a également l'effet d'ouvrir le menu lorsque le tableau items change, s'il n'est pas déjà ouvert.
Do not display in the select menu items that are already selected
Texte d'indice
Définit l'identifiant DOM sur le composant
Sets color of selected items
Set property of items's disabled value
Set property of items's text value
Set property of items's value - must be primitive. Dot notation is supported. Note: This is currently not supported with v-combobox GitHub Issue
Can be an array of objects or array of strings. When using objects, will look for a text, value and disabled keys. This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and generate a list header or divider; these items are not selectable.
{
text: string | number | object
value: string | number | object
disabled: boolean
divider: boolean
header: string
}Définit l'étiquette d'entrée
Applique la variante claire du thème au composant.
Spécifie la hauteur de l'espace de chargement
Affiche la barre de progression linéaire. Il peut s'agir d'une chaîne spécifiant la couleur appliquée à la barre de progression (toute couleur Material ou du thème – primary, secondary, success, info, ** warning , **error) ou un booléen qui utilise la couleur du composant (définie par la propriété color – s'il est pris en charge par le composant) ou la couleur primaire
Pass props through to the v-menu component. Accepts either a string for boolean props menu-props="auto, overflowY", or an object :menu-props="{ auto: true, overflowY: true }"
Affiche une liste de messages ou un message si vous utilisez une chaîne de caractères
Changes select to multiple. Accepts array for value
Texte affiché lorsqu'il n'y a pas de données
Ne pas appliquer le filtrage lors de la recherche. Utile lorsque les données sont filtrées côté serveur
When using the clearable prop, once cleared, the select menu will either open or stay open, depending on the current state
Applique le style décrit à l'entrée
Force l'indice à toujours être visible
Définit le texte du marqueur de l'entrée
Affiche le texte du préfixe
Ajoute une icône au composant, utilise la même syntaxe que v-icon
Ajoute une icône dans l'entrée du composant, utilise la même syntaxe que v-icon
Met le champ en état de lecture seule
Changes the selection behavior to return the object directly rather than the value specified with item-value
Inverse l'orientation de l'entrée
Ajoute un rayon de bordure à l'entrée
Accepte un tableau de fonctions qui prennent une valeur d'entrée comme argument et retourne soit true / false ou une string avec un message d'erreur
Search value. Can be used with .sync modifier.
Crée un bouton segmenté
Round if outlined and increase border-radius if filled. Must be used with either outlined or filled
Le label ne se déplace pas dans l'état focus / sale
Changes display of selections to chips with the small property
Modifie le style du champ d'entrée
Réduit l'opacité de l'élément jusqu'à son focus
Met le champ dans un état de succès manuel
Met le champ en état de succès et transmet les messages de succès personnalisés.
Displays suffix text
Sets input type
Retarde la validation jusqu'à l'événement de perte de focus (blur)
The input's value
The comparison algorithm used for values. More info
Ajoute un élément après le contenu de l'entrée
Adds an item after menu content
Adds an item outside the input and after input content
L'emplacement par défaut de vue.
Define a custom item appearance
{
parent: VueComponent
item: object
on: object // Only needed when providing your own v-list-item
attrs: object // Only needed when providing your own v-list-item
}Remplace le label par défaut
Customize the messages slot.
{
key: number, // the messages index
message: string, // the message
}Affiché lorsqu'il n'y a pas d'éléments filtrés
Ajoute un élément avant le contenu de l'entrée
Adds an item inside the input and before input content
Adds an item before menu content
Slot pour la progression linéaire personnalisée (affiché lorsque la propriété loading n'est pas égale au booléen faux)
Define a custom selection appearance
{
parent: VueComponent
item: object
index: number
select: function
selected: boolean
disabled: boolean
}Émis lorsque l'entrée est floue
EventÉmis lorsque l'entrée est modifiée par l'interaction utilisateur
anyÉmis lorsque l'entrée est cliqué
MouseEventÉmis lorsque l'icône ajoutée est cliquée
EventEmitted when appended outer icon is clicked
EventEmitted when clearable icon clicked
EventÉmis lorsque l'icône précédente est cliqué
EventEmitted when prepended inner icon is clicked
EventEmitted when component is focused
EventLe modèle lié mis à jour
anyEmitted when any key is pressed
KeyboardEventÉmis lorsque le clic est pressé
MouseEventÉmis lorsque le clic est libéré
MouseEventL'événement error.sync
booleanEmitted when menu item is selected using keyboard arrows
numberL'événement search-input.sync
string$border-radius-root $border-radius-root 0 0 !default;48px !default;42px !default;12px !default;12px !default;16px !default;38px !default;8px 16px !default;$border-radius-root !default;0 1px 6px 0 rgba(32,33,36,0.28) !default;2 !default;2px 0 !default;16px !default;calc(50% - 10px) !default;12px !default;0 4px 6px 0 rgba(32,33,36,0.28) !default;0 0 $border-radius-root $border-radius-root !default;thin 0 !default;48px !default;-16px !default;16px !default;48px !default;Vous trouverez ci-dessous une collection d'exemples simples ou complexes.
Vous pouvez ajouter un compteur à v-overflow-btn pour contrôler le nombre max de caractères
v-overflow-btn peut être désactivé afin d'empêcher un utilisateur d'interagir avec lui
Vous pouvez utiliser le propdense pour réduire la hauteur des boutons de débordement et la hauteur maximale inférieure des éléments de liste.
modifiable v-overflow-btn peut être édité directement, tout comme v-text-field
Les champs texte peuvent être utilisés avec une conception alternative de la boîte. Les caractères d'icônes supplémentaires et prépendantes sont not pris en charge dans ce mode.
Vous pouvez ajouter une astuce pour l'utilisateur en utilisant la propriété hint
v-overflow-btn peut avoir l'état loading avec une barre de progression linéaire sous eux
Vous pouvez définir les props v-menu sous-jacents en utilisant la propriété menu-props
v-overflow-btn peut être placé en mode readonly, il deviendra inactif mais ne changera pas la couleur
segmented v-overflow-btn a et un séparateur supplémentaire entre le contenu et l'icône
Prêt pour plus ? Continuez la lecture avec :