Browse Source

Add component type

pull/183/head
afc163 9 years ago
parent
commit
fdf19520d6
  1. 1
      components/alert/index.md
  2. 2
      components/breadcrumb/index.md
  3. 2
      components/button/index.md
  4. 1
      components/carousel/index.md
  5. 2
      components/checkbox/index.md
  6. 2
      components/collapse/index.md
  7. 2
      components/datepicker/index.md
  8. 2
      components/dropdown/index.md
  9. 1
      components/enter-animation/index.md
  10. 2
      components/form/index.md
  11. 2
      components/iconfont/index.md
  12. 2
      components/input-number/index.md
  13. 2
      components/layout/index.md
  14. 1
      components/menu/index.md
  15. 2
      components/message/index.md
  16. 2
      components/modal/index.md
  17. 1
      components/notification/index.md
  18. 2
      components/pagination/index.md
  19. 2
      components/popconfirm/index.md
  20. 2
      components/popover/index.md
  21. 2
      components/progress/index.md
  22. 2
      components/radio/index.md
  23. 2
      components/select/index.md
  24. 2
      components/slider/index.md
  25. 2
      components/steps/index.md
  26. 2
      components/switch/index.md
  27. 2
      components/table/index.md
  28. 2
      components/tabs/index.md
  29. 1
      components/tag/index.md
  30. 2
      components/tooltip/index.md
  31. 1
      components/tree/index.md
  32. 1
      components/upload/index.md
  33. 2
      components/validation/index.md
  34. 18
      site/templates/aside.html
  35. 33
      site/theme.js
  36. 9
      static/style.css

1
components/alert/index.md

@ -2,6 +2,7 @@
- category: Components
- chinese: 警告提示
- type: 展示
---

2
components/breadcrumb/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 面包屑
- order: 8
- type: 导航
---

2
components/button/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 按钮
- order: 0
- type: 基本
---

1
components/carousel/index.md

@ -2,6 +2,7 @@
- category: Components
- chinese: 走马灯
- type: 展示
---

2
components/checkbox/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 多选框
- order: 1
- type: 表单
---

2
components/collapse/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 折叠面板
- order: 9
- type: 展示
---

2
components/datepicker/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 日期选择框
- order: 5
- type: 表单
---

2
components/dropdown/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 下拉菜单
- order: 13
- type: 展示
---

1
components/enter-animation/index.md

@ -1,6 +1,5 @@
# EnterAnimation
- order: 11
- category: Components
- chinese: 进场动画
- cols: 1

2
components/form/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 表单
- order: 3
- type: 表单
---

2
components/iconfont/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 字体图标
- order: 0
- type: 基本
---

2
components/input-number/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 数字输入框
- order: 4
- type: 表单
---

2
components/layout/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 布局
- order: 0
- type: 基本
- cols: 1
---

1
components/menu/index.md

@ -3,6 +3,7 @@
- category: Components
- chinese: 导航菜单
- cols: 1
- type: 导航
---

2
components/message/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 全局提示
- order: 12
- type: 展示
---

2
components/modal/index.md

@ -1,6 +1,6 @@
# Modal
- order: 11
- type: 展示
- category: Components
- chinese: 对话框

1
components/notification/index.md

@ -2,6 +2,7 @@
- category: Components
- chinese: 通知提醒框
- type: 展示
---

2
components/pagination/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 分页
- order: 10
- type: 导航
---

2
components/popconfirm/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 气泡确认框
- order: 15
- type: 展示
---

2
components/popover/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 气泡卡片
- order: 14
- type: 展示
---

2
components/progress/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 进度条
- order: 17
- type: 展示
---

2
components/radio/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 单选框
- order: 2
- type: 表单
---

2
components/select/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 选择器
- order: 5
- type: 表单
---

2
components/slider/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 滑动输入条
- order: 4
- type: 表单
---

2
components/steps/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 步骤条
- order: 7
- type: 导航
- cols: 1
---

2
components/switch/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 开关
- order: 3
- type: 表单
---

2
components/table/index.md

@ -3,7 +3,7 @@
- category: Components
- chinese: 表格
- cols: 1
- order: 18
- type: 展示
---

2
components/tabs/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 标签页
- order: 6
- type: 导航
---

1
components/tag/index.md

@ -2,6 +2,7 @@
- category: Components
- chinese: 标签
- type: 展示
---

2
components/tooltip/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 文字提示
- order: 16
- type: 展示
---

1
components/tree/index.md

@ -2,6 +2,7 @@
- category: Components
- chinese: 树形控件
- type: 展示
---

1
components/upload/index.md

@ -2,6 +2,7 @@
- category: Components
- chinese: 文件上传
- type: 表单
---

2
components/validation/index.md

@ -2,7 +2,7 @@
- category: Components
- chinese: 表单校验
- order: 19
- type: 表单
---

18
site/templates/aside.html

@ -15,13 +15,17 @@
<li open="open">
<h4>{{category.name}}</h4>
<ul class="{%- if category === post.meta.category %}aside-list-show{%- endif %}">
{%- for item in category.pages %}
<li class="{%- if item.title === post.title %}current{%- endif %}">
<a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
{{item.title}}
<span class="chinese">{{item.meta.chinese}}</span>
</a>
</li>
{%- for item in category.pages|splitComponentsByType(category.name) %}
{%- if item.divider === true %}
<li class="type-divider">{{item.name}}</li>
{%- else %}
<li class="{%- if item.title === post.title %}current{%- endif %}">
<a href="{{permalink_url(item)}}" class="{%- if item.meta.disabled %}nav-link-disabled{%- endif %}">
{{item.title}}
<span class="chinese">{{item.meta.chinese}}</span>
</a>
</li>
{%- endif %}
{%- endfor %}
</ul>
</li>

33
site/theme.js

@ -75,14 +75,9 @@ module.exports = function(nico) {
}
}));
categories = Object.keys(categories).map(function(cat) {
var pages = categories[cat].sort(function(a, b) {
a = a.meta.order || 100;
b = b.meta.order || 100;
return parseInt(a, 10) - parseInt(b, 10);
});
return {
name: cat,
pages: pages
pages: categories[cat]
};
});
// React 的分类排序
@ -145,6 +140,32 @@ module.exports = function(nico) {
},
removeCodeBoxIdPrefix: function(id) {
return id.split('-').slice(2).join('-');
},
splitComponentsByType: function(pages, category) {
if (category !== 'Components') {
return pages.sort(function(a, b) {
a = a.meta.order || 100;
b = b.meta.order || 100;
return parseInt(a, 10) - parseInt(b, 10);
});
}
// 加入组件的类别分隔符
var tempResult = _.sortBy(pages, function(p) {
var types = ['基本', '表单', '展示', '导航', '其他'];
return types.indexOf(p.meta.type || '其他');
});
var lastType, result = [];
tempResult.forEach(function(p) {
if (p.meta.type !== lastType) {
result.push({
name: p.meta.type || '其他',
divider: true
});
lastType = p.meta.type;
}
result.push(p);
});
return result;
}
};

9
static/style.css

@ -478,6 +478,15 @@ footer ul li > a {
color: #5C6B76;
}
.aside-container li.type-divider {
font-size: 12px;
transform: scale(0.9);
transform-origin: 0 50%;
color: #aaa;
text-shadow: 0px 1px 0px #FFF;
margin: 6px 0 6px 48px;
}
.aside-container > ul > li > a {
padding-left: 46px;
font-size: 14px;

Loading…
Cancel
Save