Alert 提示
警告提示，展现需要关注的信息。
何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
代码演示
<lud-alert type="info">Base System Alert</lud-alert>
<lud-alert type="success" closable="true"><lud-icon type="customapps"></lud-icon>我们将在周五凌晨进行停机维护，带来不便深表歉意。</lud-alert>
<lud-alert type="warning">任何未经许可的访问，我们都将在法律允许的最大范围内追究责任。</lud-alert>
<lud-alert type="danger">我们中出了一个叛徒。</lud-alert>
Avatar 头像
展现用户头像。
代码演示
<span class="lud-avatar lud-avatar--circle lud-avatar--medium">
<img src="//oalr77jpg.qnssl.com/avatar/9cbf48ad-61c6-4a1e-9d63-0d2f6334e460.jpg" alt="person name" />
</span>
<span class="lud-avatar lud-avatar--medium">
<img src="//oalr77jpg.qnssl.com/avatar/9cbf48ad-61c6-4a1e-9d63-0d2f6334e460.jpg" alt="person name" />
</span>
<span class="lud-avatar lud-avatar--small">
<img src="//oalr77jpg.qnssl.com/avatar/9cbf48ad-61c6-4a1e-9d63-0d2f6334e460.jpg" alt="person name" />
</span>
Button 按钮
按钮用于开始一个即时操作。
何时使用
标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
代码演示
<a href="" class="lud-btn">Default</a>
<a href="" class="lud-btn lud-btn--primary">Primary</a>
<a href="" class="lud-btn lud-btn--info">Info</a>
<a href="" class="lud-btn lud-btn--success">Success</a>
<a href="" class="lud-btn lud-btn--warning">Warning</a>
<a href="" class="lud-btn lud-btn--danger">Danger</a>
<a href="" class="lud-btn lud-btn--inverse">Inverse</a>
<button class="lud-btn lud-btn--primary lud-btn--ghost">Primary</button>
<button class="lud-btn lud-btn--info lud-btn--ghost">Info</button>
<button class="lud-btn lud-btn--success lud-btn--ghost">Success</button>
<button class="lud-btn lud-btn--warning lud-btn--ghost">Warning</button>
<button class="lud-btn lud-btn--danger lud-btn--ghost">Danger</button>
<button class="lud-btn lud-btn--inverse lud-btn--ghost">Inverse</button>
<button class="lud-btn lud-btn--sm">Default</button>
<button class="lud-btn lud-btn">Default</button>
<button class="lud-btn lud-btn--lg">Default</button>
<button class="lud-btn lud-btn--primary lud-btn--block">Block</button>
<a href="" class="lud-btn lud-btn--disabled">Default</a>
<a href="" class="lud-btn lud-btn--primary lud-btn--disabled">Primary</a>
<a href="" class="lud-btn lud-btn--info lud-btn--disabled">Info</a>
<button class="lud-btn lud-btn--success lud-btn--ghost" disabled>Success</button>
<button class="lud-btn lud-btn--sm lud-btn--ghost lud-btn--primary"><lud-icon type="add" class="lud-btn__icon"></lud-icon>添加语料库</button>
Discussion 评论框
A publisher is an advanced longform text input form element.
代码演示
<lud-discussion name="replay-feed" placeholder="输入评论内容..."></lud-discussion>
Dropdown 下拉菜单
向下弹出的列表。
何时使用
- 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
属性
- align: [left,right] 菜单对齐方式，默认为居中
- size: [x-small,small,medium,large] 菜单大小，默认为small
- pointer: Boolean 是否显示角标样式， 默认为false
代码演示
<lud-dropdown align="left" pointer="true">
<a href="javasctip:;">所有反馈<lud-icon type="down"></lud-icon></a>
<ul>
<li><a href="javasctip:;">未处理反馈</a></li>
<li><a href="javasctip:;">处理中反馈</a></li>
<li><a href="javasctip:;">已处理反馈</a></li>
</ul>
</lud-dropdown>
Figure 缩略图
用于展现缩略图。
代码演示
<div style="width:320px;">
<figure class="lud-image lud-image--card">
<a href="javascript:void(0);" class="lud-image__crop lud-image__crop--16-by-9">
<img src="//placehold.it/320x180" alt="Description of the image" />
</a>
<figcaption class="lud-image__title lud-image__title--card">
<span class="lud-image__text lud-truncate" title="Image Title">Image Title</span>
</figcaption>
</figure>
</div>
Form 表单
具有数据收集、校验和提交功能的表单，包含输入框、文本框、单选等元素。
水平表单
示例文档待完善
Icon 图标
有含义的矢量图形，源自Salesforce Lightning Design System. Copyright (c) 2015, salesforce.com, inc. All rights reserved. All icons and images are licensed under Creative Commons Attribution-NoDerivatives 4.0
如何使用
<lud-icon type="people" />
图标列表
- cloud.cloud
- areachart.areachart
- barchart.barchart
- barschart.barschart
- facebook-official.facebookofficial
- linkedin-square.linkedinsquare
- skype.skype
- twitter.twitter
- wechat.wechat
- QQ.qq02
- weibo.weibo
- topic.topic
- addcontact.addcontact
- announcement.announcement
- apex.apex
- back.back
- call.call
- canvas.canvas
- changeowner.changeowner
- changerecordtype.changerecordtype
- clone.clone
- description.description
- dialin.dialin
- download.download
- editgroups.editgroups
- editrelationship.editrelationship
- edit.edit
- email.email
- fallback.fallback
- filter.filter
- flow.flow
- follow.follow
- following.following
- freezeuser.freezeuser
- googlenews.googlenews
- info.info
- joingroup.joingroup
- leadconvert.leadconvert
- leavegroup.leavegroup
- logevent.logevent
- managepermsets.managepermsets
- map.map
- more.more
- newaccount.newaccount
- newcampaign.newcampaign
- newchildcase.newchildcase
- newcontact.newcontact
- newcustom2.newcustom2
- newcustom3.newcustom3
- newcustom5.newcustom5
- newcustom9.newcustom9
- newcustom14.newcustom14
- newcustom15.newcustom15
- newcustom16.newcustom16
- newcustom17.newcustom17
- newcustom18.newcustom18
- newcustom20.newcustom20
- newcustom21.newcustom21
- newcustom24.newcustom24
- newcustom26.newcustom26
- newcustom30.newcustom30
- newcustom31.newcustom31
- newcustom32.newcustom32
- newcustom33.newcustom33
- newcustom34.newcustom34
- newcustom35.newcustom35
- newcustom36.newcustom36
- newcustom37.newcustom37
- newcustom38.newcustom38
- newcustom39.newcustom39
- newcustom40.newcustom40
- newcustom41.newcustom41
- newcustom42.newcustom42
- newcustom43.newcustom43
- newcustom44.newcustom44
- newcustom45.newcustom45
- newcustom46.newcustom46
- newcustom47.newcustom47
- newcustom48.newcustom48
- newcustom49.newcustom49
- newcustom50.newcustom50
- newcustom51.newcustom51
- newcustom52.newcustom52
- newcustom54.newcustom54
- newcustom55.newcustom55
- newcustom56.newcustom56
- newcustom57.newcustom57
- newcustom58.newcustom58
- newcustom59.newcustom59
- newcustom60.newcustom60
- newcustom61.newcustom61
- newcustom62.newcustom62
- newcustom63.newcustom63
- newcustom64.newcustom64
- newcustom65.newcustom65
- newcustom66.newcustom66
- newcustom67.newcustom67
- newcustom68.newcustom68
- newcustom69.newcustom69
- newcustom70.newcustom70
- newcustom71.newcustom71
- newcustom72.newcustom72
- newcustom73.newcustom73
- newcustom74.newcustom74
- newcustom75.newcustom75
- newcustom76.newcustom76
- newcustom77.newcustom77
- newcustom78.newcustom78
- newcustom79.newcustom79
- newcustom80.newcustom80
- newcustom81.newcustom81
- newcustom82.newcustom82
- newcustom83.newcustom83
- newcustom84.newcustom84
- newcustom85.newcustom85
- newcustom86.newcustom86
- newcustom87.newcustom87
- newcustom88.newcustom88
- newcustom89.newcustom89
- newcustom90.newcustom90
- newcustom91.newcustom91
- newcustom92.newcustom92
- newcustom93.newcustom93
- newcustom94.newcustom94
- newcustom95.newcustom95
- newcustom96.newcustom96
- newcustom97.newcustom97
- newcustom98.newcustom98
- newcustom99.newcustom99
- newcustom100.newcustom100
- newevent.newevent
- newgroup.newgroup
- newlead.newlead
- newnote.newnote
- newnotebook.newnotebook
- newopportunity.newopportunity
- newpersonaccount.newpersonaccount
- newtask.newtask
- passwordunlock.passwordunlock
- preview.preview
- priority.priority
- questionpostaction.questionpostaction
- quote.quote
- record.record
- refresh.refresh
- sharelink.sharelink
- sharepoll.sharepoll
- sharepost.sharepost
- sharethanks.sharethanks
- share.share
- sort.sort
- submitforapproval.submitforapproval
- updatestatus.updatestatus
- update.update
- upload.upload
- useractivation.useractivation
- user.user
- weblink.weblink
- add.add
- adduser.adduser
- announcement.announcement1
- answer.answer
- apps.apps
- arrowdown.arrowdown
- arrowup.arrowup
- attach.attach
- back.back1
- ban.ban
- bold.bold
- bookmark.bookmark
- broadcast.broadcast
- brush.brush
- bucket.bucket
- builder.builder
- call.call1
- capslock.capslock
- cases.cases
- centeraligntext.centeraligntext
- chart.chart
- chat.chat
- check.check
- checkin.checkin
- chevrondown.chevrondown
- chevronleft.chevronleft
- chevronright.chevronright
- chevronup.chevronup
- clear.clear
- clock.clock
- close.close
- comments.comments
- company.company
- connectedapps.connectedapps
- contractalt.contractalt
- contract.contract
- copy.copy
- crossfilter.crossfilter
- customapps.customapps
- cut.cut
- datadotcom.datadotcom
- dayview.dayview
- delete.delete
- deprecate.deprecate
- description.description1
- desktop.desktop
- dockpanel.dockpanel
- down.down
- download.download1
- editform.editform
- edit.edit1
- email.email1
- endcall.endcall
- erectwindow.erectwindow
- error.error
- event.event
- expandalt.expandalt
- expand.expand
- favorite.favorite
- feed.feed
- file.file
- filter.filter1
- filterList.filterlist
- forward.forward
- frozen.frozen
- groups.groups
- help.help
- home.home
- identity.identity
- image.image
- inbox.inbox
- info.info1
- inserttagfield.inserttagfield
- inserttemplate.inserttemplate
- italic.italic
- justifytext.justifytext
- kanban.kanban
- keyboarddismiss.keyboarddismiss
- knowledgebase.knowledgebase
- layers.layers
- layout.layout
- leftaligntext.leftaligntext
- left.left
- like.like
- link.link
- list.list
- location.location
- lock.lock
- logacall.logacall
- logout.logout
- magicwand.magicwand
- matrix.matrix
- metrics.metrics
- moneybag.moneybag
- monthlyview.monthlyview
- move.move
- muted.muted
- newwindow.newwindow
- new.new
- news.news
- note.note
- notebook.notebook
- notification.notification
- office365.office365
- offline.offline
- openfolder.openfolder
- open.open
- openedfolder.openedfolder
- overflow.overflow
- packageorgbeta.packageorgbeta
- packageorg.packageorg
- package.package
- page.page
- palette.palette
- paste.paste
- people.people
- phonelandscape.phonelandscape
- phoneportrait.phoneportrait
- photo.photo
- picklist.picklist
- power.power
- preview.preview1
- priority.priority1
- process.process
- push.push
- puzzle.puzzle
- question.question
- questionsandanswers.questionsandanswers
- record.record1
- redo.redo
- refresh.refresh1
- relate.relate
- removeformatting.removeformatting
- removelink.removelink
- replace.replace
- reply.reply
- resetpassword.resetpassword
- retweet.retweet
- richtextbulletedlist.richtextbulletedlist
- richtextindent.richtextindent
- richtextnumberedlist.richtextnumberedlist
- richtextoutdent.richtextoutdent
- rightaligntext.rightaligntext
- right.right
- rotate.rotate
- rows.rows
- search.search
- settings.settings
- setupassistantguide.setupassistantguide
- setup.setup
- sharepost.sharepost1
- share.share1
- shield.shield
- sidelist.sidelist
- signpost.signpost
- sms.sms
- snippet.snippet
- socialshare.socialshare
- sort.sort1
- spinner.spinner
- standardobjects.standardobjects
- stop.stop
- strikethrough.strikethrough
- success.success
- summary.summary
- summarydetail.summarydetail
- switch.switch
- table.table
- tabletlandscape.tabletlandscape
- tabletportrait.tabletportrait
- tabset.tabset
- task.task
- textbackgroundcolor.textbackgroundcolor
- textcolor.textcolor
- threedots.threedots
- tilecardlist.tilecardlist
- topic.topic1
- touchaction.touchaction
- trail.trail
- undelete.undelete
- undeprecate.undeprecate
- underline.underline
- undo.undo
- unlock.unlock
- unmuted.unmuted
- up.up
- upload.upload1
- userrole.userrole
- user.user1
- volumehigh.volumehigh
- volumelow.volumelow
- volumeoff.volumeoff
- warning.warning
- weeklyview.weeklyview
- world.world
- zoomin.zoomin
- zoomout.zoomout
Navigation 菜单
为页面和功能提供导航的菜单列表。
何时使用
- 侧边导航提供多级结构来收纳和排列网站架构。
代码演示
<div class="lud-grid lud-grid--vertical lud-navigation-list--vertical">
<h2 class="lud-text-title--caps lud-p-around--medium" id="entity-header">Reports</h2>
<ul>
<li class="lud-is-active"><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="entity-header">Recent</a></li>
<li><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="entity-header">Created by Me</a></li>
<li><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="entity-header">Private Reports</a></li>
<li><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="entity-header">Public Reports</a></li>
<li><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="entity-header">All Reports</a></li>
</ul>
<h2 class="lud-text-title--caps lud-p-around--medium" id="folder-header">Folders</h2>
<ul>
<li><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="folder-header">Created by Me</a></li>
<li><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="folder-header">Shared with Me</a></li>
<li><a href="javascript:void(0);" class="lud-navigation-list--vertical__action lud-text-link--reset" aria-describedby="folder-header">All Reports</a></li>
</ul>
</div>
Phone Mockup
显示移动端预览效果。
代码演示
<lud-phone-mockup>
<img src="http://a3.mzstatic.com/us/r30/Purple62/v4/25/39/23/2539239c-4bdd-b750-84dd-82f6fef81c11/screen696x696.jpeg"/>
</lud-phone-mockup>
Select 筛选框
弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。 更多配置可点此查看
代码演示
<select>
<option value ="表现主义">表现主义</option>
<option value ="构成主义">构成主义</option>
<option value="理性主义">理性主义</option>
</select>
<select data-disabled-select2="true">
<option value ="表现主义">表现主义</option>
<option value ="构成主义">构成主义</option>
<option value="理性主义">理性主义</option>
</select>
Sheet 浮层
卡片式浮层
何时使用
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用浮层承载相应的操作。
代码演示
<a class="lud-button lud-button--primary" href="javascript:lud.slidePanel({title:'hello',body:'<p>world</p>'})">触发</a>
Spinner 加载中动画
代码演示
<div style="position: relative;width: 100%;height: 10rem;">
<lud-spinner></lud-spinner>
</div>
Table 表格
展示行列数据。
## 何时使用
- 当有大量结构化的数据需要展现时；
- 当需要对数据进行排序、分页等复杂行为时。
代码演示
| 状态 | 提交人 | 内容 | 提交时间 | ||
|---|---|---|---|---|---|
| 270 | 已处理 | 谢玉辉 | 目前无融资历史 | 5 天前 | 处理详情(3) |
| 269 | 已处理 | 刘培爽 | 无融资历史，无法申请认证。 | 5 天前 | 处理详情(1) |
| 268 | 已处理 | 刘培爽 | 无融资历史，无法申请认证。 | 5 天前 | 处理详情(1) |
| 267 | 已处理 | 刘培爽 | 无融资历史，无法申请认证。 | 5 天前 | 处理详情(1) |
<table class="lud-table">
<thead>
<tr>
<th nowrap=""></th>
<th nowrap="">状态</th>
<th nowrap="">提交人</th>
<th>内容</th>
<th nowrap="">提交时间</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap="">270</td>
<td nowrap=""><span class="lud-tag lud-tag--success">已处理</span></td>
<td nowrap="">
<a href="/users/16377/edit">谢玉辉</a>
</td>
<td>目前无融资历史</td>
<td nowrap="">5 天前</td>
<td nowrap="">
<a data-disable-with="loading..." data-remote="true" href="/feedbacks/270">处理详情(3)</a>
</td>
</tr>
<tr>
<td nowrap="">269</td>
<td nowrap=""><span class="lud-tag lud-tag--success">已处理</span></td>
<td nowrap="">
<a href="/users/16548/edit">刘培爽</a>
</td>
<td>无融资历史，无法申请认证。</td>
<td nowrap="">5 天前</td>
<td nowrap="">
<a data-disable-with="loading..." data-remote="true" href="/feedbacks/269">处理详情(1)</a>
</td>
</tr>
<tr>
<td nowrap="">268</td>
<td nowrap=""><span class="lud-tag lud-tag--success">已处理</span></td>
<td nowrap="">
<a href="/users/16548/edit">刘培爽</a>
</td>
<td>无融资历史，无法申请认证。</td>
<td nowrap="">5 天前</td>
<td nowrap="">
<a data-disable-with="loading..." data-remote="true" href="/feedbacks/268">处理详情(1)</a>
</td>
</tr>
<tr>
<td nowrap="">267</td>
<td nowrap=""><span class="lud-tag lud-tag--success">已处理</span></td>
<td nowrap="">
<a href="/users/16548/edit">刘培爽</a>
</td>
<td>无融资历史，无法申请认证。</td>
<td nowrap="">5 天前</td>
<td nowrap="">
<a data-disable-with="loading..." data-remote="true" href="/feedbacks/267">处理详情(1)</a>
</td>
</tr>
</tbody>
</table>
Tag 标签
进行标记和分类的小标签。
何时使用
- 用于标记事物的属性和维度。
- 进行分类。
代码演示
<lud-tag>Default</lud-tag>
<lud-tag type="primary">Primary</lud-tag>
<lud-tag type="danger">Danger</lud-tag>
<lud-tag type="warning">Warning</lud-tag>
<lud-tag type="info">Info</lud-tag>
<lud-tag type="success">Success</lud-tag>
<lud-tag pill="true">Default</lud-tag>
<lud-tag type="primary" pill="true">Primary</lud-tag>
<lud-tag type="danger" pill="true">Danger</lud-tag>
<lud-tag type="warning" pill="true">Warning</lud-tag>
<lud-tag type="info" pill="true">Info</lud-tag>
<lud-tag type="success" pill="true">Success</lud-tag>
Toast
警告提示，展现需要关注的信息。
何时使用
- 当某个页面需要向用户显示警告的信息时。
- 非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。
代码演示
<button class="lud-button lud-button--primary" onClick="lud.toast.info('hello word')">触发</button>
lud.toast.info('hello word'):
lud.toast.success('hello word'):
lud.toast.warning('hello word'):
lud.toast.danger('hello word'):
Toggle 开关
开关选择器。
何时使用
- 需要表示开关状态/两种状态之间的切换时。
代码演示
<div class="lud-form-element">
<label class="lud-form-element__label" for="text-input-01">Guest Mode</label>
<div class="lud-form-element__control">
<lud-toggle name="guest-mode"></lud-toggle>
</div>
</div>
<div class="lud-form-element">
<label class="lud-form-element__label" for="text-input-01">Admin Mode</label>
<div class="lud-form-element__control">
<lud-toggle name="admin-mode" value="root" disabled></lud-toggle>
</div>
</div>