@belleui/belle-button

button

Usage no npm install needed!

<script type="module">
  import belleuiBelleButton from 'https://cdn.skypack.dev/@belleui/belle-button';
</script>

README

@belleui/belle-button

Downloads per month NPM Version TypeScript Published on webcomponents.org

Preview

screent shot

Demo

Click to view demo

Install

npm install @belleui/belle-button

Useage

<belle-button>Default</belle-button>
<belle-button type="primary">Primary</belle-button>
<belle-button outline>Outline</belle-button>
<belle-button disabled>Disabled</belle-button>

Properties

Property Attribute Type Default Description
disabled disabled boolean false 是否禁用按钮
outline outline boolean false 只显示外边框
loading loading boolean false 是否显示loading
type type string "default" 按钮的类型

Slots

Name Description
默认插槽，按钮文字或者其他html标签

CSS Custom Properties

Property Default Description
--background-color 背景颜色
--border-color border颜色
--border-radis "6px" 圆角
--font-color 按钮字体颜色
--hover-background-color hover时按钮背景颜色
--hover-border-color hover时border的颜色
--hover-font-color "--font-color" hover时字体的颜色