Mobile UI Components library built on Vue 3 with 100+ components
74
{
"context": "This evaluation assesses how well the engineer uses the Vant FloatingBubble component to create a draggable floating action button. The focus is on proper usage of FloatingBubble's axis, magnetic, offset, and gap properties to meet the specified requirements.",
"type": "weighted_checklist",
"checklist": [
{
"name": "FloatingBubble component import",
"description": "Correctly imports the FloatingBubble component from the 'vant' package",
"max_score": 10
},
{
"name": "Axis configuration",
"description": "Uses the 'axis' prop set to 'xy' to enable dragging along both horizontal and vertical axes",
"max_score": 20
},
{
"name": "Magnetic edge snapping",
"description": "Uses the 'magnetic' prop set to 'x' to enable automatic snapping to the left or right screen edge when released",
"max_score": 25
},
{
"name": "Initial offset positioning",
"description": "Uses the 'offset' prop with an object containing x: 300 and y: 100 to set the initial position",
"max_score": 25
},
{
"name": "Edge gap configuration",
"description": "Uses the 'gap' prop set to 20 to maintain a minimum 20-pixel distance from screen edges",
"max_score": 20
}
]
}Install with Tessl CLI
npx tessl i tessl/npm-vantdocs
evals
scenario-1
scenario-2
scenario-3
scenario-4
scenario-5
scenario-6
scenario-7
scenario-8
scenario-9
scenario-10