当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

carbon-components-angular

授权协议 Apache-2.0 License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 杜绍元
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

Carbon Components Angular

An Angular implementation of the Carbon Design System

Getting started

Assuming we're starting with a new @angular/cli project:

$ npx @angular/cli new my-project --style=scss
$ cd my-project
$ npm i --save carbon-components-angular carbon-components

Then we need to include carbon-components in src/styles.scss:

@import "~carbon-components/scss/globals/scss/styles.scss";

Note: For offline usage we'll need to set $font-path: '~carbon-components/src/globals/fonts'; at the very top of our src/styles.scss. This will copy the fonts to our dist folder upon successful build. If you like the fonts to be a part of your assets folder and not pollute the dist folder then copy the fonts from node_modules/carbon-components/src/globals/fonts into our app's src/assets/fonts folder and add $font-path: '/assets/fonts/'; at the very top of our src/styles.scss.

That's it! Now we can run npm start and start building out our application!

Note: This isn't the only way to bootstrap a carbon-components-angular application, but the combination of @angular/cli and the carbon-components scss is our recommended setup.

Support

Angular version support matrix:

Angular v3 v4 v5 (future release)
6
7
8
9
10
11

Carbon Components Angular version support matrix:

Carbon Components Angular version Community support Active support
v1
v2
v3
v4

Not supported versions: Out of support. We plan to support our latest, and previous release. Beyond that we make no guarantees of continued support - these include v1, v2

How to read this table:

  • Community support: We depend primarily on community issue reports, and contributions to help maintain our components. A version with only community support is especially reliant on contributions, though we will backport small fixes when applicable.
  • Active support: We will actively maintain and update these versions with new features, new components, bug fixes, and ensure it's compatible with the Carbon Design System and latest Angular versions

Contributing

IBMers contributing

If you are an IBMer, you must complete the steps at W3 Developer before contributing to any open source projects. See our contributing guidelines for more details.

Quickstart

  • fork IBM/carbon-components-angular and clone it locally
  • run npm install to grab all the dependencies, then npm run storybook to start storybook
  • if you are adding a component:
    • add a folder with your component code, styles, tests and story under src
    • export your module from index.ts
  • if you are contributing a fix:
    • add your fix, update the documentation as needed
    • consider adding or modifying a test case to cover the fix
  • follow the Angular style guide
  • be sure to run npm test and npm run lint to make sure the tests and linter pass
  • submit a PR

Pull request guidelines

  • Keep changes small and focused.
  • If you create a pull request and then realize it is not ready to be merged, prepend "WIP: " (For example, WIP: Fixed text overflow in accordion headers.) and assign a WIP label.
  • Include a description of changes
    • attach a screenshot (or a gif!) for design reference if needed
    • reference the related issue
      • "closes #123" or "fixes #123" will close issue #123 once the PR is merged
      • "issue #123" just references the issue. Only use this if you definitely need the issue to remain open.
    • @mention any specific other developers that need to be aware of the changes
  • add the "needs review" label along with any other relevant labels
  • link to code review checklist goes here

Issues submission guidelines

  • One issue per defect - do not open an issue that spans multiple defects
  • provide a descriptive title that mentions the component and version the issue covers
  • provide
    • version(s) affected
    • a description of the issue
    • steps taken to produce the issue
    • expected behaviour
    • current behaviour
    • screenshots if needed
    • relevant code snippets
    • links to application source code or running demo (Codesandbox is awesome for this!) (including connection/authentication information)
  • add relevant labels (bug, accessibility, design, discussion, feature, etc)
  • if you have a fix to contribute, assign yourself, otherwise leave unassigned

npm commands

To keep our build dependencies local we use npm scripts to run our webpack, gulp, and general build tasks. You should never install webpack or gulp globally as that will likely conflict with our version. You should never need to modify the build process to add a component or story.

  • npm run storybook to run storybook (port 6006)
  • npm run build to generate the dist
  • docs:build to build documentation
  • docs:server to build and run the documentation server
  • npm run lint to run tslint
  • npm test to run tests

Resources

Philosophy

  • Components should be the smallest unit of computation
    • Think in terms of pages and applications composed from a multitude of components rather than pages or applications as a single unit of computation
  • Components should delegate to the consumer whenever possible
    • The individual applications should be the single source of truth, and be able to create any UI from our building blocks
  • Components should do one thing, and do it well
    • This does not mean they should be over specialized, but rather focus on providing a single, core experience
  • Components should NOT maintain more state than absolutely necessary
    • Likewise, stateless components should be favored whenever possible
  • Components should NOT necessarily implement the style guide point-for-point, the guide simply provides guidance on overarching functionality, components should enable that and product specific designs without baking in extra functionality

Code of Conduct

Read our code of conduct here

 相关资料
  • 简介 你见过推特上面的 这 些 代码 图片 吗? 虽然这些代码图片给人印象深刻,但就审美程度来说还有可改进的地方。Carbon 可以很容易的为你的代码创建漂亮的图片。那么还等什么呢?用这个新学到的美化设计给你的 followers 秀一秀吧。 可以访问 carbon.now.sh或者浏览 博客文章 了解关于这个项目更多的内容。 特性 GitHub gist 导入. 只需要在 url 后面加上 gi

  • carbon 是一个轻量级、语义化、对开发者友好的Golang时间处理库,支持链式调用和gorm、xorm等主流orm。 安装使用 // 使用 github 库go get -u github.com/golang-module/carbonimport ( "github.com/golang-module/carbon")// 使用 gitee 库go get -u gitee.com/

  • vue-carbon,基于 vue 开发 material design 风格的移动端 WEB UI 库, 设计资源参考 CARBON FrameWork7。 安装 目前只使用 npm 安装,和使用 webpack 项目的应用 npm install vue-carbon --save import Vue from 'vue'import VueCarbon from 'vue-carbon'V

  • Carbon 是对 PHP 5.3+ 中的 DateTime 进行扩展的 PHP 库。 示例代码: printf("Right now is %s", Carbon::now()->toDateTimeString());printf("Right now in Vancouver is %s", Carbon::now('America/Vancouver'));  //implicit __t

  • Carbon Forum,一个高性能的、高安全性的、基于话题的PHP轻论坛。 优秀的架构,高效的代码,每个页面平均执行时间仅为1~5毫秒,同时恰当地使用异步加载技术,在SEO与用户体验间取得平衡。 论坛摒弃了版块、节点等概念,发帖时无需选择板块,系统根据帖子内容自动推荐话题供用户选择,并且有功能强大而不显冗余的富文本编辑器。 支持关注用户、关注话题等功能,可以作为一个社交网站使用。 安装环境要求:

  • Carbon是一个轻量级的组件模型与企业级的服务框架.Carbon是在以下原则上进行构建:创建一个更加灵活的框架通过一个分离,以元数据为中心的系统,鼓励关系的分离,从而使得代码在一个复杂,动态的操作环境中更容易维护与重复利用等.