尧图网站建设 
ESLint 官网组件库指南button 按钮宏Macro的类型、行为与源码实现【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintESLint 官方文档站点docs/是一套基于 Eleventy11ty与 Nunjucks 模板构建的静态站点其组件库文档专门讲解如何通过button宏在页面中渲染按钮。本文以该组件文档为主体结合仓库内真实的宏实现、SCSS 样式与设计令牌源码完整讲解三种按钮类型、action/link两种行为语义、调用语法与底层渲染原理帮助你在 ESLint 文档站或同类 11ty 项目中正确、可复用地上手该组件。一、组件定位与核心设计思想按钮组件位于docs/src/library/组件库中与alert、code-tabs、link-card等组件并列是 ESLint 文档站组件库页面渲染入口permalink为/component-library/index.html的组成部分。该库中的每个组件都通过 library.json 声明布局与输出路径{ layout: components.html, permalink: /component-library/{{ page.fileSlug }}.html }按钮组件的设计遵循两条核心原则三种视觉类型primary主按钮、secondary次按钮、ghost幽灵按钮样式既可作用于真正的button也可作用于长得像按钮的a链接。语义由行为决定通过behavior参数区分执行动作与跳转链接两种语义从而渲染出正确的 HTML 语义元素——执行动作用button跳转链接用a。这一设计避免了用链接冒充按钮或用按钮冒充链接的可访问性陷阱文档站中大量按钮既可能是表单提交/交互动作也可能是指向规则页、集成页的入口同一套样式配合两种语义输出既保证了视觉统一也保证了屏幕阅读器与搜索引擎能正确理解元素语义。二、快速上手宏的导入与基础调用在任意需要渲染按钮的页面中首先要导入button宏。文档给出的标准写法是!-- 在需要渲染按钮的页面中导入宏 -- {% from components/button.macro.html import button %} !-- 使用宏behavior 为 action渲染为 button typebutton -- { { button({ behavior: action, type: primary, text: Do Something }) } } !-- 省略 behavior默认渲染为 a 链接样式的按钮 -- { { button({ type: primary, text: Go somewhere, url: /url/to/somewhere/ }) } }文档示例中{ {与} }之间的空格是 Markdown 代码块为转义 Nunjucks 模板语法所做的处理实际模板中直接写{{ ... }}即可。可以看出调用形态是一个 Nunjucks 宏 一个参数对象核心参数有三个参数取值说明behavioraction|link默认决定渲染语义action渲染button typebuttonlink渲染a href...typeprimary|secondary|ghost决定视觉类型映射到c-btn--primary/secondary/ghost样式类text任意字符串按钮上显示的文本url任意 URL仅link行为下使用作为a的href值三、行为语义action与link的差异这是该组件最关键的语义设计点。根据 button.macro.html 的完整实现共 26 行宏的分支逻辑非常清晰宏签名button(behaviorlink, params) ├─ 若 params.behavior action │ └─ 渲染 button typebutton classc-btn [c-btn--primary|secondary|ghost]text/button └─ 否则默认 link └─ 渲染 a hrefparams.url classc-btn [c-btn--primary|secondary|ghost]text/a从源码结构看有三个值得注意的细节behavior的默认值是link当调用时不传behavior宏默认渲染a标签即看起来像按钮的链接。这与文档将默认行为定义为链接的描述完全一致。text缺省时有兜底文案action行为下缺省文本为This is a buttonlink行为下缺省文本为This is a link styled like a button。因此组件文档的示例中第一个示例button({ behavior: action, type: primary })未传text渲染出的就是一句默认占位文案。url只在link分支被使用如果以action行为传入url该参数会被忽略反之若以link行为渲染却不提供url会得到href为空字符串的链接。宏内部通过 Nunjucks 的{% if %}/{% else %}与{%- if %}条件分支输出不同标签同时按params.type拼接对应的修饰类名最终统一落在基础类c-btn上。整个组件只有一个宏、零 JS 逻辑完全依赖模板层完成语义分发。四、三种视觉类型与样式令牌4.1 样式类与外观差异三种类型分别对应 buttons.scss 中的三个修饰类c-btn--primary主按钮实底填充使用--primary-button-background-color背景与--primary-button-text-color文字色hover 时背景切换为--primary-button-hover-color见 buttons.scss 第 53-60 行c-btn--secondary次按钮浅色填充带一层0 1px 2px rgba(16, 24, 40, 0.1)的细微阴影hover 背景切换为--secondary-button-hover-color第 62-70 行c-btn--ghost幽灵按钮无填充、透明背景仅保留1px solid var(--border-color)边框文字颜色继承正文色--body-text-colorhover 时边框色切换为链接色--link-color第 72-79 行。4.2 基础类.c-btn的公共样式所有按钮共享.c-btn基础样式buttons.scss 第 12-33 行字号var(--step-0)、字重 500、圆角var(--border-radius)内边距0.75em 1.125em采用em相对单位保证按钮随字号缩放inline-flexalign-items/justify-content: center居中内容background-color与border-color均带有0.2s linear的过渡动画按钮内 SVG 图标颜色继承文字色svg { color: inherit; }。此外还提供两个扩展类第 35-51 行.c-btn--large放大字号与内边距的尺寸变体和.c-btn--blockdisplay: flex; width: 100%的块级全宽变体针对a.c-btn链接额外取消了文本下划线并允许内容换行flex-wrap: wrap; gap: 0.5rem便于图标加文字的排版。4.3 颜色全部来自设计令牌按钮的配色不是硬编码色值而是统一引用 CSS 自定义属性design tokens。例如 themes.scss 第 65-70 行定义了主/次按钮的颜色令牌--primary-button-background-color: var(--color-primary-800); --primary-button-hover-color: var(--color-primary-900); --primary-button-text-color: #fff; --secondary-button-background-color: var(--color-primary-50); --secondary-button-hover-color: var(--color-primary-100); --secondary-button-text-color: var(--color-brand);而--border-radius这类全局令牌在 ui.scss 中定义为0.5rem。由于按钮颜色全部经由令牌间接引用themes.scss 中还根据明暗主题重新赋值--border-color等因此整个站点切换深色/浅色主题时按钮外观会自动适配无需修改任何组件代码——这也是组件库强调样式与主题解耦的直接体现。五、组件库的组装机制与使用建议5.1 宏的挂载与注册button.macro.html是纯宏文件只定义{%- macro button(...) -%}由 _component.njk 提供的通用加载器按名称动态引入{% macro component(name, params) %} {% include ./ name .macro.html ignore missing %} {% endmacro %}这意味着组件库中的任何.macro.html文件都可以通过component(button, {...})的方式间接调用也可以在单个页面里直接{% from components/button.macro.html import button %}精确导入。文档站其他页面中npm_tabs.macro.html、npx_tabs.macro.html、hero.macro.html、navigation.html等组件都在实际使用button宏或与之共享的c-btn样式体系例如导航中的Get Started类入口、代码标签切换按钮等均复用同一套组件。5.2 实战建议基于组件源码与文档在 ESLint 文档站场景下建议这样使用站内跳转、下载链接如指向规则页、集成教程页一律用默认link行为并显式传url保证语义为链接、可被搜索引擎索引表单提交、交互动作如展开/收起、切换显式传behavior: action让宏输出button typebutton视觉层级页面主行动点用primary次要操作与了解更多类入口用secondary或ghost层级关系清晰注意action下url会被忽略也不要依赖缺省文案——生产页面务必传text。组件库中还有alert提示条等组件与按钮共用圆角、边框等令牌见 alert.scss如需在页面中组合提示条 行动按钮的布局可参照同一套令牌体系保持一致观感。六、总结ESLint 官网的button组件用不到 30 行的 Nunjucks 宏就优雅地解决了按钮语义这一常见难题behavior决定button还是atype决定三种视觉层级颜色与圆角全部走设计令牌从而天然适配主题切换。阅读本指南后你既可以直接在 ESLint 文档站的任何页面按 buttons.md 的语法渲染按钮也可以把宏 令牌 SCSS 修饰类这套组件化思路迁移到自己的 11ty/Nunjucks 项目中。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 ESLint 官网组件库指南：button 按钮宏（Macro）的类型、行为与源码实现
ESLint 官网组件库指南button 按钮宏Macro的类型、行为与源码实现【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslintESLint 官方文档站点docs/是一套基于 Eleventy11ty与 Nunjucks 模板构建的静态站点其组件库文档专门讲解如何通过button宏在页面中渲染按钮。本文以该组件文档为主体结合仓库内真实的宏实现、SCSS 样式与设计令牌源码完整讲解三种按钮类型、action/link两种行为语义、调用语法与底层渲染原理帮助你在 ESLint 文档站或同类 11ty 项目中正确、可复用地上手该组件。一、组件定位与核心设计思想按钮组件位于docs/src/library/组件库中与alert、code-tabs、link-card等组件并列是 ESLint 文档站组件库页面渲染入口permalink为/component-library/index.html的组成部分。该库中的每个组件都通过 library.json 声明布局与输出路径{ layout: components.html, permalink: /component-library/{{ page.fileSlug }}.html }按钮组件的设计遵循两条核心原则三种视觉类型primary主按钮、secondary次按钮、ghost幽灵按钮样式既可作用于真正的button也可作用于长得像按钮的a链接。语义由行为决定通过behavior参数区分执行动作与跳转链接两种语义从而渲染出正确的 HTML 语义元素——执行动作用button跳转链接用a。这一设计避免了用链接冒充按钮或用按钮冒充链接的可访问性陷阱文档站中大量按钮既可能是表单提交/交互动作也可能是指向规则页、集成页的入口同一套样式配合两种语义输出既保证了视觉统一也保证了屏幕阅读器与搜索引擎能正确理解元素语义。二、快速上手宏的导入与基础调用在任意需要渲染按钮的页面中首先要导入button宏。文档给出的标准写法是!-- 在需要渲染按钮的页面中导入宏 -- {% from components/button.macro.html import button %} !-- 使用宏behavior 为 action渲染为 button typebutton -- { { button({ behavior: action, type: primary, text: Do Something }) } } !-- 省略 behavior默认渲染为 a 链接样式的按钮 -- { { button({ type: primary, text: Go somewhere, url: /url/to/somewhere/ }) } }文档示例中{ {与} }之间的空格是 Markdown 代码块为转义 Nunjucks 模板语法所做的处理实际模板中直接写{{ ... }}即可。可以看出调用形态是一个 Nunjucks 宏 一个参数对象核心参数有三个参数取值说明behavioraction|link默认决定渲染语义action渲染button typebuttonlink渲染a href...typeprimary|secondary|ghost决定视觉类型映射到c-btn--primary/secondary/ghost样式类text任意字符串按钮上显示的文本url任意 URL仅link行为下使用作为a的href值三、行为语义action与link的差异这是该组件最关键的语义设计点。根据 button.macro.html 的完整实现共 26 行宏的分支逻辑非常清晰宏签名button(behaviorlink, params) ├─ 若 params.behavior action │ └─ 渲染 button typebutton classc-btn [c-btn--primary|secondary|ghost]text/button └─ 否则默认 link └─ 渲染 a hrefparams.url classc-btn [c-btn--primary|secondary|ghost]text/a从源码结构看有三个值得注意的细节behavior的默认值是link当调用时不传behavior宏默认渲染a标签即看起来像按钮的链接。这与文档将默认行为定义为链接的描述完全一致。text缺省时有兜底文案action行为下缺省文本为This is a buttonlink行为下缺省文本为This is a link styled like a button。因此组件文档的示例中第一个示例button({ behavior: action, type: primary })未传text渲染出的就是一句默认占位文案。url只在link分支被使用如果以action行为传入url该参数会被忽略反之若以link行为渲染却不提供url会得到href为空字符串的链接。宏内部通过 Nunjucks 的{% if %}/{% else %}与{%- if %}条件分支输出不同标签同时按params.type拼接对应的修饰类名最终统一落在基础类c-btn上。整个组件只有一个宏、零 JS 逻辑完全依赖模板层完成语义分发。四、三种视觉类型与样式令牌4.1 样式类与外观差异三种类型分别对应 buttons.scss 中的三个修饰类c-btn--primary主按钮实底填充使用--primary-button-background-color背景与--primary-button-text-color文字色hover 时背景切换为--primary-button-hover-color见 buttons.scss 第 53-60 行c-btn--secondary次按钮浅色填充带一层0 1px 2px rgba(16, 24, 40, 0.1)的细微阴影hover 背景切换为--secondary-button-hover-color第 62-70 行c-btn--ghost幽灵按钮无填充、透明背景仅保留1px solid var(--border-color)边框文字颜色继承正文色--body-text-colorhover 时边框色切换为链接色--link-color第 72-79 行。4.2 基础类.c-btn的公共样式所有按钮共享.c-btn基础样式buttons.scss 第 12-33 行字号var(--step-0)、字重 500、圆角var(--border-radius)内边距0.75em 1.125em采用em相对单位保证按钮随字号缩放inline-flexalign-items/justify-content: center居中内容background-color与border-color均带有0.2s linear的过渡动画按钮内 SVG 图标颜色继承文字色svg { color: inherit; }。此外还提供两个扩展类第 35-51 行.c-btn--large放大字号与内边距的尺寸变体和.c-btn--blockdisplay: flex; width: 100%的块级全宽变体针对a.c-btn链接额外取消了文本下划线并允许内容换行flex-wrap: wrap; gap: 0.5rem便于图标加文字的排版。4.3 颜色全部来自设计令牌按钮的配色不是硬编码色值而是统一引用 CSS 自定义属性design tokens。例如 themes.scss 第 65-70 行定义了主/次按钮的颜色令牌--primary-button-background-color: var(--color-primary-800); --primary-button-hover-color: var(--color-primary-900); --primary-button-text-color: #fff; --secondary-button-background-color: var(--color-primary-50); --secondary-button-hover-color: var(--color-primary-100); --secondary-button-text-color: var(--color-brand);而--border-radius这类全局令牌在 ui.scss 中定义为0.5rem。由于按钮颜色全部经由令牌间接引用themes.scss 中还根据明暗主题重新赋值--border-color等因此整个站点切换深色/浅色主题时按钮外观会自动适配无需修改任何组件代码——这也是组件库强调样式与主题解耦的直接体现。五、组件库的组装机制与使用建议5.1 宏的挂载与注册button.macro.html是纯宏文件只定义{%- macro button(...) -%}由 _component.njk 提供的通用加载器按名称动态引入{% macro component(name, params) %} {% include ./ name .macro.html ignore missing %} {% endmacro %}这意味着组件库中的任何.macro.html文件都可以通过component(button, {...})的方式间接调用也可以在单个页面里直接{% from components/button.macro.html import button %}精确导入。文档站其他页面中npm_tabs.macro.html、npx_tabs.macro.html、hero.macro.html、navigation.html等组件都在实际使用button宏或与之共享的c-btn样式体系例如导航中的Get Started类入口、代码标签切换按钮等均复用同一套组件。5.2 实战建议基于组件源码与文档在 ESLint 文档站场景下建议这样使用站内跳转、下载链接如指向规则页、集成教程页一律用默认link行为并显式传url保证语义为链接、可被搜索引擎索引表单提交、交互动作如展开/收起、切换显式传behavior: action让宏输出button typebutton视觉层级页面主行动点用primary次要操作与了解更多类入口用secondary或ghost层级关系清晰注意action下url会被忽略也不要依赖缺省文案——生产页面务必传text。组件库中还有alert提示条等组件与按钮共用圆角、边框等令牌见 alert.scss如需在页面中组合提示条 行动按钮的布局可参照同一套令牌体系保持一致观感。六、总结ESLint 官网的button组件用不到 30 行的 Nunjucks 宏就优雅地解决了按钮语义这一常见难题behavior决定button还是atype决定三种视觉层级颜色与圆角全部走设计令牌从而天然适配主题切换。阅读本指南后你既可以直接在 ESLint 文档站的任何页面按 buttons.md 的语法渲染按钮也可以把宏 令牌 SCSS 修饰类这套组件化思路迁移到自己的 11ty/Nunjucks 项目中。【免费下载链接】eslintFind and fix problems in your JavaScript code.项目地址: https://gitcode.com/GitHub_Trending/es/eslint创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考