npm 包 thanh-material 使用教程

在前端开发中，使用现成的 UI 库可以节约开发时间，同时保证界面的美观和可用性。其中，thanhhaimai2807/thanh-material 是一个不错的开源 UI 库，它提供了丰富的 UI 组件和风格自定义选项，可以满足大部分项目的需求。本文将介绍如何使用 npm 包引入该库，并通过实例展示其各类组件的用法。

安装 thanh-material

使用 npm 包管理工具进行安装：

$ npm install thanh-material --save

组件

Button

Button 组件是一个基本的 UI 控件，它可以触发某些操作或事件。可以通过以下方式使用：

<th-button>确定</th-button>

import { ThButton } from 'thanh-material'

...

components: {
  ThButton
}

Button 组件支持多种属性 customization，例如 color 、size 和 outlined 等。我们可以在组件标签上通过这些属性进行设置：

<th-button color="primary" size="large" outlined>确定</th-button>

TextField

TextField 组件是一个可以输入文本的文本框，支持各种文字输入提示。使用该组件的方法如下：

<th-text-field placeholder="请输入用户名" />

import { ThTextField } from 'thanh-material'

...

components: {
  ThTextField
}

TextField 组件同样支持多种属性 customization，例如 type 、size 和 disabled 等。我们可以在组件标签上通过这些属性进行设置：

<th-text-field type="password" size="large" disabled />

Card

Card 组件是一个用来显示文章、信息等的卡片式容器，可以包含标题、文本、图片等内容。使用该组件的方法如下：

<th-card
  title="新闻标题"
  text="这里是新闻内容"
  image="https://source.unsplash.com/random/800x600"
/>

import { ThCard } from 'thanh-material'

...

components: {
  ThCard
}

Card 组件的属性 customization 包括 title 、text 和 image 等。我们可以在组件标签上通过这些属性进行设置：

<th-card
  title="特别报道"
  text="xxxxx"
  image="https://source.unsplash.com/random/800x600"
  :shadow="true"
/>

Dialog

Dialog 组件是一个用来显示警告、错误等信息的弹出层，支持自定义标题、内容、按钮等组成部分。使用该组件的方法如下：

<th-dialog :show="true">
  <template #title>警告</template>
  <template #body>确定要删除这条记录吗？</template>
  <template #buttons>
    <th-button color="primary" size="small">确定</th-button>
    <th-button color="secondary" size="small">取消</th-button>
  </template>
</th-dialog>

import { ThDialog } from 'thanh-material'

...

components: {
  ThDialog
}

Dialog 组件的可自定义部分包括 title 、body 和 buttons 。我们可以在模板中通过 Slots 插入子组件来定义它们。

结语

本文介绍了 thanhhaimai2807/thanh-material 这个开源 UI 库的使用方法，以及其 Button 、TextField 、Card 和 Dialog 等组件的属性 customization 和用法。希望读者可以通过阅读本文，快速掌握该库的使用，并在自己的项目中灵活运用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f8181e8991b448dce63