Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Dashboards
Tabler
提交
5544589c
T
Tabler
项目概览
Dashboards
/
Tabler
12 个月 前同步成功
通知
0
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
T
Tabler
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
未验证
提交
5544589c
编写于
2月 16, 2020
作者:
P
Paweł Kuna
提交者:
GitHub
2月 16, 2020
浏览文件
操作
浏览文件
下载
差异文件
Merge pull request #479 from tabler/dev-badges
added bagde-avatar badge-tag and changed color of the dafault badge
上级
4289a763
0bf0378c
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
72 addition
and
7 deletion
+72
-7
pages/_docs/badges.md
pages/_docs/badges.md
+24
-0
pages/_includes/ui/badge.html
pages/_includes/ui/badge.html
+18
-1
scss/ui/_badges.scss
scss/ui/_badges.scss
+30
-6
未找到文件。
pages/_docs/badges.md
浏览文件 @
5544589c
...
...
@@ -61,3 +61,27 @@ If you don't want your badge to contain any text you can do it by leaving the ht
{% endfor %}
{% endcapture %}
{% include example.html code=code %}
### Badge addons
You can add badge addon by adding
`.badge-addon`
class.
{% capture code %}
{% include ui/badge.html text="task" color="green" addon="finished" %}
{% include ui/badge.html text="bundle" color="purple" addon="passing" %}
{% include ui/badge.html text="CSS gzip size" color="red-lt" addon="20.9kB" addon-color="red" %}
{% endcapture %}
{% include example.html code=code %}
### Badge avatars
If you want to add an avatar to your badge just create
`.badge-avatar`
class.
{% capture code %}
{% include ui/badge.html person-id=1 color="blue" %}
{% include ui/badge.html person-id=2 color="blue" %}
{% include ui/badge.html person-id=3 color="blue" %}
{% include ui/badge.html person-id=4 color="blue" %}
{% include ui/badge.html person-id=5 color="blue" %}
{% endcapture %}
{% include example.html code=code %}
pages/_includes/ui/badge.html
浏览文件 @
5544589c
<span
class=
"badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}"
>
{{ include.text }}
</span>
{% assign el = 'span' %}
<
{{
el
}}
class=
"badge bg-{{ include.color | default: 'primary' }}{% if include.class %} {{ include.class }}{% endif %}"
>
{% if include.person-id %}
{% assign person-id = include.person-id | minus: 1 %}
{% assign person = site.data.people[person-id] %}
{% assign src = person.photo %}
{% unless src %}
{% assign placeholder = person.full_name | first_letters %}
{% endunless %}
<
{{
el
}}
class=
"badge-avatar"
style=
"background-image: url({{ site.base }}/{{ src }})"
>
{% unless src %}{{ person.full_name | first_letters }}{% endunless %}
</
{{
el
}}
>
{% endif %}
{% if include.text %}
{{ include.text }}
{% else %}
{{ person.full_name }}
{% endif %}
{% if include.addon %}
<
{{
el
}}
class=
"badge-addon {% if include.addon-color%}bg-{{ include.addon-color }}{% endif %}"
>
{{ include.addon }}
</
{{
el
}}
>
{% endif %}
</
{{
el
}}
>
scss/ui/_badges.scss
浏览文件 @
5544589c
.badge
{
@include
subheader
(
false
);
background
:
$gray-200
;
display
:
inline-flex
;
justify-content
:
center
;
padding
:
0
.5em
;
line-height
:
1
.75em
;
background
:
$gray-500
;
overflow
:
hidden
;
vertical-align
:
text-bottom
;
@at-root
a
#{
&
}
{
color
:
$white
;
}
...
...
@@ -23,8 +27,8 @@
position
:
absolute
;
top
:
25%
;
right
:
0
;
min-width
:
1
r
em
;
min-height
:
1
r
em
;
min-width
:
1
.75
em
;
min-height
:
1
.75
em
;
padding
:
0
.25rem
;
line-height
:
1rem
;
background-clip
:
padding-box
;
...
...
@@ -39,4 +43,24 @@
.badge-pill
{
border-radius
:
100px
;
min-width
:
1
.75em
;
}
.badge-avatar
{
box-sizing
:
content-box
;
width
:
1
.75em
;
margin
:
0
.5em
0
-.5em
;
color
:
$light-white
;
background
:
$light-black
no-repeat
center
/
cover
;
vertical-align
:
text-bottom
;
}
.badge-addon
{
padding
:
0
.5rem
;
margin
:
0
-.5em
0
.5em
;
min-width
:
1
.75em
;
background
:
$light-black
;
text-align
:
center
;
color
:
$white
;
text-decoration
:
none
;
}
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录