在 Svelte REPL 中使用 SMUI

查看一个 示例 REPL.

SMUI 组件提供“bare.css”文件供在 REPL 中使用。在 <svelte:head> 部分，从 UNPKG 等 CDN 加载字体、Material 排版和 SMUI 的 CSS 文件。

<svelte:head>
  <!-- Fonts -->
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
  />
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700"
  />

  <!-- Material Typography -->
  <link
    rel="stylesheet"
    href="https://unpkg.com/@material/[email protected]/dist/mdc.typography.css"
  />

  <!-- SMUI -->
  <link rel="stylesheet" href="https://unpkg.com/svelte-material-ui/bare.css" />
</svelte:head>

现在从 <script> 部分加载组件，就可以使用它们了。

<Button on:click={() => alert('See, I told you.')}>This is a button!</Button>

<Card style="width: 360px; margin: 2em auto;">
  <Content class="mdc-typography--body2">This is a card!</Content>
</Card>

<script>
  import Button from '@smui/button';
  import Card, { Content } from '@smui/card';
</script>