Halfmoon用法教程:如何自定义明暗模式网站UI

2021年11月30日02:32:34 发表评论 832 次浏览
Halfmoon用法教程:如何自定义明暗模式网站UI
如何自定义明暗模式网站UI

虽然大多数 UI 库和框架都带有一些预定义的样式和组件,但在定制方面却缺少一些。这通常是因为它们将样式、设计决策和模式强加给了开发人员。如果你希望能够快速重新定义默认提供的样式、设计决策和模式,那么动态定制很重要。

在本Halfmoon用法教程中,我们将向你介绍 Halfmoon 并演示如何使用这个多功能框架构建可定制的动态用户界面。

如何使用Halfmoon?为了展示 Halfmoon 的实际效果,我们将构建一个简单的表单,其中包含 Halfmoon 预定义的用于明暗模式的默认样式。然后,我们将自定义 UI 以包含我们的自定义样式和设计决策。

我们的示例项目将是一个没有任何前端框架的静态网页,除了 Halfmoon 框架。

什么是Halfmoon?

Halfmoon 是用于构建网站用户界面的前端框架。其突出的功能之一是内置的暗模式,可让你轻松创建可切换的主题。该框架在暗模式下为每个元素提供了一组不同的样式。

Halfmoon 带有许多预先设计好的、响应式的、移动优先的组件,这些组件拥有像 Bootstrap 这样的明确 UI 套件。尽管如此,它仍然可以轻松定制,因为该框架完全使用CSS 变量(也称为 CSS 自定义属性)构建。Halfmoon 中有近 1,500 个 CSS 变量提供自定义功能。这意味着几乎所有内容都可以通过覆盖 CSS 文件中的属性进行自定义,从而非常容易为你的网站或产品重新设置Halfmoon主题。

当父元素的class属性包含.dark-mode类名时,暗模式特性将应用于每个子元素。Halfmoon实现并提供了在Halfmoon对象上的toggleDarkMode接口来触发从亮模式到暗模式的转换。这个内置函数halfmoon.toggleDarkMode()为将.dark-mode类添加到父元素提供了一个简洁、简单的工作流。

Halfmoon 可用于创建几乎任何类型的网站。除了暗模式功能外,Halfmoon 还提供高度标准化的组件,这些组件在不同的管理面板、仪表板、导航栏和下拉菜单中快速且可重用。最重要的是,这些组件是可定制的。

使用 Halfmoon 构建用户界面

如何自定义明暗模式网站UI?让我们首先在文件夹中创建文件,为我们的演示项目设置开发环境。该index.html文件将作为我们静态网页的入口点。

mkdir halfmoon-project
touch index.html

创建上述文件夹和 HTML 文件后,让我们使用以下样板代码更新index.html文件:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta name="viewport" content="width=device-width" />
    <link rel="icon" href="path/to/fav.png">
    <title>Static Webpage | Halfmoon</title>
  </head>
  <body>
  </body>
</html>

现在我们有了入门 HTML 代码,让我们下载 Halfmoon 框架并构建网页的其余部分。

导航到Halfmoon 官方网站上的下载页面。对于本教程,我们将下载现成的编译代码。

这是一个压缩文件夹,因此你需要解压缩它。解压缩后,仅将我们将在项目中使用的文件复制并粘贴到项目文件夹中:./css/halfmoon-variables.css./js/halfmoon.js. 在项目文件夹中创建CSS和JS文件夹,并将./css/halfmoon-variables.css./js/halfmoon.js文件分别粘贴到其中。

如何使用Halfmoon?现在让我们通过链接Halfmoon提供的样式和逻辑文件来更新index.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>Static Webpage | Halfmoon</title>
    <link href="css/halfmoon-variables.css" rel="stylesheet" />
  </head>
  <body>
    <script src="js/halfmoon.js"></script>
  </body>
</html>

JS文件应该放在<body>标签的末尾;如果没有,有些事情可能不会按预期工作。

例如,使用onclick="…"事件调用js/halfmoon.js文件中的Halfmoon 内置方法之一将不起作用,除非将JS 文件放在<body>标签的末尾。 至于CSS文件,可以放在<head>标签里面,这是大多数项目的惯例。

现在让我们用卡片和表单组件更新index.html文件,并为元素添加我们想要的各种样式的类名。这些类名易于理解。

