mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-19 13:41:21 +08:00
feat: add tocs feature & fix page element generation issue (#9). dd8a3cb26d
This commit is contained in:
jaywcjlove
@ -1,6 +1,6 @@
|
||||
<!doctype html><html lang="en" data-color-mode="dark"><head></head><body>
|
||||
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en" data-color-mode="dark">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>styled-components 备忘清单
|
||||
& styled-components cheatsheet & Quick Reference</title>
|
||||
@ -9,8 +9,8 @@
|
||||
<meta keywords="Quick,Reference,cheatsheet,styled-components">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="../style/style.css">
|
||||
|
||||
<nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||||
</head>
|
||||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||||
@ -39,7 +39,9 @@
|
||||
</svg>
|
||||
<a aria-hidden="true" tabindex="-1" href="#styled-components-备忘清单"><span class="icon icon-link"></span></a>styled-components 备忘清单</h1><div class="wrap-body">
|
||||
<p>此快速参考备忘单提供了使用 CSS in JS 工具的各种方法。</p>
|
||||
</div></header><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#快速开始">快速开始</a><a aria-hidden="true" class="leve3 tocs-link" href="#根据-props-适配">根据 Props 适配</a><a aria-hidden="true" class="leve3 tocs-link" href="#扩展样式">扩展样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#扩展样式改变标签-as">扩展样式改变标签 (as)</a><a aria-hidden="true" class="leve3 tocs-link" href="#自定义组件as">自定义组件(as)</a><a aria-hidden="true" class="leve3 tocs-link" href="#样式化任何组件">样式化任何组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#在-render-之外定义-styled-组件">在 render 之外定义 Styled 组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#传入值">传入值</a><a aria-hidden="true" class="leve3 tocs-link" href="#样式对象">样式对象</a><a aria-hidden="true" class="leve3 tocs-link" href="#cssmodules--styled">CSSModules => styled</a><a aria-hidden="true" class="leve4 tocs-link" href="#-与下面-styled-写法等效-">👇👇 与下面 写法等效 👇👇</a><a aria-hidden="true" class="leve3 tocs-link" href="#伪元素伪选择器和嵌套">伪元素、伪选择器和嵌套</a><a aria-hidden="true" class="leve3 tocs-link" href="#改变-styled-组件样式">改变 styled 组件样式</a><a aria-hidden="true" class="leve3 tocs-link" href="#全局样式-createglobalstyle">全局样式 createGlobalStyle</a><a aria-hidden="true" class="leve3 tocs-link" href="#classname-使用">className 使用</a><a aria-hidden="true" class="leve3 tocs-link" href="#共享样式片段">共享样式片段</a><a aria-hidden="true" class="leve3 tocs-link" href="#class-组件样式定义">Class 组件样式定义</a><a aria-hidden="true" class="leve3 tocs-link" href="#附加额外的-props">附加额外的 Props</a><a aria-hidden="true" class="leve3 tocs-link" href="#覆盖-attrs">覆盖 .attrs</a><a aria-hidden="true" class="leve3 tocs-link" href="#动画">动画</a><a aria-hidden="true" class="leve3 tocs-link" href="#isstyledcomponent">isStyledComponent</a><a aria-hidden="true" class="leve3 tocs-link" href="#themeconsumer">ThemeConsumer</a><a aria-hidden="true" class="leve2 tocs-link" href="#typescript">TypeScript</a><a aria-hidden="true" class="leve3 tocs-link" href="#安装-1">安装</a><a aria-hidden="true" class="leve3 tocs-link" href="#自定义-props">自定义 Props</a><a aria-hidden="true" class="leve3 tocs-link" href="#简单的-props-类型定义">简单的 Props 类型定义</a><a aria-hidden="true" class="leve3 tocs-link" href="#禁止转移到子组件">禁止转移到子组件($)</a><a aria-hidden="true" class="leve3 tocs-link" href="#函数组件类型继承">函数组件类型继承</a><a aria-hidden="true" class="leve2 tocs-link" href="#react-native">React Native</a><a aria-hidden="true" class="leve3 tocs-link" href="#基础实例">基础实例</a><a aria-hidden="true" class="leve3 tocs-link" href="#react-native-中写-css">React Native 中写 CSS</a><a aria-hidden="true" class="leve2 tocs-link" href="#高级用法">高级用法</a><a aria-hidden="true" class="leve3 tocs-link" href="#主题化">主题化</a><a aria-hidden="true" class="leve3 tocs-link" href="#功能主题">功能主题</a><a aria-hidden="true" class="leve3 tocs-link" href="#通过-withtheme-高阶组件">通过 withTheme 高阶组件</a><a aria-hidden="true" class="leve3 tocs-link" href="#usecontext-钩子">useContext 钩子</a><a aria-hidden="true" class="leve3 tocs-link" href="#usetheme-自定义钩子">useTheme 自定义钩子</a><a aria-hidden="true" class="leve3 tocs-link" href="#主题-props">主题 props</a><a aria-hidden="true" class="leve3 tocs-link" href="#refs">Refs</a><a aria-hidden="true" class="leve3 tocs-link" href="#特异性问题">特异性问题</a><a aria-hidden="true" class="leve4 tocs-link" href="#解决方案">解决方案</a><a aria-hidden="true" class="leve3 tocs-link" href="#themeprovider">ThemeProvider</a><a aria-hidden="true" class="leve3 tocs-link" href="#shouldforwardprop">shouldForwardProp</a></div></div><div class="h1wrap-body"><div class="wrap"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||||
</div></div><div class="h2wrap-body"><div class="wrap"><div class="wrap-header h3wrap"><h3 id="安装"><a aria-hidden="true" tabindex="-1" href="#安装"><span class="icon icon-link"></span></a>安装</h3><div class="wrap-body">
|
||||
<p><a href="https://styled-components.com">Styled Components</a> 是增强 CSS 在 React 组件系统样式的 CSS in JS 的最佳实践。</p>
|
||||
<ul>
|
||||
@ -105,7 +107,7 @@
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">Normal</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">primary</span><span class="token punctuation">></span></span><span class="token plain-text">Primary</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">primary</span><span class="token punctuation">></span></span><span class="token plain-text">Primary</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
@ -117,7 +119,7 @@
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token number">3</span><span class="token unit">px</span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token comment">// 基于 Button 的新组件，但具有一些覆盖样式</span>
|
||||
</span><span class="code-line highlight-line"><span class="token keyword">const</span> <span class="token maybe-class-name">TomatoButton</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Button</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">TomatoButton</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Button</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">tomato</span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">border-color</span><span class="token punctuation">:</span> <span class="token color">tomato</span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
@ -146,10 +148,10 @@
|
||||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Demo</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">普通按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> 按钮样式的链接
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TomatoButton</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TomatoButton</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>a<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> 番茄按钮样式的链接
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TomatoButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -176,7 +178,7 @@
|
||||
</span><span class="code-line"><span class="token function">render</span><span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">普通按钮</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line highlight-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">as</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">ReversedButton</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">as</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">ReversedButton</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> 具有普通按钮样式的自定义按钮
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Button</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
@ -198,7 +200,7 @@
|
||||
<!--rehype:style=background:#d7a100;-->
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Box</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css"><span class="token comment">/* ... */</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Wrapper</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> message <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token comment">// ⚠️ 不能在这里定义 styled 组件</span>
|
||||
</span><span class="code-line"> <span class="token comment">// ⚠️ 不能在这里定义 styled 组件</span>
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Box</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>message<span class="token punctuation">}</span><span class="token plain-text">
|
||||
@ -210,8 +212,8 @@
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="传入值"><a aria-hidden="true" tabindex="-1" href="#传入值"><span class="icon icon-link"></span></a>传入值</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Input</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">input</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>
|
||||
</span></span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token parameter">props</span> <span class="token arrow operator">=></span>
|
||||
</span></span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> props<span class="token punctuation">.</span><span class="token property-access">inputColor</span> <span class="token operator">||</span> <span class="token string">"palevioletred"</span>
|
||||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token parameter">props</span> <span class="token arrow operator">=></span>
|
||||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> props<span class="token punctuation">.</span><span class="token property-access">inputColor</span> <span class="token operator">||</span> <span class="token string">"palevioletred"</span>
|
||||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token interpolation-punctuation punctuation">}</span></span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token color">papayawhip</span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
@ -224,17 +226,17 @@
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">defaultValue</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>@geelen<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">inputColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rebeccapurple<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">inputColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>rebeccapurple<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="样式对象"><a aria-hidden="true" tabindex="-1" href="#样式对象"><span class="icon icon-link"></span></a>样式对象</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">PropsBox</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token method function property-access">div</span><span class="token punctuation">(</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token literal-property property">background</span><span class="token operator">:</span> props<span class="token punctuation">.</span><span class="token property-access">background</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">background</span><span class="token operator">:</span> props<span class="token punctuation">.</span><span class="token property-access">background</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token string">'50px'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'50px'</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'12px'</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token string">'12px'</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p>在组件中使用</p>
|
||||
@ -242,7 +244,7 @@
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">PropsBox</span></span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">background</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -314,19 +316,19 @@
|
||||
<!--rehype:wrap-class=col-span-2-->
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Thing</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token punctuation">.</span><span class="token method function property-access">attrs</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token comment">/* props */</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">tabIndex</span><span class="token operator">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> color: blue;
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> &:hover { /* <Thing> 悬停时 */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> &:hover { /* <Thing> 悬停时 */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> color: red;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> & ~ & { /* <Thing> 作为 <Thing> 的兄弟，但可能不直接在它旁边 */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> & ~ & { /* <Thing> 作为 <Thing> 的兄弟，但可能不直接在它旁边 */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> background: tomato;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> & + & { /* <Thing> 旁边的 <Thing> */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> & + & { /* <Thing> 旁边的 <Thing> */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> background: lime;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> &.something { /* <Thing> 标记有一个额外的 CSS 类 “.something” */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> &.something { /* <Thing> 标记有一个额外的 CSS 类 “.something” */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> background: orange;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> .something-else & { /* <Thing> 在另一个标记为 “.something-else” 的元素中 */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> .something-else & { /* <Thing> 在另一个标记为 “.something-else” 的元素中 */
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> border: 1px solid;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> }
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
@ -360,7 +362,7 @@
|
||||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword">case</span> <span class="token string">"dark"</span><span class="token operator">:</span>
|
||||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword control-flow">return</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">white</span><span class="token punctuation">;</span>
|
||||
</span></span></span></span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token selector"><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">Input</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token pseudo-class">:checked</span> <span class="token combinator">+</span> &&</span> <span class="token punctuation">{</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token selector"><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">Input</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token pseudo-class">:checked</span> <span class="token combinator">+</span> &&</span> <span class="token punctuation">{</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
@ -368,7 +370,7 @@
|
||||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token keyword control-flow">return</span> css<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">black</span><span class="token punctuation">;</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token selector"><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">Input</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token pseudo-class">:checked</span> <span class="token combinator">+</span> &&</span> <span class="token punctuation">{</span>
|
||||
</span></span></span></span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
|
||||
</span></span></span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"><span class="token template-string"><span class="token css language-css"> </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span></span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"><span class="token interpolation"> <span class="token punctuation">}</span>
|
||||
@ -395,7 +397,7 @@
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="全局样式-createglobalstyle"><a aria-hidden="true" tabindex="-1" href="#全局样式-createglobalstyle"><span class="icon icon-link"></span></a>全局样式 createGlobalStyle</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||||
</span></span><span class="code-line"><span class="token imports"> styled<span class="token punctuation">,</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token imports"> createGlobalStyle
|
||||
</span></span><span class="code-line"><span class="token imports"> createGlobalStyle
|
||||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'styled-components'</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Thing</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">div</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
@ -403,7 +405,7 @@
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">blue</span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line highlight-line"><span class="token keyword">const</span> <span class="token maybe-class-name">GlobalStyle</span> <span class="token operator">=</span> createGlobalStyle<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">GlobalStyle</span> <span class="token operator">=</span> createGlobalStyle<span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token selector">div<span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token maybe-class-name">Thing</span><span class="token interpolation-punctuation punctuation">}</span></span></span> <span class="token punctuation">{</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">color</span><span class="token punctuation">:</span> <span class="token color">red</span><span class="token punctuation">;</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token punctuation">}</span>
|
||||
@ -464,7 +466,7 @@
|
||||
</span><span class="code-line"> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">className</span><span class="token punctuation">}</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">className</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">className</span><span class="token punctuation">}</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||||
@ -479,9 +481,9 @@
|
||||
</div></div></div><div class="wrap"><div class="wrap-header h3wrap"><h3 id="附加额外的-props"><a aria-hidden="true" tabindex="-1" href="#附加额外的-props"><span class="icon icon-link"></span></a>附加额外的 Props</h3><div class="wrap-body">
|
||||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">Input</span> <span class="token operator">=</span> styled<span class="token punctuation">.</span><span class="token property-access">input</span><span class="token punctuation">.</span><span class="token method function property-access">attrs</span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token arrow operator">=></span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 我们可以定义静态道具</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"text"</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token comment">// 或者我们可以定义动态的</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token literal-property property">size</span><span class="token operator">:</span> props<span class="token punctuation">.</span><span class="token property-access">size</span> <span class="token operator">||</span> <span class="token string">"1em"</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">size</span><span class="token operator">:</span> props<span class="token punctuation">.</span><span class="token property-access">size</span> <span class="token operator">||</span> <span class="token string">"1em"</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> color: palevioletred;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> font-size: 1em;
|
||||
@ -489,8 +491,8 @@
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> border-radius: 3px;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> /* 这里我们使用动态计算的 props */
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> margin: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
|
||||
</span></span></span><span class="code-line highlight-line"><span class="token template-string"><span class="token string"> padding: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> margin: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> padding: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span><span class="token parameter">props</span> <span class="token arrow operator">=></span> props<span class="token punctuation">.</span><span class="token property-access">size</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
<p>使用 <code>Input</code> 组件</p>
|
||||
@ -518,7 +520,7 @@
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token comment">// Input 的attrs会先被应用，然后这个 attrs obj</span>
|
||||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">PasswordInput</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Input</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">attrs</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||||
</span><span class="code-line highlight-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"password"</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"> <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">"password"</span><span class="token punctuation">,</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token css language-css">
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token comment">/* 同样，border 将覆盖 Input 的边框 */</span>
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token css language-css"> <span class="token property">border</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token unit">px</span> solid <span class="token color">aqua</span><span class="token punctuation">;</span>
|
||||
@ -529,13 +531,13 @@
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Input</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>更大的文本输入<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2em<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2em<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token comment">/*⚠️ 仍然可以使用Input中的 size attr*/</span><span class="token punctuation">}</span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">PasswordInput</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>更大的密码输入<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line highlight-line"><span class="token tag"> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2em<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2em<span class="token punctuation">"</span></span>
|
||||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
@ -646,7 +648,7 @@
|
||||
</span><span class="code-line"><span class="token keyword">import</span> <span class="token imports"><span class="token maybe-class-name">Header</span></span> <span class="token keyword">from</span> <span class="token string">'./Header'</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">interface</span> <span class="token class-name">ReHeader</span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line highlight-line"> $customColor<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"> $customColor<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||||
</span><span class="code-line">
|
||||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token maybe-class-name">ReHeader</span> <span class="token operator">=</span> <span class="token function">styled</span><span class="token punctuation">(</span><span class="token maybe-class-name">Header</span><span class="token punctuation">)</span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ReHeader</span></span><span class="token punctuation">></span></span><span class="token plain-text">`
|
||||
@ -665,12 +667,12 @@
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> height: 32px;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"> width: 32px;
|
||||
</span></span></span><span class="code-line"><span class="token template-string"><span class="token string"></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line highlight-line"><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ImageProps</span> <span class="token keyword">extends</span> <span class="token class-name">DetailedHTMLProps<span class="token operator"><</span>
|
||||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">interface</span> <span class="token class-name">ImageProps</span> <span class="token keyword">extends</span> <span class="token class-name">DetailedHTMLProps<span class="token operator"><</span>
|
||||
</span></span><span class="code-line"><span class="token class-name"> ImgHTMLAttributes<span class="token operator"><</span>HTMLImageElement<span class="token operator">></span><span class="token punctuation">,</span> HTMLImageElement
|
||||
</span></span><span class="code-line"><span class="token class-name"><span class="token operator">></span></span> <span class="token punctuation">{</span>
|
||||
</span><span class="code-line"> text<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||||
</span><span class="code-line highlight-line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Image</span><span class="token operator">:</span> <span class="token constant">FC</span><span class="token operator"><</span><span class="token maybe-class-name">PropsWithRef</span><span class="token operator"><</span><span class="token maybe-class-name">ImageProps</span><span class="token operator">>></span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line"><span class="token keyword">export</span> <span class="token keyword">const</span> <span class="token maybe-class-name">Image</span><span class="token operator">:</span> <span class="token constant">FC</span><span class="token operator"><</span><span class="token maybe-class-name">PropsWithRef</span><span class="token operator"><</span><span class="token maybe-class-name">ImageProps</span><span class="token operator">>></span> <span class="token operator">=</span> <span class="token punctuation">(</span>props<span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Img</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token spread"><span class="token punctuation">{</span><span class="token spread operator">...</span>props<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||||
</span></code></pre>
|
||||
@ -965,6 +967,7 @@
|
||||
if(('onhashchange' in window) && ((typeof document.documentMode==='undefined') || document.documentMode==8)) {
|
||||
window.onhashchange = function () {
|
||||
anchorPoint()
|
||||
updateAnchor()
|
||||
};
|
||||
}
|
||||
function anchorPoint() {
|
||||
@ -978,6 +981,25 @@ function anchorPoint() {
|
||||
}
|
||||
}
|
||||
anchorPoint();
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
function updateAnchor(element) {
|
||||
const anchorContainer = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||||
anchorContainer.forEach((tocanchor) => {
|
||||
tocanchor.classList.remove('is-active-link');
|
||||
});
|
||||
const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(window.location.hash)}']`);
|
||||
console.log('anchor', anchor)
|
||||
if (anchor) {
|
||||
anchor.classList.add('is-active-link');
|
||||
}
|
||||
}
|
||||
// toc 定位
|
||||
updateAnchor()
|
||||
const anchor = document.querySelectorAll('.menu-tocs .menu-modal a.tocs-link');
|
||||
anchor.forEach((item) => {
|
||||
item.addEventListener('click', (e) => {
|
||||
updateAnchor()
|
||||
})
|
||||
})
|
||||
</script></body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user