Semantic UI 和Element UI是否冲突

semantic ui 官网:https://semantic-ui.com/introduction/getting-started.html
element ui 官网:http://element.eleme.io/#/zh-CN/component/installation
秉着能懒则懒的态度,如果能从两个UI组件库里面挑选合适的UI 组件,岂不是多了一种选择?本来是想用bootstrap和element ui组合的,可是貌似不太合手,所以打算把bootstrap换成semantic ui(这两个ui 组件是冲突的)。
查看一个简单的样式使用,Button:
semantic ui:

<button class="ui secondary button">
  Okay
</button>
<button class="ui button">
  Cancel
</button>

element ui:

<el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
所以,从简单的button来看,在使用上,是能明显区分出使用的是哪一个UI的。

那么,再看一些 UI 组件内的命名是否会有冲突:
semantic UI:


2789632-41d9676726ab0855.png

element ui:


2789632-2464803c9218b99f.png

从dom结构来开,两个UI组件的命名也是不会发生冲突的,很明显两个组件一个用ui开头去命名,一个用el开头去命名。
所以这两个组件用起来应该不会有太大的问题的,如果有问题,再做调整好了。可以放心替换啦……

2789632-7288057cea71c89c.png

2789632-c4a1faef007ab8e1.jpg
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值