后端开发教程 - Java、Spring Boot 实战 - msg200.com
slack-clone-ui
一款美观且响应迅速的热门协作软件 Slack 的克隆版！它实现了 Slack 的大部分 UI 功能。它采用纯 HTML5、CSS3 和 Vanilla JavaScript 编写。
实施细节可在此 dev.to帖子中找到。
演示
要查看其运行情况，请点击此处。
使用纯 HTML5、CSS3 和 JavaScript 构建 Slack UI：CSS 网格和 flexbox 的强大功能
slack-clone-ui
动机
去年十月左右，我偶然看到了这篇关于 Slack 最大规模改版的帖子1。它看起来挺吸引我的，于是我决定自己复制一下这个页面。
使用纯 CSS3 和 HTML5。我还想确保它无论屏幕尺寸如何都能完全响应。
免责声明
我对前端技术并不十分了解，因此并非专家。本文仅供学习参考。欢迎提出评论、建议和建设性批评。
源代码
克隆的完整代码在 github 上。
它也托管在 github 页面上，可以在此处访问。
实施和决策
开始之前，我对 CSS3 和 HTML5 比较熟悉，但对它们grids还是flexboxes有点模糊。我当时就决定要学习这些功能。因此，整个应用程序都是用它们构建的。
container从页面上所有元素的包装器开始：
...
<body>
<div class="container">
...
</div>
...
</body>
我确保它用一列和两行填满屏幕的整个宽度和高度：
...
.container {
height: 100vh;
width: 100vw;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2.375rem 1fr;
}
...
从第 1 行开始header并结束于第 2 行：
...
.header {
grid-row: 1 / 2;
...
}
...
main但是从第 2 行开始直到最后，它还被制作成一个包含（另一个网格布局）和（另一个网格布局）的grid布局：sidebarbody
...
.main {
grid-row: 2 / -1;
display: grid;
grid-template-columns: 16.25rem 2fr;
...
}
.sidebar {
...
grid-column: 1 / 2;
...
display: grid;
grid-template-columns: 4rem minmax(6.25rem, 16.25rem);
}
...
.body {
grid-column: 2 / -1;
...
display: grid;
grid-template-columns: 1.5fr 1fr;
}
...
最左边的部分同样sidebar包含flexboxes整个应用程序的许多其他部分。
为了确保正确的响应能力，值得注意的断点是最大宽度1250px为的屏幕，，，，，，，，，，，，，，，960px918px834px806px724px786px754px600px506px500px495px422px...
真是拗口！！！应该有更好的办法！！！我实在想不出来！请在评论区帮我解答。
所有样式和标记都产生了以下产物：
这次旅程的一大亮点是，我们用已经弃用的 JavaScript 实现了类似 Slack 的富文本编辑器，并进行了样式设计execCommand。这既有趣又令人兴奋。
一些 JavaScript 处理了富文本编辑器和一些用于显示和隐藏网格某些部分的切换。
...
// sidebar
if (user) {
user.addEventListener("click", () => {
if (sideBarWrapper) {
sideBarWrapper.classList.add("sidebar-wrapper-display");
}
if (sideBar) {
sideBar.classList.add("user-sidebar-display");
}
});
}
if (closeSideBar) {
closeSideBar.addEventListener("click", () => {
sideBar.classList.remove("sidebar-display");
sideBarWrapper.classList.remove("sidebar-wrapper-display");
});
}
...
一切都很原始！对于富文本编辑器来说，这本MDN 指南2是我的救星。
这就是我想说的。请大家看看并提出建议。
结尾
喜欢这篇文章吗？我是一名软件工程师和技术作家，正在积极寻找新的机会，尤其是在网络安全、金融、医疗保健和教育等领域。如果您认为我的专业知识符合您团队的需求，欢迎随时联系我们！您可以在 LinkedIn：LinkedIn和 Twitter：Twitter上找到我。
如果您发现这篇文章有价值，请考虑与您的网络分享以帮助传播知识！
-
Slack 公布了迄今为止最大的一次重新设计- 作者：Tom Warren ↩