文章图片
在本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="https://www.lsbin.com/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="https://www.lsbin.com/css/halfmoon-variables.css" rel="stylesheet" />
<
/head>
<
body>
<
script src="https://www.lsbin.com/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="https://www.lsbin.com/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="https://www.lsbin.com/Submit" />
<
div class="text-right mt-10">
<
a href="https://www.lsbin.com/#home">Need help?<
/a>
<
/div>
<
/form>
<
/div>
<
script src="https://www.lsbin.com/js/halfmoon.js"><
/script>
<
/body>
<
/html>
上面的标记代码在卡片中包含一个表单。此表单包含三个输入。其中两个具有
text
类型,而最后一个是具有submit
类型的输入。然后,在卡片组件内部,我们定义了一个带有
onclick
事件处理程序的按钮元素。此事件处理程序调用该halfmoon.toggleDarkmode()
方法。亮模式和暗模式的 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用法教程结论如何使用Halfmoon?在本教程中,我们探索了 Halfmoon 框架,演示了一些用例,并演练了在你的网页开发中快速下载和包含 Halfmoon 的步骤。
我们还进行了更深入的研究,并展示了 hpw 可以使用我们自己定义的自定义样式来覆盖预定义的样式。我们专注于覆盖暗模式样式,但你也可以扩展从本教程中获得的知识以覆盖亮模式中的样式。
【Halfmoon用法教程(如何自定义明暗模式网站UI)】根据经验,为浅色模式定义的样式以
--lm
前缀开头,而为深色模式定义的样式以--dm
前缀开头。可以为浅色和深色模式自定义许多样式,这为你的网页打开了一个可能的自定义世界。你可以在GitHub上找到本教程中使用的完整代码。
推荐阅读
- 如何使用react-native-sound在React Native中播放声音()
- 如何使用Flutter构建2D游戏(分步指南)
- 如何使用Jetpack Compose构建更快的Android应用程序()
- 如何实现双向CSS居中(完整分步指南)
- WordPress最佳Markdown插件合集(哪个最好用())
- 如何使用React创建电子商务网站(分步指南)
- 如何使用Face-api.js在Web上进行人脸检测()
- 如何构建WebRTC视频聊天应用程序(分步指南)
- 安卓数据库 找不到表