| 1 |
- import{c as t,o,C as n}from"./vendor.ed841bd5.js";const e={class:"markdown-body"},d=n('<h1>Button 按钮</h1><h3>介绍</h3><p>按钮用于触发一个操作，如提交表单。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\n//vue\nimport { Button } from '@nutui/nutui';\n//mp\nimport { Button } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Button);\n</code></pre><h2>代码演示</h2><h3>按钮类型</h3><p>按钮支持 <code>default</code>、<code>primary</code>、<code>info</code>、<code>warning</code>、<code>danger</code>、<code>success</code> 六种类型，默认为 <code>default</code>。</p><pre><code class="language-html"><nut-button type="primary">主要按钮</nut-button>\n<nut-button type="info">信息按钮</nut-button>\n<nut-button type="default">默认按钮</nut-button>\n<nut-button type="danger">危险按钮</nut-button>\n<nut-button type="warning">警告按钮</nut-button>\n<nut-button type="success">成功按钮</nut-button>\n</code></pre><h3>朴素按钮</h3><p>通过 <code>plain</code> 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色。</p><pre><code class="language-html"><nut-button plain type="primary">朴素按钮</nut-button>\n<nut-button plain type="info">朴素按钮</nut-button>\n</code></pre><h3>禁用状态</h3><p>通过 <code>disabled</code> 属性来禁用按钮，禁用状态下按钮不可点击。</p><pre><code class="language-html"><nut-button disabled type="primary">禁用状态</nut-button>\n<nut-button plain disabled type="info">禁用状态</nut-button>\n<nut-button plain disabled type="primary">禁用状态</nut-button>\n</code></pre><h3>按钮形状</h3><p>通过 <code>shape</code> 属性设置按钮形状，支持圆形、方形按钮，默认为圆形。</p><pre><code class="language-html"><nut-button shape="square" type="primary">方形按钮</nut-button>\n<nut-button type="info">圆形按钮</nut-button>\n</code></pre><h3>加载状态</h3><pre><code class="language-html"><nut-button loading></nut-button>\n<nut-button loading>加载中</nut-button>\n</code></pre><h3>图标按钮</h3><pre><code class="language-html"> <nut-button shape="square" plain type="primary" icon="star-fill"></nut-button>\n <nut-button shape="square" type="primary" icon="star">收藏</nut-button>\n</code></pre><h3>按钮尺寸</h3><p>支持 <code>large</code>、<code>normal</code>、<code>small</code> 三种尺寸，默认为 <code>normal</code>。</p><pre><code class="language-html"><nut-button size="large" type="primary">大号按钮</nut-button>\n<nut-button type="primary">普通按钮</nut-button>\n<nut-button size="small" type="primary">小型按钮</nut-button>\n</code></pre><h3>块级元素</h3><p>按钮在默认情况下为行内块级元素，通过 <code>block</code> 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。</p><pre><code class="language-html"><nut-button block type="primary">块级元素</nut-button>\n</code></pre><h3>自定义颜色</h3><p>通过 color 属性可以自定义按钮的颜色。</p><pre><code class="language-html"><nut-button color="#7232dd">单色按钮</nut-button>\n<nut-button color="#7232dd" plain>单色按钮</nut-button>\n<nut-button color="linear-gradient(to right, #ff6034, #ee0a24)">\n 渐变色按钮\n</nut-button>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>类型，可选值为 <code>primary</code> <code>info</code> <code>warning</code> <code>danger</code> <code>success</code></td><td>String</td><td><code>default</code></td></tr><tr><td>size</td><td>尺寸，可选值为 <code>large</code> <code>small</code></td><td>String</td><td><code>normal</code></td></tr><tr><td>shape</td><td>形状，可选值为 <code>square</code></td><td>String</td><td><code>round</code></td></tr><tr><td>color</td><td>按钮颜色，支持传入 linear-gradient 渐变色</td><td>String</td><td>-</td></tr><tr><td>plain</td><td>是否为朴素按钮</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>disabled</td><td>是否禁用按钮</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>block</td><td>是否为块级元素</td><td>Boolean</td><td><code>false</code></td></tr><tr><td>icon</td><td>按钮图标，同Icon组件name属性</td><td>String</td><td>-</td></tr><tr><td>loading</td><td>按钮loading状态</td><td>Boolean</td><td><code>false</code></td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>click</td><td>点击按钮时触发</td><td>event: MouseEvent</td></tr></tbody></table>',36),u={expose:[],setup:n=>(n,u)=>(o(),t("div",e,[d]))};export default u;
|
