material-community-components - GitLite

KO | EN

gitlite — search

#hacktoberfest #ai #typescript #android #docker #macos #java #windows #cli #kubernetes #security #ios #mcp #openai

material-community-components

(★ 323)

:panda_face: Angular Material Components created from the community

파일 탐색기

최종 버전 다운로드 (.zip)

- - Bug_report.md
  - Feature_request.md
- - codeql-analysis.yml
- FUNDING.yml
- .gitignore
- commit-msg
- color-picker.png
- screenshot-1.png
- scrollspy.png
- speed-dial.png
- sponsor-egoi.png
- timer-picker.png
- - .browserslistrc
  - karma.conf.js
  - tsconfig.app.json
  - tsconfig.spec.json
  - tslint.json
- - _theming.scss
  - karma.conf.js
  - ng-package.json
  - package.json
  - tsconfig.lib.json
  - tsconfig.lib.prod.json
  - tsconfig.spec.json
  - tslint.json
.editorconfig
.gitignore
.travis.yml
angular.json
CONTRIBUTING.md
LICENSE
package.json
README.md
tsconfig.json
tsconfig.spec.json
tslint.json
yarn.lock

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/tiaguinho/material-community-components

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd material-community-components

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. Node.js

쉬움 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
Node.js npm 명령어를 쓰려면 Node.js가 설치되어 있어야 합니다. LTS(장기지원) 버전을 추천합니다.

npm install --save @angular/animations

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

npm install material-community-components

package.json에 명시된 라이브러리들을 내려받아 설치합니다.

yarn add material-community-components

이 명령어를 터미널에 그대로 입력해 실행하세요.

✅ 명령어 실행 후 터미널에 나타나는 주소(보통 http://localhost:3000 형태)를 브라우저에서 열어보세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Material Community Components
Angular Material components that are not implemented in official package.

[![npm version](https://badge.fury.io/js/material-community-components.svg)](https://badge.fury.io/js/material-community-components)
[![Travis CI](https://travis-ci.org/tiaguinho/material-community-components.svg?branch=master)](https://travis-ci.org/tiaguinho/material-community-components)
[![Coverage Status](https://coveralls.io/repos/github/tiaguinho/material-community-components/badge.svg?branch=master)](https://coveralls.io/github/tiaguinho/material-community-components?branch=master)
[![patreon](https://img.shields.io/badge/patreon-donate-yellow.svg)](https://www.patreon.com/temporin)

The idea of the [Material Community Components]() is to provide components that aren't available in the [Angular Material2](https://material.angular.io) yet.

All the components are created using [Angular](https://angular.io), [Material 2](https://material.angular.io) and [CDK](https://material.angular.io/cdk). Since version 7.1.0 only Angular 9+ is supported.

The color-picker component has an additional peer-dependency to [@thebespokepixel/es-tinycolor](https://github.com/thebespokepixel/es-tinycolor) to help with color calculations.

Check out our [documentation & live demo](https://tiaguinho.github.io/material-community-components/)

## Components

All the components have the prefix `mcc` followed by the package name.

| Component    | Package          | Screenshot    |
| ------------ | ---------------- | ------------- |
| Color Picker | mcc-color-picker | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/color-picker.png 'Color Picker') |
| Scrollspy    | mcc-scrollspy    | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/scrollspy.png 'Scrollspy') |
| Speed Dial   | mcc-speed-dial   | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/speed-dial.png 'Speed Dial') |
| Timer Picker | mcc-timer-picker | ![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/timer-picker.png 'Timer Picker') |

If you miss any component, please follow the [CONTRIBUTION GUIDELINE](https://github.com/tiaguinho/material-community-components/blob/master/CONTRIBUTING.md) to open an issue or file your idea [here](https://github.com/tiaguinho/material-community-components/discussions/191).

## Install

### step: 1

We use some components from [Angular Material](https://material.angular.io/). To be able to use this components, you have to install the `@angular/animations`. If you follow all the steps in [Material Guide](https://material.angular.io/guide/getting-started), you already have this step done.

```bash
    npm install --save @angular/animations
```

Note: [@angular/animations](https://angular.io/guide/animations) uses the WebAnimation API that isn't supported by all browsers yet. If you want to support Material component animations in these browsers, you'll have to include a [polyfill](https://github.com/web-animations/web-animations-js).

```typescript
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }
```

If you don't want to add another dependency to your project, you can use the [NoopAnimationsModule](https://angular.io/api/platform-browser/animations/NoopAnimationsModule).

```typescript
import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class PizzaPartyAppModule { }
```

### step: 2

Install material community components package:

```bash
    npm install material-community-components
```

or

```bash
  yarn add material-community-components
```

## Theming

To use the same theme of Angular Material add the following code to your ```style.scss```.

```scss
@use '~@angular/material' as mat;
@use '~material-community-components/theming' as mcc;

@include mat.core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$demo-primary: mat.define-palette(mat.$green-palette);
$demo-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

// The warn palette is optional (defaults to red).
$demo-warn: mat.define-palette(mat.$red-palette);

// Create the theme object (a Sass map containing all of the palettes).
$demo-theme: mat.define-light-theme($demo-primary, $demo-accent, $demo-warn);

// build angular material theme
@include mat.all-component-themes($demo-theme);

// pass angular material theme to material community components
@include mcc.mcc-theme($demo-theme); 
```
***Right now only ```timer-picker``` and ```speed-dial```*** do support the theme (see [ISSUE-172](https://github.com/tiaguinho/material-community-components/issues/172)).

## Upgrading from 7.x.x

Since version 9.0.0 the lib only provides secondary entry-points for import. To migrate change your imports like that:

Before:
```typescript
import { MccColorPickerModule} from 'material-community-components';
import { MccTimerPickerModule} from 'material-community-components';
import { MccSpeedDialModule} from 'material-community-components';
import { MccScrollspyModule} from 'material-community-components';
```

After:
```typescript
import { MccColorPickerModule} from 'material-community-components/color-picker';
import { MccTimerPickerModule} from 'material-community-components/timer-picker';
import { MccSpeedDialModule} from 'material-community-components/speed-dial';
import { MccScrollspyModule} from 'material-community-components/scrollspy';
```
## How to use

For more examples, you can see our [demo](https://github.com/tiaguinho/material-community-components/tree/master/projects/demo) folder or read the [documentation](https://tiaguinho.github.io/material-community-components/)

## License

[The MIT License (MIT) Copyright (c) 2018](http://opensource.org/licenses/MIT)

## Sponsors

[![alt text](https://github.com/tiaguinho/material-community-components/raw/master/images/sponsor-egoi.png 'E-goi')](https://www.e-goi.com)