Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>xhs-delight-snippetsNew to Visual Studio Code? Get it now.
xhs-delight-snippets

xhs-delight-snippets

xhs-appworks

|
786 installs
| (2) | Free
Delight代码片段
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Features

  • Basically all Delight tags are as follows.
  • We can use "de" as prefix, and trigger by keywords, e.g. deb for <Button>, Actual code snippet: <Button type="$1" @click="$2">${4}</Button>
  • All code snippets, based on Delight Design

Release Notes

1.0.0

Initial Delight basic components


Snippets List

常用代码模块

No. Trigger Key Delight Tag
1. v vue3 + ts + setup 代码模板

通用组件

No. Trigger Key Delight Tag
1. deb <Button>
2. dei <Icon>
3. deseg <SegmentControl>
4. detoggle <ToggleButton>
5. det <Text>
6. del <Link>

布局

No. Trigger Key Delight Tag
1. degr <Grid>
2. despa <Space>
3. dedi <Divider>

导航

No. Trigger Key Delight Tag
1. deaffix <Affix>
2. debread <Breadcrumb>
3. dedrop <Dropdown>
4. depage <Pagination>
5. destep <Steps>

数据录入

No. Trigger Key Delight Tag
1. decas <Cascader>
2. decheck <Checkbox>
3. decheckboxgroup or decg <CheckboxGroup>
4. decheckboxgroup2 or decg2 <CheckboxGroup> with options
5. dedate <DatePicker>
6. dedaterange <DateRangePicker>
7. dein <Input>
8. denum or deinputnum <InputNumber>
9. derate <Rate>
10. deradio <Radio>
11. derg or deradiogroup <RadioGroup>
12. derg2 or deradiogroup2 <RadioGroup> with options
13. desel <Select>
14. deselremote <Select remote>
15. desli <Slider>
16. deswi <Switch>
17. detexta or detextarea <TextArea>
18. detime <TimePicker>
19. detimerange <TimeRangePicker>
20. detrans <Transfer>
21. deup <Upload>
22. detree or devirt <VirtualTree>

数据展示

No. Trigger Key Delight Tag
1. deava <Avatar>
2. debadge <Badge>
3. demeta <Meta>
4. decard <Card>
5. deco or deCollapse <Collapse>
6. decog or deCollapseGroup <CollapseGroup>
7. deli <List>
8. depopo <Popover>
9. detable <Table>
10. detab <Tabs>
11. detag <Tag>
12. detimeline or detl <Timeline>
13. desta <Statistic>
14. detooltip or detip <Tooltip>
15. detr <Tree>

反馈

No. Trigger Key Delight Tag
1. deban <Banner>
2. dedra <Drawer>
3. deres <Result>
4. defeed <Feedback>
5. demod <Modal>
6. depopc <Popconfirm>
7. depro <Progress>
8. deske <Skeleton>
9. despi <Spinner>

其他

No. Trigger Key Delight Tag
1. dean <Anchor>
2. deback <BackTop>
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft