按钮React组件

按钮React组件代表了Framework7的按钮元素。

按钮组件

包含以下组件：

Button- 单个按钮

按钮属性

按钮组件几乎具有与链接组件相同的属性，但有一些额外的按钮特定属性：

属性	类型	默认	描述
<Button>属性
type	字符串		如果它是`submit`, `button`或`reset`那么它将渲染为`<button>`元素，具有相同的`type`属性
tabLink	字符串布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）
tabLinkActive	布尔值	false	使此选项卡链接处于活动状态
active	布尔值	false	在Segmented中使用时，使此按钮处于活动状态。必须代替`tab-link-active`
text	字符串		按钮文本标签
提示	字符串		按钮提示按钮悬停/按下时显示的文本
提示触发器	字符串	悬停	定义如何触发（打开）提示。可以是`hover`, `click`或`manual`
round	布尔值	false	使按钮圆形
roundIos	布尔值	false	仅适用于iOS主题使按钮圆形
roundMd	布尔值	false	仅适用于MD主题使按钮圆形
large	布尔值	false	使按钮变大
largeIos	布尔值	false	仅适用于iOS主题使按钮变大
largeMd	布尔值	false	仅适用于MD主题使按钮变大
small	布尔值	false	使按钮变小
smallIos	布尔值	false	仅适用于iOS主题使按钮变小
smallMd	布尔值	false	仅适用于MD主题使按钮变小
fill	布尔值	false	使按钮填充颜色
fillIos	布尔值	false	仅适用于iOS主题使按钮填充颜色
fillMd	布尔值	false	仅适用于MD主题使按钮填充颜色
语气	布尔值	false	使按钮为语气样式
语气Ios	布尔值	false	仅适用于iOS主题使按钮为语气样式
语气Md	布尔值	false	仅适用于MD主题使按钮为语气样式
raised	布尔值	false	使按钮提升
raisedIos	布尔值	false	仅适用于iOS主题使按钮提升
raisedMd	布尔值	false	仅适用于MD主题使按钮提升
outline	布尔值	false	使按钮轮廓
轮廓Ios	布尔值	false	仅适用于iOS主题使按钮轮廓
轮廓Md	布尔值	false	仅适用于MD主题使按钮轮廓
<Button>与加载器相关的属性
加载器	布尔值	false	使按钮具有加载器
加载中	布尔值	false	控制按钮状态以显示/隐藏加载器并隐藏/显示按钮文本（将按钮切换到加载状态）
加载器颜色	字符串		按钮的加载器颜色
加载器大小	数字字符串		按钮的加载器大小
<Button>与图标相关的属性
iconSize	字符串数字		图标大小（像素）
iconColor	字符串		图标颜色。可以是默认颜色之一
icon	字符串		自定义图标类
iconF7	字符串		F7 图标字体图标的名称
iconMaterial	字符串		Material 图标字体图标的名称
iconIos	字符串		在使用 iOS 主题时使用的图标。由图标系列和图标名称组成，例如`f7:house`
iconMd	字符串		在使用 MD 主题时使用的图标。由图标系列和图标名称组成，例如`material:home`
<Button>与导航/路由相关的属性
href	字符串布尔值	#	要加载的页面的 URL。如果是布尔值`href="false"`则不会添加`href`tag
target	字符串		链接目标属性值，例如`_blank`, `_self`，等等。
view	字符串		要加载页面的视图的 CSS 选择器。或者`current`在当前视图中加载。
external	布尔值		启用以绕过 Framework7 的链接点击处理程序
back	布尔值		启用返回导航链接
openIn	字符串		允许将页面路由作为模态或面板打开。可以是`popup`, `loginScreen`, `sheet`, `popover`或`panel`
force	布尔值		强制页面加载并忽略历史记录中的先前页面（与`back`属性一起使用）
reloadCurrent	布尔值		重新加载新页面而不是当前活动的页面
reloadPrevious	布尔值		用路由中的新页面替换历史记录中的先前页面
reloadAll	布尔值		加载新页面并从历史记录和 DOM 中删除所有先前页面
reloadDetail	布尔值		在主/详细信息视图中重新加载详细信息页面
animate	布尔值		禁用页面动画
transition	字符串		自定义页面过渡的名称custom page transition
ignoreCache	布尔值		忽略缓存
routeTabId	字符串		可路由选项卡 ID
routeProps	对象		将传递给目标路由组件的附加属性对象
preventRouter	布尔值	false	如果设置，则不会被 Framework7 路由器处理
<Button>与操作相关的属性
panelOpen	字符串布尔值		点击时打开的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
panelClose	字符串布尔值		点击时关闭面板
panelToggle	字符串布尔值		点击时切换的面板的 CSS 选择器。或者可以是`left`或`right`如果 DOM 中只有左侧或右侧面板。
actionsOpen	字符串布尔值		点击时打开的操作表的 CSS 选择器
actionsClose	字符串布尔值		点击时关闭的操作表的 CSS 选择器。或者为关闭当前打开的操作表的布尔属性
popupOpen	字符串布尔值		点击时打开的弹出的 CSS 选择器
popupClose	字符串布尔值		点击时关闭的弹出的 CSS 选择器。或者为关闭当前打开的弹出的布尔属性
popoverOpen	字符串布尔值		点击时打开的弹出窗口的 CSS 选择器
popoverClose	字符串布尔值		点击时关闭的弹出窗口的 CSS 选择器。或者为关闭当前打开的弹出窗口的布尔属性
sheetOpen	字符串布尔值		点击时打开的表单模态的 CSS 选择器
sheetClose	字符串布尔值		点击时关闭的表单模态的 CSS 选择器。或者为关闭当前打开的表单模态的布尔属性
loginScreenOpen	字符串布尔值		点击时打开的登录屏幕的 CSS 选择器
loginScreenClose	字符串布尔值		点击时关闭的登录屏幕的 CSS 选择器。或者为关闭当前打开的登录屏幕的布尔属性
sortableEnable	字符串布尔值		点击时启用的可排序列表的 CSS 选择器
sortableDisable	字符串布尔值		点击时禁用的可排序列表的 CSS 选择器。或者为关闭当前打开的可排序列表的布尔属性
sortableToggle	字符串布尔值		点击时切换的可排序列表的 CSS 选择器。或者为切换当前打开/关闭的可排序列表的布尔属性
searchbarEnable	字符串布尔值		点击时启用的可展开搜索栏的 CSS 选择器。或者为启用第一个找到的搜索栏的布尔属性
searchbarDisable	字符串布尔值		点击时禁用的可展开搜索栏的 CSS 选择器。或者为禁用第一个找到的搜索栏的布尔属性
searchbarToggle	字符串布尔值		点击时切换的可展开搜索栏的 CSS 选择器。或者为切换第一个找到的搜索栏的布尔属性
searchbarClear	字符串布尔值		点击时清除的可展开搜索栏的 CSS 选择器。或者为清除第一个找到的搜索栏的布尔属性
cardOpen	字符串布尔值		点击时打开的可展开卡片的 CSS 选择器。或者为打开第一个找到的可展开卡片的布尔值
cardClose	字符串布尔值		点击时关闭的可展开卡片的 CSS 选择器。或者为关闭当前打开的可展开卡片的布尔属性
cardPreventOpen	布尔值		具有此属性的元素点击不会打开其父可展开卡片