<!DOCTYPE html>
<html lang="en">
  <head>
    ...
    <title>Static Webpage | Halfmoon</title>
    <link href="css/halfmoon-variables.css" rel="stylesheet" />
  </head>
  <body class="with-custom-webkit-scrollbars with-custom-css-scrollbars" data-dm-shortcut-enabled="true" data-sidebar-shortcut-enabled="true" data-set-preferred-theme-onload="true">
    <div id="home" class="card w-400 mw-full m-0 position-relative">
      <div class="position-absolute top-0 right-0 z-10 p-10">
        <button
          class="btn btn-square"
          type="button"
          onclick={halfmoon.toggleDarkMode()}
        >
          <i class="fa fa-moon-o" aria-hidden="true">🌙</i>
          <span class="sr-only">Toggle dark mode</span>
        </button>
      </div>
      <h2 class="card-title">Please fill up this form</h2>
      <form action="..." method="...">
        <div class="form-group">
          <label for="full-name" class="required">
            Name
          </label>
          <input
            type="text"
            id="full-name"
            class="form-control"
            placeholder="Your full name"
            required="required"
          />
        </div>
        <div class="form-group">
          <label for="profession" class="required">
            Profession
          </label>
          <input
            type="text"
            id="profession"
            class="form-control"
            placeholder="Your profession"
            required="required"
          />
        </div>
        <input class="btn btn-primary btn-block" type="submit" value="Submit" />
        <div class="text-right mt-10">
          <a href="#home">Need help?</a>
        </div>
      </form>
    </div>
    <script src="js/halfmoon.js"></script>
  </body>
</html>

上面的标记代码在卡片中包含一个表单。此表单包含三个输入。其中两个具有text类型,而最后一个是具有submit类型的输入。

然后,在卡片组件内部,我们定义了一个带有onclick事件处理程序的按钮元素。此事件处理程序调用该halfmoon.toggleDarkmode()方法。亮模式和暗模式的 UI 结果如下:

灯光模式:

Halfmoon用法教程:如何自定义明暗模式网站UI

黑暗模式:

Halfmoon用法教程:如何自定义明暗模式网站UI

Halfmoon用法教程:自定义用户界面

如何自定义明暗模式网站UI?为了定制上面的暗模式UI,我们将改变Submit按钮的背景颜色和网页主体的背景图像。我们还将更改Submit按钮的边框颜色和card组件的背景颜色。

这些示例将指导你对 Halfmoon 中的预定义样式进行进一步自定义。

如何使用Halfmoon?让我们在./css/halfmoon-variables.css文件中的 CSS 样式:root范围内定义下面的自定义样式。

...
:root {
  --cm-btn-bg-color: rgb(128, 0, 128);
  --cm-btn-bg-color-hover: rgb(201, 12, 201);
  --body-bg-gif: url("https://media.giphy.com/media/aRZ4vTsHnyW6A/giphy.gif");
  ...
}
...

现在搜索以下 CSS 变量的第一次出现,并将其替换为自定义样式,如下所示:

...
: root {
  ...
  --dm-button-primary-bg-color: var(--cm-btn-bg-color);
  --dm-button-primary-border-color: var(--cm-btn-bg-color);
  --dm-button-primary-bg-color-hover: var(--cm-btn-bg-color-hover);
  ...
}
...

接下来,body当我们处于黑暗模式时,让我们为元素定义一个新背景。当处于暗模式时,该body元素具有类名.dark-mode

让我们在 CSS 文件中查找这个类名并使用我们的自定义background-image更新它:

...
.dark-mode {
  ...
  background-image: var(--body-bg-gif);
  ...
}
...

上面的样式为body元素添加了一张 GIF 图片作为背景图片。

我们将进行的最后一次定制将在卡片组件上进行。我们将直接更新background-color而不定义自定义样式变量。在暗模式下,卡片组件的类名是 .dark-mode .card

让我们更新类,如下所示:

...
:root {
  ...
  --dm-card-bg-color: rgb(43, 36, 43);
}
...

.dark-mode .card {
  ...
  background-color: var(--dm-card-bg-color);
  ...
}

一旦我们使用这些自定义样式成功更新了我们的 CSS 文件,灯光模式的 UI 将保持不变。也就是说,我们已经自定义了我们的黑暗模式,它看起来肯定会有所不同,如下所示:

黑暗模式:

Halfmoon用法教程:如何自定义明暗模式网站UI

Halfmoon用法教程结论

如何使用Halfmoon?在本教程中,我们探索了 Halfmoon 框架,演示了一些用例,并演练了在你的网页开发中快速下载和包含 Halfmoon 的步骤。

我们还进行了更深入的研究,并展示了 hpw 可以使用我们自己定义的自定义样式来覆盖预定义的样式。我们专注于覆盖暗模式样式,但你也可以扩展从本教程中获得的知识以覆盖亮模式中的样式。

根据经验,为浅色模式定义的样式以--lm前缀开头,而为深色模式定义的样式以--dm前缀开头。可以为浅色和深色模式自定义许多样式,这为你的网页打开了一个可能的自定义世界。

你可以在GitHub上找到本教程中使用的完整代码。

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: