github-按钮

使用方法

作为代码片段使用

使用 github:button 配置器 快速开始。

作为组件使用

• vue-github-button 适用于 Vue
• react-github-btn 适用于 React

作为模块使用

import { render } from 'github-buttons'

// export function render(options: object, callback: (el: HTMLElement) => void): void;
render(options, function (el) {
  document.body.appendChild(el) 
})

// export function render(anchor: HTMLAnchorElement, callback: (el: HTMLElement) => void): void;
render(anchor, function (el) {
  anchor.parentNode.replaceChild(el, anchor)
})

选项

• 对于代码片段用法，选项是 <a> 元素上的属性。
• 对于组件用法，选项是组件上的 prop。
• 对于模块用法，选项是 options 对象上的属性。

href

• 类型：string
• 默认值：'#'

为按钮分配 href 属性（GitHub 链接）。

title

• 类型：string
• 默认值：undefined

为按钮分配 title 属性。

data-icon

• 类型：string
• 默认值：'octicon-mark-github'

设置按钮上的图标。捆绑了 Octicons 的子集。

data-color-scheme

• 类型：string
• 默认值：undefined

使用类似 CSS 的语法定义系统配色方案到小部件配色方案的映射。

这是自版本 >=2.3.0 起的一个 选择性 功能。这意味着如果 data-color-scheme 是 undefined，它仍会像版本 <2.3.0 一样行为，在所有条件下都使用浅色方案。

一旦 data-color-scheme 被设置为字符串，它将继承默认映射：no-preference: light; light: light; dark: dark;。

• no-preference: light; 表示当系统对配色方案没有偏好时，将使用浅色方案。
• light: light; 表示当系统偏好浅色方案时，将使用浅色方案。
• dark: dark; 表示当系统偏好深色方案时，将使用深色方案。

用户声明将覆盖默认值。例如：

• 要使用默认设置启用配色方案，设置 data-color-scheme=""。
• 要在系统没有偏好时使用深色方案，设置 data-color-scheme="no-preference: dark;"。
• 要在任何地方强制使用浅色方案，设置 data-color-scheme="dark: light;"。
• 要在任何地方强制使用深色方案，设置 data-color-scheme="no-preference: dark; light: dark;"。

自版本 >=2.11.0 起，可以使用单个单词在任何地方强制使用配色方案。例如：

• 要在任何地方强制使用浅色方案，设置 data-color-scheme="light"。
• 要在任何地方强制使用深色方案，设置 data-color-scheme="dark"。

data-size

• 类型：string
• 默认值：undefined

设置按钮大小。可能的值有 undefined 和 'large'。

data-show-count

• 类型：boolean
• 默认值：false

根据按钮类型显示动态计数（从 href 检测）：

• https://github.com/:user（关注）
• https://github.com/:user/:repo（星标）
• https://github.com/:user/:repo/subscription（关注）
• https://github.com/:user/:repo/fork（复刻）
• https://github.com/:user/:repo/issues（议题）
• https://github.com/:user/:repo/issues/new（议题）

href 中的尾部斜杠、查询字符串和哈希不会影响类型检测：

• https://github.com/:user/（关注）
• https://github.com/:user?tab=repositories（关注）
• https://github.com/:user/:repo#readme（星标）
• https://github.com/:user/:repo/#readme（星标）

data-text

• 类型：string
• 默认值：undefined

设置按钮文本。当按钮从 <a> 元素生成且 data-text 为 undefined 时，按钮文本将是锚点的 textContent。

aria-label

• 类型：string
• 默认值：undefined

为按钮设置 aria-label。

另请参阅

• mdo/github-buttons

许可证

参见 LICENSE。