面板 Svelte 组件

面板 Svelte 组件表示侧面板组件。

面板组件

包含以下组件：

面板属性

属性类型默认描述
侧字符串面板侧。可以是left或right
左布尔值快捷属性用于side="left"
右布尔值快捷属性用于side="right"
效果字符串面板效果。可以是cover, reveal或push
覆盖布尔值快捷属性用于effect="cover"
揭示布尔值快捷属性用于effect="reveal"
push布尔值快捷属性用于effect="push"
漂浮布尔值快捷属性用于effect="floating"
visibleBreakpoint数字最小应用宽度（以像素为单位），当左侧面板始终可见时
collapsedBreakpoint数字最小应用宽度（以像素为单位），当左侧面板部分可见（折叠）时
滑动布尔值false如果你想启用用滑动打开/关闭面板的功能，请启用此选项
swipeNoFollow布尔值false对于旧设备/慢设备可能更好的性能的回退选项。如果你启用它，那么在触摸移动时，滑动面板将不会跟随你的手指，它将在滑动左右时自动打开/关闭。
swipeActiveArea数字0触屏屏幕上触发面板滑动的不可见边缘宽度（以像素为单位）
swipeOnlyClose布尔值false此参数允许用滑动关闭（但不能打开）面板。（应该也启用）swipe应该也启用
swipeThreshold数字0如果“触摸距离”小于此值（以像素为单位），面板将不会随着滑动而移动。
背景遮罩布尔值true启用面板背景（背后的深色半透明层）
backdropElHTMLElement
字符串		自定义背景元素的HTML元素或字符串CSS选择器
closeByBackdropClick布尔值true启用/禁用通过点击面板外部关闭面板的能力
resizable布尔值false启用/禁用可调整大小的面板
containerElHTMLElement
字符串		面板挂载元素（默认为应用根元素）
opened布尔值允许打开/关闭面板并设置其初始状态

面板事件

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

打开和关闭面板

你可以控制面板状态，打开和关闭它：

访问面板实例

你可以通过调用.instance()组件的方法来访问初始化的Sheet Modal实例。例如：

<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>
改进此文档
在本页上