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 - category: Components
- chinese: 警告提示 - chinese: 警告提示
- type: 展示
--- ---

2
components/breadcrumb/index.md

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

2
components/button/index.md

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

1
components/carousel/index.md

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

2
components/checkbox/index.md

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

2
components/collapse/index.md

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

2
components/datepicker/index.md

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

2
components/dropdown/index.md

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

1
components/enter-animation/index.md

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

2
components/form/index.md

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

2
components/iconfont/index.md

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

2
components/input-number/index.md

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

2
components/layout/index.md

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

1
components/menu/index.md

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

2
components/message/index.md

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

2
components/modal/index.md

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

1
components/notification/index.md

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

2
components/pagination/index.md

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

2
components/popconfirm/index.md

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

2
components/popover/index.md

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

2
components/progress/index.md

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

2
components/radio/index.md

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

2
components/select/index.md

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

2
components/slider/index.md

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

2
components/steps/index.md

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

2
components/switch/index.md

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

2
components/table/index.md

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

2
components/tabs/index.md

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

1
components/tag/index.md

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

2
components/tooltip/index.md

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

1
components/tree/index.md

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

1
components/upload/index.md

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

2
components/validation/index.md

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

18
site/templates/aside.html

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

33
site/theme.js

@ -75,14 +75,9 @@ module.exports = function(nico) {
} }
})); }));
categories = Object.keys(categories).map(function(cat) { 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 { return {
name: cat, name: cat,
pages: pages pages: categories[cat]
}; };
}); });
// React 的分类排序 // React 的分类排序
@ -145,6 +140,32 @@ module.exports = function(nico) {
}, },
removeCodeBoxIdPrefix: function(id) { removeCodeBoxIdPrefix: function(id) {
return id.split('-').slice(2).join('-'); 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; 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 { .aside-container > ul > li > a {
padding-left: 46px; padding-left: 46px;
font-size: 14px; font-size: 14px;

Loading…
Cancel
Save