离职 光谱网络组件 这是一个面向未来的项目,旨在围绕网络组件开发Adobe Spectrum设计语言,ES-Modules,以及现代浏览器标准.

珊瑚光谱

遵循Spectrum设计模式的JavaScript Web组件库.

重要

请跟随 提交信件公约为了便于遵守,建议使用 (简体中文)。 。 。 .

显示大小写

构成部分实例

将所有组成部分都付诸行动。 这些只是例子,并不涵盖所有的情况.

API 参考文献

覆盖所有组件的 API , 包括属性、 事件等 .

游戏场

与最新Coral Spectrum版本的实验和预览代码. 代码可以通过复制粘贴URL来共享. 游乐场被放入沙箱,以防止安全风险.

光谱

当前默认主题是执行 光谱 设计 adobe的设计系统。 Spectrum提供元素和工具 帮助产品团队工作更多 提高Adobe的应用的凝聚力.

珊瑚光谱利用 光谱 CSS 框架到样式 构成部分,包括 光谱 SVG 图标。 。 。 .

Angular, React, Vue.js 兼容性

我们的愿景是通过提供完整,易于使用的 HTML 组件库来创建一致的 Adobe 体验 兼容 主要框架。 。 。 .

为了实现这一目标,珊瑚光谱来源于 自定义元素 v1 与 本地支助 感谢浏览器供应商之间的广泛合作. 使用自定义元素使我们有能力向消费者隐瞒许多实施细节,从而允许很多 更自由地改变支持这些要素的基本标记. 这使得暴露的API变小而更清晰,导致更新珊瑚光谱所需的风险降低 引入破解更改.

浏览器支持

Coral Spectrum 旨在支持以下浏览器:

• 颜色( 最新)
• 萨法里(最新)
• 火狐( 最新)
• 边缘( 最新)
• IE 11 请检查URL=值 (帮助)
• iOS 7+ (英语)
• 安卓4.4+ (中文(简体) )

主题( 浅、 暗、 最浅、 最暗)

默认的珊瑚光谱样式从 coral--light, (中文(简体) ), coral--lightest, (中文(简体) ), coral--dark 财务报告和审定财务报表 coral--darkest ,因此该类必须在更高一级指定.

<body class="coral--light">
    <!-- light theme -->
    <div class="container"></div>
    <div class="coral--dark">
        <!-- dark theme -->
    </div>
</body>

大规模支助

对于可移动性,Spectrum具有更大的规模,使得所有控件上都能有更大的自来水目标. 班级为了让它成为可能 coral--large 必须在更高一级说明.

<body class="coral--light coral--large">
   <!-- light theme -->
   <!-- large scale -->
</body>

内建无障碍和键盘支持

若您持有政府合同, 申请无法进入, 可能意味着数千美元的罚款. 这也意味着通过使你的应用完全无法对他们使用来疏远整个社会阶层. 为了帮助你避免这种情况,我们规定每个珊瑚光谱成分都应该可以访问.

国际化支助

珊瑚光谱为其弦乐国际化提供了强大的内部系统. 这是通过Adobe内部程序完成的.

支持的语言有:

使用珊瑚光谱

最容易通过CDN

使用 Coral Spectrum 的最简单方法是使用 CDN, 例如将这些行复制到您的 html 文件 .

<head>
  <!-- 4.x.x means latest major 4 version release, adjust version if you need a specific one -->
  <link rel="stylesheet" href="https://unpkg.com/@adobe/[email protected]/dist/css/coral.min.css">
  <script src="https://unpkg.com/@adobe/[email protected]/dist/js/coral.min.js" data-coral-icons-external="js"></script>
</head>
<body class="coral--light">
  <button is="coral-button" icon="add">My Button</button>
</body>

复制分发文件

您可以下载已包装/已发布版本 @adobe/coral-spectrum 从 npm :

npm pack @adobe/coral-spectrum

解开下载的软件包后 找找 dist 文件夹和 :

• 复制文件从 dist/css, (中文(简体) ), dist/js 财务报告和审定财务报表 dist/resources 在你的项目.
• 引用页面中的文件, 例如

<link rel="stylesheet" href="css/coral.min.css">
<script src="js/coral.min.js"></script>

包括装有包裹的全图书馆

npm install @adobe/coral-spectrum

然后在主js中,使用:

require("@adobe/coral-spectrum/dist/js/coral.js");
require("@adobe/coral-spectrum/dist/css/coral.css");

只包括您需要的组件

如果您的工程只需要几个组件, 您可以使用模块捆绑器 网络软件包 只导入所需的组件. 以下是Webpack配置的例子:

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'production',
  devtool: 'source-map',
  entry: './src/index.js',
  output: {
    filename: 'bundle.min.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'icons/[name].[ext]'
            },
          },
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.min.css'
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /style\.min\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      }
    })
  ]
};

在你身边 index.js 文件,您可以导入并使用单个组件 :

// Import Component
import {Button} from '@adobe/coral-spectrum/coral-component-button';

const button = new Button();

如果不显示图标,请确保设置样式和图标的路径,例如:

<link rel="stylesheet" href="dist/style.min.css">
<script data-coral-icons="dist/icons/" src="dist/bundle.min.js"></script>

如果图标仍未显示, 您可以尝试将它们设置为内线显示 SVG,而不是外部资源. 珊瑚光谱将默认为外部 iE11以外的浏览器上的资源。 使用上一个示例,此选项 可设置为:

<link rel="stylesheet" href="dist/style.min.css">
<script data-coral-icons="dist/icons/" data-coral-icons-external="off" src="dist/bundle.min.js"></script>

说明: 日历、时钟和取相器组件将起杠杆作用 一分钟。 js 如果有的话.

捐款

看看这个 提供指南。 。 。 .

建筑和测试

先运行以下命令 :

npm install -g gulp-cli
npm install

您可以使用下面的任务开始 :

• gulp 生成 dist 文件夹并运行 dev 服务器 localhost:9001 默认.
• gulp build 生成 dist 文件夹.
• gulp dev 运行 dev 服务器 localhost:9001 默认.
• gulp test 进行测试。 测试报告在 dist/coverage。 。 。 .
• gulp docs 用于构建文档 dist/documentation。 。 。 .
• gulp axe 运行无障碍检查.

每个组件可以独立建设,例如. cd coral-component-button && gulp。 。 。 .

释放

自动释放 :

将公关合并为主机将触发自动放出Github Action. 紧随其后 Angular 提交信件常规建议使用 (简体中文) 以轻易地犯罪. 仅 修补 财务报告和审定财务报表 功绩 可以触发释放。 如果你想跳过释放 在承诺消息中添加 [skip release] 或 [release swop]

手动释放 :

我们目前正在发布这个包 npm。 。 。 .

在开始前,用以下命令来清理你的依赖:

git checkout master
rm -rf node_modules && npm install

然后运行 gulp release。将要求您按下该版本(默认情况下的微缩版)。 珊瑚光谱在后方 语义版本 (有的补丁,有的是小的,有的是主的).

命令将注意增加、标记版本并发布软件包 npm。 。 。 .

如果一切顺利,快跑 gulp deploy 将文件公布于 gh-pages 其他分支返回版本的凸起.