风格化 LWC 电台列表？

Question

所以现在我正在尝试为 LWC 中的区域构建此单选列表，该功能运行良好，当您单击区域时，它会为该区域选择下面的所有州。

https://i.stack.imgur.com/y2MM8.png

但是，我想对其进行风格化，使其看起来更合适。我有点困惑如何使用 LWC 提供的这些组件来做到这一点。这是区域应该是什么样子的模型。

https://i.stack.imgur.com/A26PH.png

这是它的 HTML 的样子。

https://i.stack.imgur.com/1vWcy.png

Answer 1

您可以通过使用网格系统来实现这一点：https://www.lightningdesignsystem.com/utilities/grid/

Answer 2

我们可以通过以下几个步骤来实现相同的风格：

1. 将类传递给每个闪电输入以限定样式。

2. 具有传递的类名的样式单选控件。

3. 将文件另存为 .css 并存储在静态资源中。

4. 利用 platformResourceLoader 模块的 loadStyle 方法在组件中加载样式表。