因此，我们将自己团队定义的基于组件的设计流程与大家分享，当然其中借鉴了不少优秀设计师的想法。 什么是基于组件的设计？ 实质上，基于组件的设计是将UI分解成更小，命名清晰且更易于管理的组件。...这些组件被分为以下六个部分。 一致性 这六个部分中的第一个要讲的就是一致性，在这里我们定义了项目的核心品牌元素。字体，排版，主要和次要颜色都经过精心指定。之后，这些将在整个项目中使用。 ?...响应目标与客户端事先达成一致，以确保每个组件都是相应设计的。 组合 我们的工作再进一规模，就到了第四部分：组合。组合是包含多个不同组件，它们定义了它内部组件的行为方式。...下面是一个简易的单列布局例子，它只定义了组合的组件间距，标题以及组件内容的循环使用！ ? 布局 第五大部分布局是更抽象的设计原则集合。这里定义了间距，栅格和包装器的元素数量。...通过这样定义，其他设计者可以轻松地进入项目并使用现有的样式规范。 ? 页面 最后一个部分是项目的实际页面。每个页面由各种组合和组件的排列组成。 所有超出预期的东西都是在页面这个层级中定义的。
我目前使用的是 vant-ui 3.1.2 popup 弹出层组件，我想要获取弹出层的高度来计算一些东西，但是使用常规定义 ref dom 的方式总是无法获取，最终找到方案如下： vant-ui 官方文档...closeElements" > const vantPop = ref(null) // 获取 vantPop 的高度
前言 众所周知，当子组件使用setup后，父组件就不能像vue2那样直接就可以访问子组件内的属性和方法。这个时候就需要在子组件内使用defineExpose宏函数来指定想要暴露出去的属性和方法。...这篇文章来讲讲defineExpose宏函数是如何暴露出去这些属性和方法给父组件使用。注：本文中使用的vue版本为3.4.19。...父组件访问子组件的validate方法 在vue3中想要访问子组件需要使用特殊的 ref attribute，在我们这个例子中就是使用。...这样使用后就可以使用child变量访问子组件，其实在这里child变量的值就是一个名为getExposeProxy函数的返回值（后面的文章中会去详细讲解ref attribute是如何访问子组件）。...父组件使用ref访问子组件的validate方法，也就是访问child.value.validate。
在前端开发中经常需要按不同屏幕尺寸来进设计达到PC和移动端响应式。我们一般使用CSS媒体查询来检测视口宽度或高度，然后根据该模式改变设计。 这就是在过去10年中设计Web布局的方式。...第二种情况下(Case 2)也是一样的问题 如果使用容器查询，我们可以通过查询父组件来决定如何显示特定组件来解决这些问题。考虑下图，它展示了我们如何使用容器查询来修复这个问题。...这样的话，如果我们把思路转向组件的父组件呢?换句话说，如果我们查询父组件，并根据父组件的宽度或高度来决定组件应该是什么样子的呢?我们来看下容器查询的概念。 什么是容器查询 首先，让我定义容器。...不仅如此，我们还可能有一个组件的变体，它应该只显示在特定的上下文中。例如，事件列表页面。在这种情况下，清楚在何处使用此变体是很重要的。 问题是，如何告诉设计师应该在哪里使用这些组件。...与开发人员沟通 良好的沟通是项目成功的重要因素。作为一名设计人员，我们应该提供关于应该在何处使用组件变体的指导。它可以是一个完整的页面设计，也可以是一个显示如何使用每个组件的简单图。
前言 Google 出的 Guava 是 Java 核心增强的库，应用非常广泛。 我平时用的也挺频繁，这次就借助日常使用的 Cache 组件来看看 Google 大牛们是如何设计的。...缓存之所以可以提高性能是因为它的读取效率很高，就像是 CPU 的 L1、L2、L3 缓存一样，级别越高相应的读取速度也会越快。...然后在每次消费时候调用 checkAlert() 方法进行校验，这样就可以达到上文的需求。 我们来设想下 Guava 它是如何实现过期自动清除数据，并且是可以按照 LRU 这样的方式清除的。...事件回调 事件回调其实是一种常见的设计模式，比如之前讲过的 Netty 就使用了这样的设计。 这里采用一个 demo，试下如下功能： Caller 向 Notifier 提问。...那么 Guava 是如何实现的呢？
在使用 :not 选择器之前无法覆盖它。 如果设计有多于一列，它将不起作用，见下图。 关于解决方案 #2，它没有 CSS 特异性问题。 但是，它仅适用于一个列堆栈。...或者，当它垂直堆叠时，这将如何在移动设备上工作？ 很多很多的复杂性。 使用抽象组件 上述问题的一个解决方案是拥有抽象的组件，目的是托管其他组件。...让我们假设一个部分需要从左边算起 24px 的边距，考虑到这些限制： Margin 不能直接用于组件，因为它是一个已经构建的设计系统。 它应该是灵活的，间距可能在 X 页面上，但不在 Y 页面上。...对于大型设计系统，不断为组件添加边距是不可扩展的。这最终将导致令人毛骨悚然的代码。 间隔组件的挑战 现在你已经了解了间隔组件的概念，让我们深入了解使用它们时的一些预期挑战。...以下是我想到的一些问题： 间隔组件如何在父组件中获取其宽度或高度？它将如何在水平和垂直布局中工作？例如：堆栈内的间隔符与添加左侧空间的间隔符。
在使用 :not 选择器之前不可能覆盖它。 万一设计中有不止一列，它将无法正常工作。参见下图。 ? 关于解决方案2，它没有CSS特异性问题。但是，它只能处理一个列栈。...Card组件 Oh，如果我想把所有细节的Card组件间距都写进去的话，最后可能会出现书本上的内容。我就突出一个大概的模式，看看间距应该如何应用。 ? 你能想到此卡片在哪里使用间距吗？参见下图。 ?...使用抽象组件 解决上述问题的一种方法是使用抽象的组件，其目标是托管其他组件，就像Max Stoiber所说的那样，这是将管理边距的责任移到了父元素上，让我们以这种思维方式重新思考以前的用例。 ?...对于大型设计系统，不断向组件添加margin是不可伸缩的。这将最终导致一个令人毛骨悚然的代码。 间隔组件的挑战 现在你了解了间隔组件的概念，让我们深入研究使用它们时遇到的一些挑战。...这是我想到的一些问题： 间隔组件如何在父级内部取其宽度或高度？在水平布局和垂直布局中，它将如何工作？
现在，让我们想象一下，这个盒子里有一张重要的图片，我们关心它的所有细节。 请注意，无论大小如何，图像细节都被保留。...请考虑 注意右边的图片，宽度÷高度的值是 1.02，这不是原来的长宽比（1.33或4：3）。 你可能在想，如何得出4:3这个数值？嗯，这被称为最接近的正常长宽比，有一些工具可以帮助我们找到它。...在进行UI设计时，强烈建议你确切地知道你所使用的图像的宽高比是多少。使用这个网址可以帮我们快速计算。 网址地址：http://lawlesscreation.github......在深入了解原生方式之前，我们先首先解释一下好的老方法。 当一个元素有一个垂直百分比的padding时，它将基于它的父级宽度。请看下图。...另外，图片是绝对定位的，它有它的父元素的全部宽度和高度，有object-fit: cover，用于上传不同大小的图片的情况。请看下面的动图。 请注意，卡片大小的变化和缩略图的长宽比没有受到影响。
在这节课中，我们介绍一下容器查询是如何工作的，如何使用它们，以及语法是什么样子的，并分享一些现实生活中的例子和用例。...简介 在设计一个组件时，我们需要适配不同的变化，并根据CSS类或视口大小来改变它们。这对于我们开发来说不是很理想，会迫使我们根据变化类或视口尺寸来写CSS。...通过容器查询，我们可以简单地编写响应父级或容器宽度的CSS。请看下图： 图片 注意到在媒体查询中，我们是如何根据视口或屏幕宽度来查询一个组件的。在容器查询中，同样的情况发生在父级上。...通过 container-type 属性查询一个组件与最接近的父类的关系，该父类有一个定义的包含物。 我们过去在媒体查询中写CSS的方式，但只是针对组件层面。...容器查询语法 要根据一个组件的父级宽度查询，我们需要使用 container-type 属性。
旧版本的 Context 仅在使用 contextTypes 和 getChildContext API 的类组件中可用。因此它的删除对现在的项目应该只会造成很小的影响。...✓context 的学习主要分为如下三个部分 一、 如何创建 context 二、 顶层组件中如何传递数据 三、 子组件中如何获取数据 一、如何创建 context 我们可以使用 createContext...createContext 执行之后的返回值，就是我们需要的 context。 二、如何传递 context 返回的 context 通常是一系列组件的顶层父组件。...，我们使用刚才创建的 context 作为父级标签，把子组件包起来。...✓value 可以是任何类型，你可以根据自己的项目需要设计合适的数据类型。 三、如何获取 context 中的值 在任意被包裹的子组件中，我们可以使用 use 来获取 context 中的值。
当一个元素的宽度值为auto时，它包含margin、padding和border，不会变得比它的父元素大。...当我们有一个元素应该在它的父元素内部水平和垂直居中时，我们可能会倾向于使用translateX或translateY。 我们可以使用下面方法让具有绝对定位元素居中： 设置的宽度和高度。...在 Chrome 窗口中，滚动条总是显示出来，这是不正确和令人困惑的行为。 通过使用auto关键字，我们可以确保滚动条不会显示，除非内容高度大于它的容器。 根据MDN： 取决于用户代理。...这是一个更经得起时间考验的解决方案。 卡片组件 你可能有一个card组件，其左上角有一个操作，它可能仅用于装饰，也可能是一个有用的操作。不管是什么，你都应该考虑到它是双向的。 ?...模态设计 ? 在进行模态设计时，重要的是要考虑内容高度很大时会发生的情况。
您可以使用 contentAlignment 属性来指定子元素的对齐方式。...默认 您可以使用 verticalArrangement 属性来指定子元素的垂直排列方式，使用 horizontalAlignment 属性来指定子元素的水平对齐方式。...，允许您使用约束关系来定义子元素之间的位置关系。...Card 组件通常用于显示单个元素或组件，并为其添加阴影效果以使其在界面上突出显示。...Card 默认情况下有圆角背景是灰色。 功能和用途： Surface 是一个基本的容器，用于在屏幕上绘制内容。它提供了绘制颜色、形状、边框等的基本功能。
如何自定义一个组件 自定义一个组件无非就是三步： 实现build方法来定义组件的样式和布局； 声明需要传入的相关属性； 实现构造方法 下面是自定义一个名为IconContainer的组件： class...此外，我们也可以使用Expanded组件实现宽度或者高度的自适应。...其他 可以使用SizedBox组件来定义组件的间隔。...Card Card是卡片组件块，内容可以由大多数类型的Widget构成。Card具有圆角和阴影，这让它看起来具有立体感。...图片的圆角，我们可以使用ClipOval组件，也可以使用该例中的CircleAvator组件。 可以使用AspectRatio组件来实现组件固定的宽高比。
使用 :has() 选择器可以访问父元素、子元素，甚至兄弟元素 例如：带有“⭐️”元素的项目会应用灰色背景，而带有选中复选框的项目会应用蓝色背景。...Style Queries 样式查询 容器查询规范 允许查询父容器的样式值。目前在 Chrome 111 中部分实现，可以在其中使用 CSS 自定义属性来应用容器样式。...background: gold; } } nth-of nth-of 是更加高级 nth-child 语法，提供了一个新关键字（“of”），它允许使用现有的 An+B 语法，并在其中搜索更具体的子集...是滚动驱动动画，它允许您根据滚动容器的滚动位置控制动画的播放。...这些函数现在在所有现代浏览器中都是稳定的，并使您能够在Web平台上创建更有机的布局。一个很好的例子是这个径向菜单布局，现在可以使用sin()和cos()函数进行设计和动画。
所以我们不如通过解决某个具体的样式问题，来审视样式代码应该如何编写和组织 下图是一个非常简单的 popup 组件，我们会以它的样式开发过程串起整篇的内容。...父元素依赖 上一节中我们开发完毕的组件通常会在页面上被多处引用，但总存在个别场景需要你对组件稍作修改才得以适配。...从表面上看，这种行为只是将样式（尺寸）从一个组件转移到另一个组件（容器）上，但却从根本上解决了我们上面提到的父元素依赖的困恼。...任何想使用 popup 的其他组件，不用再设法关心 popup 组件的尺寸是如何实现的，它只需要关自己。 进一步从深层次上说，它消灭了依赖。...在编程领域里面唯一不变的就是变化本身，无论在敲键盘之前你面向对象设计的多么准确，对组件拆分的多么恰当，任何业务上的变化都有可能让你所有的设计推倒重来。
这是另一回事，但尽量使用 flex-wrap 来避免意外的布局行为（在我们的例子中，是水平滚动）。 2.间距 我们开发者需要考虑不同的内容长度。这意味着，间距应该添加到组件中，即使它看起来不需要。...防止图像被拉伸或压缩 在无法控制图片高宽比的情况下，如果用户上传的图片与高宽比不符，最好提前考虑并提供解决方案。 在下面的例子中，我们有一个带有照片的卡片组件。它看起来不错。...这种方法可以在变量可能失败的情况下使用。 7.使用固定宽度或高度 破坏布局的常见情况之一是对一个有不同长度内容的元素使用固定的宽度或高度。...在我看到的这个例子中，开发者给二级导航添加了 position: sticky，这样它就可以粘在底部了。 然而，如果浏览器的高度较小，bug 就来了。注意这两个导航是如何重叠的。...对此有不同的解决方案： margin flexbox gap（谨慎使用） padding（可应用于每个子元素的父元素） 增加空的元素，作为间隔。 为了简单起见，我使用 gap。
前言 Jetpack Compose 中的列表组件相对于之前的View方式要简单很多。...UI Card( modifier = Modifier.padding(16.dp).height(30.dp), ) { Text(text)...} } 注意 竖向Grid布局中的子项，也就是上面的GridItem中的根组件的宽度是自动使用父的，设置宽度不会生效。...UI Card( modifier = Modifier.padding(16.dp).height(30.dp), ) { Text(text)...} } 注意 竖向Grid布局中的子项，也就是上面的GridItem中的根组件的高度是自动使用父的，设置高度不会生效。
（双向绑定） 在有些场景中，父组件中嵌套了子组件，我们希望父组件中的变化能够同步更新到子组件，同理，子组件中的变化能够同步更新父组件中。...通常来说，这种在父组件和子组件之间的数据绑定 也叫做 双向绑定。 同时，我们也注意到在Blazor中事件回调（委托）的统一类型为：EventCallback。...我们在子组件中使用的是InvokeAsync()方法也说明它是线程安全的。 实现效果： 在一个更真实常见的场景中，我们可能希望实现数据实施修改的联动更新，类似于下面的例子。...我们可以在多层嵌套的组建中绑定组件参数，但是我们必须遵循这类单向数据绑定的流程： 更改通知是逐级向上流动 新的参数值是逐级向下流动 一个推荐的方式是只在父组件中存储源数据，以此避免在状态需要更新时容易产生的混淆...（2）事件通知是自底向上流动，即子组件的ChangeValue方法都会调用EventCallback来向上通知。 最终效果： 小结 本篇，我们了解了数据如何在Blazor中进行数据的绑定。
Tolinski 进一步演示了不需要支持 IE11 的开发人员如何利用 CSS 变量来实现一个自定义设计系统，而其开销明显小于使用框架。...Tolinski 继续说明 CSS 变量是如何帮助设计整个设计系统的。...出于演讲需要，Tolinski 将设计系统简化为使该设计独一无二的关键组件：颜色、类型、间距、字符、高度和元素（例如卡片或手风琴折叠菜单）。 调色板可以用 CSS 变量进行编码。...设计系统的下一个组件是元素，它是有样式的组件，例如或。元素应该简单、明确、难以分开且可扩展。...[……] 以变量为基础，只写你需要的。 对于任何颜色、字体、间距都要使用变量，这样你的整个网站就可以一下子更新或配置。如果所有组件都使用自定义属性，则不必为创建独特的组件而担心。
我会使用如下的处理方式，首先将商品卡片写成一个组件Commodity.vue，而在CommodityList.vue中用一个v-for来处理商品卡片列表的展示。...$emit像父组件传递clickCommodity事件，并携带商品数据，父组件即可在onCommodityClick方法中得到数据，进行业务处理，这样便完成了一个基本的由子到父的数据传递。...而这个包含多个运营栏目的vue组件我假设它叫ColumnList.vue，在其中通过v-for调用了CommodityList组件。...而CommodityList组件内部应该是改造成这样，slot接收来自父组件的商品卡片组件，这里面不涉及关于商品组件的业务，只关注其他业务和布局即可。...事件不必携带参数，完全符合父到子的数据流向，而不会发生子组件又给父组件反向发数据的情况 --> <commodity :modityData="scope.row
领取专属 10元无门槛券
手把手带您无忧上云