按钮事件

事件	描述
<Button>事件
click	点击按钮后触发事件

示例

buttons.jsx

import React, { useState } from 'react';
import { Navbar, Page, BlockTitle, Block, Button } from 'framework7-react';

export default () => {
  const [isLoading1, setIsLoading1] = useState(false);
  const [isLoading2, setIsLoading2] = useState(false);

  const load1 = () => {
    if (isLoading1) return;
    setIsLoading1(true);
    setTimeout(() => {
      setIsLoading1(false);
    }, 4000);
  };
  const load2 = () => {
    if (isLoading2) return;
    setIsLoading2(true);
    setTimeout(() => {
      setIsLoading2(false);
    }, 4000);
  };

  return (
    <Page>
      <Navbar title="Buttons" />

      <BlockTitle>Usual Buttons</BlockTitle>
      <Block strong outlineIos>
        <div className="grid grid-cols-3 grid-gap">
          <Button>Button</Button>
          <Button>Button</Button>
          <Button round>Round</Button>
        </div>
      </Block>

      <BlockTitle>Tonal Buttons</BlockTitle>
      <Block strong outlineIos>
        <div className="grid grid-cols-3 grid-gap">
          <Button tonal>Button</Button>
          <Button tonal>Button</Button>
          <Button tonal round>
            Round
          </Button>
        </div>
      </Block>

      <BlockTitle>Fill Buttons</BlockTitle>
      <Block strong outlineIos>
        <div className="grid grid-cols-3 grid-gap">
          <Button fill>Button</Button>
          <Button fill>Button</Button>
          <Button fill round>
            Round
          </Button>
        </div>
      </Block>

      <BlockTitle>Outline Buttons</BlockTitle>
      <Block strong outlineIos>
        <div className="grid grid-cols-3 grid-gap">
          <Button outline>Button</Button>
          <Button outline>Button</Button>
          <Button outline round>
            Round
          </Button>
        </div>
      </Block>

      <BlockTitle>Raised Buttons</BlockTitle>
      <Block strong outlineIos>
        <p className="grid grid-cols-3 grid-gap">
          <Button raised>Button</Button>
          <Button raised fill>
            Fill
          </Button>
          <Button raised outline>
            Outline
          </Button>
        </p>
        <p className="grid grid-cols-3 grid-gap">
          <Button raised round>
            Round
          </Button>
          <Button raised fill round>
            Fill
          </Button>
          <Button raised outline round>
            Outline
          </Button>
        </p>
      </Block>

      <BlockTitle>Large Buttons</BlockTitle>
      <Block strong outlineIos>
        <p className="grid grid-cols-2 grid-gap">
          <Button large>Button</Button>
          <Button large fill>
            Fill
          </Button>
        </p>
        <p className="grid grid-cols-2 grid-gap">
          <Button large raised>
            Raised
          </Button>
          <Button large raised fill>
            Raised Fill
          </Button>
        </p>
      </Block>

      <BlockTitle>Small Buttons</BlockTitle>
      <Block strong outlineIos>
        <p className="grid grid-cols-3 grid-gap">
          <Button small>Button</Button>
          <Button small outline>
            Outline
          </Button>
          <Button small fill>
            Fill
          </Button>
        </p>
        <p className="grid grid-cols-3 grid-gap">
          <Button small round>
            Button
          </Button>
          <Button small outline round>
            Outline
          </Button>
          <Button small fill round>
            Fill
          </Button>
        </p>
      </Block>

      <BlockTitle>Preloader Buttons</BlockTitle>
      <Block strong outlineIos>
        <p className="grid grid-cols-2 grid-gap">
          <Button preloader loading={isLoading1} onClick={load1} large>
            Load
          </Button>
          <Button preloader loading={isLoading2} onClick={load2} large fill>
            Load
          </Button>
        </p>
      </Block>

      <BlockTitle>Color Buttons</BlockTitle>
      <Block strong outlineIos>
        <div className="grid grid-cols-3 grid-gap">
          <Button color="red">Red</Button>
          <Button color="green">Green</Button>
          <Button color="blue">Blue</Button>
        </div>
      </Block>

      <BlockTitle>Color Fill Buttons</BlockTitle>
      <Block strong outlineIos>
        <p className="grid grid-cols-3 grid-gap">
          <Button color="red">Red</Button>
          <Button color="green">Green</Button>
          <Button color="blue">Blue</Button>
        </p>
        <p className="grid grid-cols-3 grid-gap">
          <Button color="pink">Pink</Button>
          <Button color="yellow">Yellow</Button>
          <Button color="orange">Orange</Button>
        </p>
        <p className="grid grid-cols-3 grid-gap">
          <Button color="black">Black</Button>
          <Button color="white">White</Button>
        </p>
      </Block>
    </Page>
  );
};

改进此文档

在本页上

按钮组件
按钮属性
按钮事件
示例