按钮 Svelte 组件

按钮 Svelte 组件代表 Framework7 的按钮元素。

按钮组件

包含以下组件

Button - 单个按钮

按钮属性

按钮组件几乎拥有与链接组件相同的属性，但还有一些特定于按钮的属性。

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

按钮事件

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

示例

buttons.svelte

<script>
  import {
    Page,
    Navbar,
    BlockTitle,
    Block,
    Button,
  } from 'framework7-svelte';

  let isLoading1 = false;
  let isLoading2 = false;

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

  const load2 = () => {
    if (isLoading2) return;
    isLoading2 = true;
    setTimeout(() => {
      isLoading2 = false;
    }, 4000);
  };
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="Buttons" />

  <BlockTitle>Usual Buttons</BlockTitle>
  <Block strong outlineIos>
    <div class="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 class="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 class="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 class="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 class="grid grid-cols-3 grid-gap">
      <Button raised>Button</Button>
      <Button raised fill>Fill</Button>
      <Button raised outline>Outline</Button>
    </p>
    <p class="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 class="grid grid-cols-2 grid-gap">
      <Button large>Button</Button>
      <Button large fill>Fill</Button>
    </p>
    <p class="grid grid-cols-2 grid-gap">
      <Button large raised>Raised</Button>
      <Button large raised fill>Raised Fill</Button>
    </p>
    <p class="grid grid-cols-2 grid-gap">
      <Button large round>Round</Button>
      <Button large round fill>Round Fill</Button>
    </p>
  </Block>

  <BlockTitle>Small Buttons</BlockTitle>
  <Block strong outlineIos>
    <p class="grid grid-cols-3 grid-gap">
      <Button small>Button</Button>
      <Button small outline>Outline</Button>
      <Button small fill>Fill</Button>
    </p>
    <p class="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 class="grid grid-cols-3 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 class="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 class="grid grid-cols-3 grid-gap">
      <Button color="red">Red</Button>
      <Button color="green">Green</Button>
      <Button color="blue">Blue</Button>
    </p>
    <p class="grid grid-cols-3 grid-gap">
      <Button color="pink">Pink</Button>
      <Button color="yellow">Yellow</Button>
      <Button color="orange">Orange</Button>
    </p>
    <p class="grid grid-cols-3 grid-gap">
      <Button color="black">Black</Button>
      <Button color="white">White</Button>
    </p>
  </Block>
</Page>

改进此文档

在此页面上

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