@deriv-com/dds-市场营销
衍生设计系统用于销售地点的部件和设计标志——着陆 页面,定价,注册.
和AI探员一起工作? 指着它 AGENTS.md 本包中。 没错
下面所有东西的简短版本, 并说其中哪一个 .llm/ 要打开的文档.
它有两种组成部分: 核心项目 组件 – 按钮、 Navbar、 卡、 链接、 窗体
管制和其他——和 块,这些波段的一页从: LandingHero, (中文(简体) ),
ProductHero 财务报告和审定财务报表 PageHeader 打开一页,以及 FeatureSplit, (中文(简体) ), FeatureBullets 财务报告和审定财务报表
FeatureScroll 里面的章节. AGENTS.md 以行列出其中每一个
{\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}什么时候才能找到 产品应用程序想要
@deriv-com/dds-product。 。 。 .
安装
npm install @deriv-com/dds-marketing
反应 19 是一个对等依赖, 因此, 如果您的应用程序还没有安装的话, 请同时安装它 内容:
npm install react react-dom
奎尔图标集随包而来——没有别的东西可以安装.
使用
在您的应用程序根部导入样式表一次 。 它定义了这个软件包的每一个符号 部件被束缚——没有它,它们就变成无花样.
import '@deriv-com/dds-marketing/marketing.css'
那就放进去 data-dds-context="marketing" 任何包接组件的软件根,或
如果市场营销和产品都在同一页上 组件规则仅公布
在这个范围,因为两个包 发射类喜欢 .dds-button 一个会
否则,画另一个。 没有它,组件 也变得没有风格.
然后按名称导入组件 :
import { Button, LandingHero } from '@deriv-com/dds-marketing'
export function Home() {
return (
<div data-dds-context="marketing">
<LandingHero
title="Trade smarter with Deriv"
description="Access 250+ markets with tight spreads and powerful tools."
actions={<Button href="/signup">Get started free</Button>}
/>
</div>
)
}
每个组件都带了自己的样式表,所以不需要其他的导入.
图标
每个 奎尔 图标被再导出
从 @deriv-com/dds-marketing/icons,由奎尔给出的名字:
import { Icon } from '@deriv-com/dds-marketing'
import { CircleCheckSolidIcon } from '@deriv-com/dds-marketing/icons'
import { UsdIcon } from '@deriv-com/dds-marketing/icons/currency'
<Icon label="Verified"><CircleCheckSolidIcon /></Icon>
每个奎尔集团都有自己的子路径—— accounts, (中文(简体) ), app-stores, (中文(简体) ), currency, (中文(简体) ), flag, (中文(简体) ),
illustrative, (中文(简体) ), markets, (中文(简体) ), social, (中文(简体) ), system 财务报告和审定财务报表 trade生产造树震动
窗体到您使用的图标; dev 服务器没有, 因此组子路径会使其无法加载
全部 ~1,850 一次。 Raw SVG 文件不再导出; 对于这些文件, 安装
@deriv-com/quill-icons-web 并使用 svg/ 文件夹.
一个已经从 @deriv-com/quill-icons-web 继续工作 一样
模块,因此在您迁移时可以将两者混合在一起,但当您迁移时可以放弃直接依赖
已完成, 或把它固定在这个软件包使用的范围上, 所以应用程序不会捆绑两个副本 .
字体
该系统的设计对象是: 间 (所有文字)和
红帽单曲 (代码).
marketing.css 命名它们但不能携带它们——如果没有装入字体,则每个角色
悄悄倒回系统排字面, 任何重量缺失的页面会被伪造
由浏览器。 从两道中选择一条:
让包裹供应他们. 下一个导入 marketing.css数字 :
import '@deriv-com/dds-marketing/fonts.css'
import '@deriv-com/dds-marketing/marketing.css'
这个自主机两个来自包的面 (可变重 WOFF2, 子集每个脚本,
~260 KB 在所有脚本中总计——一个页面只下载其文本使用的子集. 两者
字体在 SIL 开口字体许可证下; 许可证 dist/fonts/。 。 。 .
自己装上. 如果您的应用程序已经主机字体 - next/font,字体来源,或
你们自己 @font-face - 跳过 fonts.css 把两个家庭变量指向什么
已装入 :
:root {
--font-family-sans: var(--your-inter-variable), system-ui, sans-serif;
--font-family-mono: var(--your-mono-variable), ui-monospace, monospace;
}
每个类型的角色都从这两个变量中读取其家族,所以这改变了整个角色的取向 系统即刻。 Inter 装入重量400-700(一个文件包含一个可变字体); 缺失的重量不会明显回落——浏览器合成出粗体.
光和暗, 和风景轴
marketing.css 定义两个主题。 黑暗被选中 data-theme="dark" 在任意
祖先——通常 <html>数字 :
<html data-theme="dark">
<body>
<div data-dds-context="marketing"> <!-- dark, from here down -->
主题属性和上下文属性是独立的,主题可能坐上 范围,在同一要素上,或在其下。 没有提供者,也没有第二次进口.
营销确实带有移动取景器轴:下面有七个角色有不同的值
768px,自动应用并压倒 data-dds-viewport="mobile" 或者说
"desktop" 当页面使设备框架在宽的窗口内时.
文档
AGENTS.md——正门:设置,穿插组件的规则,以及 此软件包目前拥有什么 ..llm/rules.md——任何单一组成部分都不能说明的限制因素..llm/tokens.md——符号词汇,包括上方的移动取景器轴.
版本
预1.0. 小版本可能包含组件表面结算时的断裂变化; 如果这对你很重要的话,请刻出准确的版本.