更改语义 UI 的分页图标

Question

我正在使用 Pagination from Semantic UI，我想知道是否可以更改 next/previous 按钮的图标。

组件：

import React from 'react'
import { Pagination } from 'semantic-ui-react'

const PaginationExampleCompact = () => (
  <Pagination
    boundaryRange={0}
    defaultActivePage={1}
    ellipsisItem={null}
    firstItem={null}
    lastItem={null}
    siblingRange={1}
    totalPages={10}
  />
)

export default PaginationExampleCompact

有没有办法改变它的图标？例如 icon from Semantic UI，我想这样更容易。

代码沙箱：https://codesandbox.io/s/pedantic-wescoff-jsyrw?file=/example.js

Answer 1

您可以将 prevItem 和 nextItem 设置为您喜欢的图标。

像这样：

<Pagination
  boundaryRange={0}
  defaultActivePage={1}
  ellipsisItem={null}
  firstItem={null}
  lastItem={null}
  prevItem={{content: <Icon name="angle double left" />}}
  nextItem={{content: <Icon name="angle double right" />}}
  siblingRange={1}
  totalPages={10}
/>

https://codesandbox.io/s/relaxed-silence-vqiww?file=/example.js

更多信息在 docs

更改语义 UI 的分页图标

Change Semantic UI's Pagination icon

html

javascript

reactjs

semantic-ui

semantic-ui-react