Fellista används för att sammanställa inmatningsfel i stora formulär.
Visa kod
<script lang ="ts" >
import { defineComponent } from "vue" ;
import { FErrorList , FTextField } from "@fkui/vue" ;
export default defineComponent ({
name : "FErrorListDefault" ,
components : { FErrorList , FTextField },
data (return {
items : [
{ id : "fornamn" , title : "Förnamn" },
{ id : "efternamn" , title : "Efternamn" },
],
};
},
});
</script >
<template >
<div >
<f-error-list :items >
<template #title > Kolla på felen nedan </template >
</f-error-list >
<f-text-field id ="fornamn" v-validation.maxLength > Förnamn </f-text-field >
<f-text-field id ="efternamn" v-validation.maxLength > Efternamn </f-text-field >
</div >
</template >
Fellistan ska visas och få fokus när användaren försöker att skicka in ett formulär med fel.
Rubriken är valfri, men rekommenderas eftersom den visar en ikon som kompletterar varningsfärgen på texten.
Punktlistan består av länkar till inmatningskomponenter som är felaktigt ifyllda och till obligatoriska fält som har lämnats tomma.
Rubriken samt feltexterna bestäms av applikationen.
Om en inmatningskomponent är placerad i en utfällbar yta (t.ex. en Expanderbar panel) kan den fällas ut automatiskt när användaren trycker på länken till felet.
Varken ikon eller text visas om du inte använder title -slotten.
Visa kod
<script lang ="ts" >
import { defineComponent } from "vue" ;
import { FErrorList , FTextField } from "@fkui/vue" ;
export default defineComponent ({
name : "FErrorListNoTitle" ,
components : { FErrorList , FTextField },
data (return {
items : [
{ id : "fornamn-utan-text" , title : "Förnamn" },
{ id : "efternamn-utan-text" , title : "Efternamn" },
],
};
},
});
</script >
<template >
<div >
<f-error-list :items > </f-error-list >
<f-text-field id ="fornamn-utan-text" v-validation.maxLength > Förnamn </f-text-field >
<f-text-field id ="efternamn-utan-text" v-validation.maxLength > Efternamn </f-text-field >
</div >
</template >
Visa kod
<script lang ="ts" >
import { defineComponent } from "vue" ;
import { FErrorList } from "@fkui/vue" ;
export default defineComponent ({
name : "FErrorListNoLinks" ,
components : { FErrorList },
data (return { items : [{ title : "Förnamn" }, { title : "Efternamn" }] };
},
});
</script >
<template >
<f-error-list :items > </f-error-list >
</template >
Visa kod
<script lang ="ts" >
import { defineComponent } from "vue" ;
import { FErrorList , FExpandablePanel , FTextField } from "@fkui/vue" ;
export default defineComponent ({
name : "FErrorListBeforeNavigate" ,
components : { FErrorList , FExpandablePanel , FTextField },
data (return {
items : [
{ title : "Favoritfrukt" , id : "favorit-frukt" , focusElementId : "favorit-frukt" },
{ title : "Favoritgodis" , id : "favorit-godis" , focusElementId : "favorit-godis" },
],
expanded : false ,
};
},
methods : {
beforeNavigate (this .expanded = true ;
return this .$nextTick();
},
},
});
</script >
<template >
<div >
<f-error-list :items :before-navigate >
<template #title > Kolla på felen nedan </template >
</f-error-list >
<f-expandable-panel :expanded @toggle ="expanded = !expanded" >
<template #title > Favoriter </template >
<template #default >
<f-text-field id ="favorit-frukt" maxlength ="100" > Favoritfrukt 🍎 </f-text-field >
<f-text-field id ="favorit-godis" maxlength ="100" > Favoritgodis 🍬 </f-text-field >
</template >
</f-expandable-panel >
</div >
</template >
items : ErrorItem[]
List of errors of type ErrorItem.
If element id is unspecified, no link will be rendered.
If element with id don't exist on navigation, an exception is thrown.
beforeNavigate : BeforeNavigateOptional
Optional callback for performing actions before navigation.
Default: function() {
return noop;
}
title
Optional title shown above the errorlist. No icon is shown if no title is set