赞助商成为赞助商

侧边栏 Svelte 组件

侧边栏 Svelte 组件代表 侧边面板 组件。

侧边栏 组件

包含以下组件：

侧边栏 属性

属性类型默认值描述
side字符串侧边栏 侧边。可以是 left 或 right
left布尔值side="left" 的快捷属性
right布尔值side="right" 的快捷属性
effect字符串侧边栏 效果。可以是 cover、reveal 或 push
cover布尔值effect="cover" 的快捷属性
reveal布尔值effect="reveal" 的快捷属性
push布尔值effect="push" 的快捷属性
floating布尔值effect="floating" 的快捷属性
visibleBreakpoint数字左侧侧边栏始终可见时的最小应用宽度（以像素为单位）
collapsedBreakpoint数字左侧侧边栏部分可见（折叠）时的最小应用宽度（以像素为单位）
swipe布尔值false如果您想启用通过滑动打开/关闭侧边栏的功能，请启用它。
swipeNoFollow布尔值false用于在旧的/速度慢的设备上获得更好性能的备用选项。如果启用它，则滑动侧边栏在触摸移动过程中不会跟随您的手指，它将在向左/向右滑动时自动打开/关闭。
swipeActiveArea数字0触发侧边栏滑动的屏幕边缘不可见宽度（以像素为单位）
swipeOnlyClose布尔值false此参数允许通过滑动关闭（而不是打开）侧边栏。（swipe 也应该启用）
swipeThreshold数字0如果“触摸距离”小于此值（以像素为单位），侧边栏将不会随着滑动而移动。
backdrop布尔值true启用侧边栏背景（侧边栏后面的半透明暗层）
backdropElHTML 元素
字符串		自定义背景元素的 HTML 元素或字符串 CSS 选择器
closeByBackdropClick布尔值true启用/禁用通过单击侧边栏外部关闭侧边栏的功能
resizable布尔值false启用/禁用可调整大小的侧边栏
containerElHTML 元素
字符串		将侧边栏安装到的元素（默认为应用根元素）
opened布尔值允许打开/关闭侧边栏并设置其初始状态

侧边栏 事件

事件描述
panelOpen当侧边栏开始其打开动画时，将触发事件。
panelOpened侧边栏完成其打开动画后，将触发事件。
panelClose当侧边栏开始其关闭动画时，将触发事件。
panelClosed侧边栏完成其关闭动画后，将触发事件。
panelBackdropClick单击侧边栏背景时，将触发事件。
panelSwipe在触摸滑动操作期间，将为滑动侧边栏触发事件。
panelSwipeOpen在用滑动打开它的开始阶段，将触发事件。
panelCollapsedBreakpoint当应用宽度与其 collapsedBreakpoint 相匹配时，它将变为可见/隐藏时，将触发事件。
panelBreakpoint当应用宽度与其 visibleBreakpoint 相匹配时，它将变为可见/隐藏时，将触发事件。

打开和关闭侧边栏

您可以控制侧边栏状态，打开和关闭它

访问侧边栏实例

您可以通过调用 .instance() 组件的方法来访问已初始化的侧边栏实例。例如

<Panel bind:this={component}>...</Panel>

<script>
  let component;

  // to get instance in some method
  component.instance()
</script>

示例

panel.svelte
<script>
  import { Navbar, Page, Block, Button, Panel, Link } from 'framework7-svelte';
</script>

<Page id="panel-page">
  <Navbar title="Panel / Side panels" />
  <Panel left cover containerEl="#panel-page" id="panel-nested">
    <Page>
      <Block strongIos outlineIos>
        <p>This is page-nested Panel.</p>
        <p>
          <Link panelClose>Close me</Link>
        </p>
      </Block>
    </Page>
  </Panel>
  <Block strongIos outlineIos>
    <p>
      Framework7 comes with 2 panels (on left and on right), both are optional. You can put
      absolutely anything inside: data lists, forms, custom content, and even other isolated app
      view (like in right panel now) with its own dynamic navbar.
    </p>
  </Block>
  <Block strongIos outlineIos>
    <p class="grid grid-cols-2 grid-gap">
      <Button raised fill panelOpen="left">Open left panel</Button>
      <Button raised fill panelOpen="right">Open right panel</Button>
    </p>
    <p>
      <Button raised fill panelOpen="#panel-nested">Open nested panel</Button>
    </p>
  </Block>
</Page>
改进此文档
在此页面上