☁️
SalesforceCRM.cn
首页
产品
文章
培训
关于我
Create a Component from an SLDS Blueprint
DEX475 - Style a Component
📄 第 58 页
🎬 视频课程
首页
/
认证培训
/
DEX475
/
Style a Component
/
Create a Component from an SLDS Blueprint
课程章节介绍
同学们,今天我们来聊一个很实用的技巧——当你需要的界面元件在Lightning基本组件库里找不到现成的,该怎么办?别慌,我们可以从SLDS蓝图一步步构建出来。下面我把这个过程拆成五个清晰的步骤,保证你听完就能上手。 首先第一步,,复制基础变体的标记,。打开SLDS网站,找到你需要的组件蓝图,它通常会提供几种样式变体。选一个最接近你需求的变体,直接把它的HTML代码复制到你的LWC模板里。这一步就是先让界面能显示出来。 接着第二步,,尽可能用Lightning基本组件替换标准HTML,。看看你复制过来的标记,里面有没有直接用`
`、`
`、`
`这些原生标签的地方。如果对应功能有现成的基本组件,比如`lightning-button`、`lightning-icon`,那就换成它们。基本组件的好处是自动处理了可访问性、交互行为,还能跟随Salesforce的更新自动升级样式,一劳永逸。 然后是第三步,,把内容移到JavaScript,并用`@api`属性暴露出来,。蓝图里的文本、数据都是写死的,而你的组件肯定是动态的。所以把那些可变的文字、配置项提取到JS里,定义成`@api`属性,然后在模板里用花括号绑定。这样外界就能通过属性来控制组件显示什么内容。 第四步有点巧妙,,用getter函数生成动态类名,实现主题变体,。蓝图可能给了好几种颜色方案或尺寸,这些通常通过CSS类来切换。你可以在JS里写一个getter,根据某个属性值自动计算出应该拼接哪些类名,比如`get computedClass() { return 'slds-button_' + this.variant; }`,然后在模板上绑定这个getter。这样切换变体就像改个属性值一样简单。 最后第五步,,把其他动态属性也绑定好,。比如按钮是否需要禁用、输入框的占位符这些,都应基于JS里的属性动态输出,保证组件是完全可配置的。 这里有一个关键提醒——,蓝图标记一旦被你复制过来,就成了你自己代码的一部分,未来SLDS官网更新了样式,你的组件可不会自动跟进,。这和基本组件完全不同,基本组件是Salesforce官方维护的,底层样式更新后你自动受益。所以构建前,记得去蓝图页面看一看那个,“Lightning Components”按钮,,如果它亮着,说明这个组件已经有官方基本组件了,直接用它就好,别自己重复造轮子了。 以上就是从SLDS蓝图构建LWC组件的五步法,你学“废”了吗?动手的时候按这个顺序来,思路会非常清晰。好,这节课就到这里,咱们下次见!
关键词
LWC
Lightning Web Components
Salesforce