/vitepress-demo

使用 Vitepress 搭建组件库文档站点。

Primary LanguageCSS

Vitepress Demo

基于 Vitepress-Theme-Demoblock 插件来实现vue组件的支持。

  • vue组件
<demo-block>
  <xl-button>默认按钮</xl-button>
  <xl-button type="primary">主要按钮</xl-button>
  <xl-button type="success">成功按钮</xl-button>
  <xl-button type="info">信息按钮</xl-button>
  <xl-button type="warning">警告按钮</xl-button>
  <xl-button type="danger">危险按钮</xl-button>
</demo-block>

image-20210629113103980

  • vue代码自动渲染并且显示对应code（支持script和style）

:::demo 使用type、plain、round和circle属性来定义 Button 的样式。

<template>
  <xl-button>默认按钮</xl-button>
  <xl-button type="primary">主要按钮</xl-button>
  <xl-button type="success">成功按钮</xl-button>
  <xl-button type="info">信息按钮</xl-button>
  <xl-button type="warning">警告按钮</xl-button>
  <xl-button type="danger">危险按钮</xl-button>
</template>

:::

image-20210629112953325