fe / yoho-blk · Files

Yoho BLK Components

目的

• 开箱即用
• 松耦合，内聚
• 开发并行

分页组件

• 组件名: pagination

• 说明

根据BLK样式设计

• 使用

1. express 服务端路由

   var page = req.query.page || 1;
   res.render('index', {
       helpers: {
           // 引入组件，注意path，根据项目路径
           pagination: require('../components/pagination/pagination').createPagination
       },
       paginationOpts:  {
           page: page,               // 当前页 http://host/?page=2
           limit: 10,                // 每页显示多少
           total: 100,               // 一共多少纪录
           queryParams: req.query
       }
   });

2. handlebars view

    {{{ pagination paginationOpts }}}

3. 将public/scss/components/pagination.scss 加入到编译列表中

• 参数option

  • 每页显示10条纪录

    {{{ pagination paginationOpts limit="10" }}}

  • 修改上一页文本

    {{{ pagination paginationOpts leftText="上一页" }}}

  • 修改下一页文本

    {{{ pagination paginationOpts leftText="下一页" }}}

  • 修改分页组件根元素class

    {{{ pagination paginationOpts paginationClass="your-class" }}}