Button React 组件

Button React 组件表示 Framework7 的 Button 元素。

Button 组件

包含以下组件

Button - 单个按钮

Button 属性

Button 组件拥有与 Link 组件相同的属性，但增加了少许按钮特有属性

属性	类型	默认值	说明
<Button> property
type	字符串		如果它是 `submit`、`button` 或 `reset` 中的一个，则会作为 `<button>` 元素渲染并具有相同的 `type` 属性。
tabLink	字符串布尔值		启用选项卡链接并指定目标选项卡的 CSS 选择器（如果指定为字符串）。
tabLinkActive	布尔值	false	使此选项卡链接处于活动状态。
active	布尔值	false	在分段控件中使用时使该按钮处于活动状态。必须用在 `tab-link-active` 代替
text	字符串		按钮文本标签
tooltip	字符串		按钮工具提示在按钮悬停/按下时显示的文本
tooltipTrigger	字符串	hover	定义如何触发（打开）工具提示。可以是 `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 主题使按钮元素颜色变得饱满
tonal	布尔值	false	使按钮带有色调样式
tonalIos	布尔值	false	仅对 iOS 主题使按钮带有色调样式
tonalMd	布尔值	false	仅对 MD 主题使按钮带有色调样式
raised	布尔值	false	使按钮浮起
raisedIos	布尔值	false	仅在 iOS 主题中使按钮浮起
raisedMd	布尔值	false	仅在 MD 主题中使按钮浮起
outline	布尔值	false	使按钮轮廓化
outlineIos	布尔值	false	仅在 iOS 主题中使按钮轮廓化
outlineMd	布尔值	false	仅在 MD 主题中使按钮轮廓化
<Button> 相关属性
preloader	布尔值	false	使按钮拥有预加载器
loading	布尔值	false	控制按钮的状态，以显示/隐藏预加载器以及隐藏/显示按钮文本（将按钮切换到加载状态）
preloaderColor	字符串		按钮的预加载器颜色
preloaderSize	number 字符串		按钮的预加载器大小
<Button> 相关属性
iconSize	字符串 number		图标大小，单位为 px
iconColor	字符串		图标颜色，是默认颜色之一
icon	字符串		自定义图标类
iconF7	字符串		F7 图标字体图标的名称
iconMaterial	字符串		Material 图标字体图标的名称
iconIos	字符串		如果使用 iOS 主题，则要使用的图标。它由冒号分隔的图标族和图标名称组成，例如 `f7:house`
iconMd	字符串		如果使用 MD 主题，则要使用的图标。它由冒号分隔的图标族和图标名称组成，例如 `material:home`
<Button> 导航/路由相关属性
href	字符串布尔值	#	要加载页面的 URL。布尔值 `href="false"` 的情况下，它不会添加 `href` 标记
target	字符串		链接目标属性的值，例如 `_blank`、`_self` 等
视图	字符串		用于加载页面的视图的 CSS 选择器。或使用 `current` 在当前视图中加载。
外部	布尔值		启用该选项以绕过 Framework7 的链接点击处理程序
后退	布尔值		启用后退导航链接
在中打开	字符串		允许将页面路由打开为模态或面板。可以为 `popup`、`loginScreen`、`sheet`、`popover` 或 `panel`
强制	布尔值		强制加载页面并忽略历史记录中的前一页（与 `back` 属性一起使用）
重新加载当前页面	布尔值		重新加载新页面，而不是当前活动的页面
重新加载上一页	布尔值		用路由中的新页面替换历史记录中的前一页
全部重新加载	布尔值		加载新页面，并从历史记录和 DOM 中删除所有前一页
重新加载详细信息	布尔值		在主-详细视图中重新加载详细页面
动画	布尔值		禁用页面动画
过渡	字符串		自定义页面过渡的名称
忽略缓存	布尔值		忽略缓存
路由选项卡 ID	字符串		可路由选项卡 ID
路由属性	对象		将传递给目标路由组件的其他属性的对象
阻止路由器	布尔值	false	如果设置，Framework7 路由器将不会处理它
与
面板打开	字符串布尔值		点击时要打开的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧面板，则可为 `left` 或 `right`。
面板关闭	字符串布尔值		点击时关闭面板
面板切换	字符串布尔值		点击时要切换的面板的 CSS 选择器。如果 DOM 中只有左侧或右侧面板，则可为 `left` 或 `right`。
操作打开	字符串布尔值		点击时要打开的操作表的 CSS 选择器
操作关闭	字符串布尔值		点击时要关闭的操作表的 CSS 选择器。或用于关闭当前打开的操作表的布尔属性
弹出打开	字符串布尔值		点击时要打开的弹出的 CSS 选择器
弹出关闭	字符串布尔值		点击时要关闭的弹出的 CSS 选择器。或用于关闭当前打开的弹出的布尔属性
浮层打开	字符串布尔值		点击时要打开的浮层的 CSS 选择器
浮层关闭	字符串布尔值		点击时要关闭的浮层的 CSS 选择器。或用于关闭当前打开的浮层的布尔属性
表单打开	字符串布尔值		点击时要打开的表单模态的 CSS 选择器
表单关闭	字符串布尔值		点击时要关闭的表单模态的 CSS 选择器。或用于关闭当前打开的表单模态的布尔属性
登录屏幕打开	字符串布尔值		点击时要打开的登录屏幕的 CSS 选择器
登录屏幕关闭	字符串布尔值		点击时要关闭的登录屏幕的 CSS 选择器。或用于关闭当前打开的登录屏幕的布尔属性
可排序启用	字符串布尔值		点击时要启用的可排序列表的 CSS 选择器
可排序禁用	字符串布尔值		点击时要禁用的可排序列表的 CSS 选择器。或用于关闭当前打开的可排序列表的布尔属性
可排序切换	字符串布尔值		可单击时要切换的可排序列表的 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>
  );
};

改善此文档

在此页面

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