npmpackage.info

Gathering detailed insights and metrics for niduscss-components-dropdown

niduscss-components-dropdown - 2.1.0 | npmpackage.info

niduscss-components-dropdown

A personal CSS framework to process with PostCSS

2.1.0

MIT

CSS

419.00 B

4,692 1.7

Installations

npm install niduscss-components-dropdown

Developer Guide

BETA

Typescript

No

Module System

N/A

Min. Node Version

>=6.0.0 <7.0.0

Node Version

6.10.2

NPM Version

3.10.10 Score

69.7

Supply Chain

89.1

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

CSS

JavaScript

CSS (88.59%)

JavaScript (11.41%)

Developer

nimedev

Download Statistics

Total Downloads

4,692

Last Day

Last Week

Last Month

Last Year

240

GitHub Statistics

MIT License

2 Stars

83 Commits

1 Watchers

1 Branches

1 Contributors

Updated on Sep 11, 2018

Bundle Size

964.00 B

Minified

419.00 B

Minified + Gzipped

Bundlephobia

Maintainers

View All 1 Contributors

Package Meta Information

Latest Version

2.1.0

Package Id

niduscss-components-dropdown@2.1.0

Size

2.73 kB

NPM Version

3.10.10

Node Version

6.10.2

Total Downloads

Cumulative downloads

Total Downloads

4,692

Last Day

Compared to previous day

Last Week

200%

Compared to previous week

Last Month

-39.1%

Compared to previous month

Last Year

36.4%

240

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

No dependencies detected.

niduscss-components-dropdown

Base styles to create dropdown components for niduscss framework.

Installation

1$ npm install niduscss-components-dropdown

Usage

Define the custom properties in a file if you like modify the default values:

Example: create a setting.css file:

1:root {
2  --Dropdown-z-index: 8000;
3  --Dropdown-checked-color: #fafafa;
4  --Dropdown-pointer-color: #fafafa;
5  --Dropdown-triger-width: 3rem;
6  --Dropdown-pointer-size: 0.75rem;
7  --Dropdown-list-gap: 0.5rem;
8}

Import styles:

styles.css:

1/* Import first de file with custom properties or declare before import the
2   component.
3   ========================================================================== */
4   
5@import "settings";
6
7/* Components
8   ========================================================================== */
9@import "niduscss-components-dropdown";
10
11/* Other styles */

Use in html files (angular component)

1<div class="Dropdown">
2  <input type="checkbox" id="LangList-toggle">
3  <label class="Dropdown-label IconButton MaterialIcon" for="LangList-toggle">language</label>
4  <ul class="Dropdown-list dd-right dd-pointer" close-dd="LangList-toggle">
5    <li ng-repeat="lang in $ctrl.languages">
6      <div class="Dropdown-item u-textEllipsis" ng-click="$ctrl.changeLanguage(lang)">
7        {{'BASE.HEADER.LANG.' + lang | translate}}
8      </div>
9    </li>
10  </ul>
11</div>

Variations

If use some of this class in ul element (Dropdown-list) you can change the dropdown direction:

dd-pointer: Put a poiter between triger button and the dropdown. (default: disabled).
dd-right: The dropdown start from left of triger button. (default: left).
dd-up: The dropdown start from the top of triger button. (default: down).

Changelog

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

SAST

Determines if the project uses static code analysis.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Security-Policy

Determines if the project has published a security policy.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

1.7

/10

Last Scanned on 2025-06-23

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More