- 开始使用
- Svelte 组件
按钮Svelte组件
按钮Svelte组件代表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"则不会添加hreftag |
| 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.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>
