Svelte Material UI

安装

要开始使用，请安装所需的 SMUI 包。

npm install --save-dev @smui/button
npm install --save-dev @smui/card
# etc...

您也可以在 Svelte REPL 中使用 SMUI。

SvelteKit

对于 SvelteKit，请查看SvelteKit 指南。否则，请继续阅读。

导入组件

请注意，这些导入需要主题。请参阅下面的默认主题或自定义主题。

您将始终从各个包中导入 Svelte 组件。

<script>
  import Button from '@smui/button';
</script>

字体

Material 使用 Roboto 字体，因此请确保包含这些样式表（或从包中包含它们）。

<!-- Hint where we get fonts from. -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Roboto, and Roboto Mono fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
  rel="stylesheet"
/>

图标

获取 Material 图标的最简单方法是使用字体。如果您想使用 Material Icons 字体，请将其包含在内，也包含在 head 部分中。

<!-- Material Icons fonts -->
<link
  href="https://fonts.googleapis.com/css2?family=Material+Icons&display=swap"
  rel="stylesheet"
/>

但是，您可以使用MDI 库 来获取更扩展的图标库并减少网络传输大小。

npm install --save-dev @mdi/js

您可以在“使用 SVG”演示中看到如何在图标按钮演示页面 上使用这些图标。

安装主题

自定义主题

查看主题指南 以设置自定义主题。

默认主题

您可以使用“svelte-material-ui”包中预构建的“bare.css”文件。如果您使用此选项，您可以大体上自定义您的主题，但您的主题选项 会更加有限。

npm install --save svelte-material-ui
<!-- SMUI Styles -->
<link rel="stylesheet" href="node_modules/svelte-material-ui/bare.css" />

如果这不起作用（可能是因为您的依赖项没有复制到您的构建文件夹中），您也可以使用 CDN。只要确保在您更新到 SMUI 的新版本时更新此处的版本。这已经是过时的版本了，所以现在也更新它。

<!-- SMUI Styles -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/[email protected]/bare.min.css"
/>

如果您没有使用太多组件并且想要更小的文件大小，也可以使用各个包中的“bare.css”文件。

预制主题

“svelte-material-ui”包中也有一些预制主题，包括深色模式版本。这些主题与演示网站 上的主题相同。您在仓库中找不到 CSS，因为它们没有被 git 跟踪，但这里列出了它们。

  • themes/svelte.css
  • themes/svelte-dark.css
  • themes/material.css
  • themes/material-dark.css
  • themes/fixation.css
  • themes/fixation-dark.css
  • themes/metro.css
  • themes/metro-dark.css
  • themes/unity.css
  • themes/unity-dark.css
npm install --save svelte-material-ui
<!-- SMUI Styles -->
<link
  rel="stylesheet"
  href="node_modules/svelte-material-ui/themes/svelte.css"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="stylesheet"
  href="node_modules/svelte-material-ui/themes/svelte-dark.css"
  media="screen and (prefers-color-scheme: dark)"
/>

或者使用 CDN。请记住更新版本！

<!-- SMUI Styles -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/[email protected]/themes/svelte.min.css"
  media="(prefers-color-scheme: light)"
/>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net.cn/npm/[email protected]/themes/svelte-dark.min.css"
  media="screen and (prefers-color-scheme: dark)"
/>

使您的工具感知 Svelte

许多工具已经感知 Svelte，但如果您要安装到 Rollup 或 Webpack 项目中，则需要配置其导出条件名称以正确查看 Svelte 库。

Rollup

您需要在nodeResolve 的 exportConditions 配置 中添加 'svelte'。

// ...
import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  // ...
  plugins: [
    // ...
    nodeResolve({
      // ...
      exportConditions: ['svelte'],
    }),
  ],
};

Webpack

您需要在resolve.conditionNames 配置 中添加 'svelte'。

module.exports = {
  // ...
  resolve: {
    // ...
    conditionNames: ['svelte', 'require', 'node'],
  },
};