【问题标题】：Is there a trick for SMUI dialog to be shown on demand only?仅按需显示 SMUI 对话框是否有技巧？
【发布时间】：2022-11-02 01:19:50
【问题描述】：

喜欢演示页面https://sveltematerialui.com/demo/dialog/ 上的对话框。如果我将示例对话框的代码放在基于 TS+rollup 的裸项目的“App.svelte”中，那么它会同时显示对话框内容（尽管不应因为绑定的“打开”变量默认为 false）和对话框调用按钮。

App.svelte

<Dialog
  bind:open
  aria-labelledby="simple-title"
  aria-describedby="simple-content"
  target="mumu"
>
  <!-- Title cannot contain leading whitespace due to mdc-typography-baseline-top() -->
  <Title id="simple-title">Dialog Title</Title>
  <Content id="simple-content">Super awesome dialog body text?</Content>
  <Actions>
    <Button on:click={() => (clicked = 'No')}>
      <Label>No</Label>
    </Button>
    <Button on:click={() => (clicked = 'Yes')}>
      <Label>Yes</Label>
    </Button>
  </Actions>
</Dialog>


<Button on:click={() => (open = true)}>
  <Label>Open Dialog</Label>
</Button>

<pre class="status">Clicked: {clicked}</pre>

<script lang="ts">
  import Dialog, { Title, Content, Actions } from '@smui/dialog';
  import Button, { Label } from '@smui/button';
  import Card from '@smui/card';

  let open = false;
  let clicked = 'Nothing yet.';
</script>

<style>
  :global(.mdc-dialog) {
    border: 1px solid black;
  }

</style>

【问题讨论】：

标签： svelte

【解决方案1】：

用这样的 if 块的苗条版本包围你的 ...：

{#if open}
  <Dialog>
    ...
  </Dialog>
{/if}

【讨论】：