mirror of
https://github.com/Redocly/redoc.git
synced 2025-07-11 00:32:36 +03:00
Add Dropdown Element
This commit is contained in:
parent
61646df40c
commit
4c450e56b5
37
lib/common/components/DropDown/dropdown.js
Normal file
37
lib/common/components/DropDown/dropdown.js
Normal file
|
@ -0,0 +1,37 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
import {Component, EventEmitter, ElementRef} from 'angular2/core';
|
||||||
|
import {CORE_DIRECTIVES} from 'angular2/common';
|
||||||
|
import DropKick from 'Robdel12/DropKick';
|
||||||
|
import 'Robdel12/DropKick/build/css/dropkick.css!css';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'dropdown',
|
||||||
|
events: ['change'],
|
||||||
|
template: `
|
||||||
|
<select (change)=onChange($event.target.value)>
|
||||||
|
<ng-content></ng-content>
|
||||||
|
</select>
|
||||||
|
`,
|
||||||
|
directives: [CORE_DIRECTIVES],
|
||||||
|
styleUrls: ['./lib/common/components/DropDown/dropdown.css']
|
||||||
|
})
|
||||||
|
@Reflect.metadata('parameters', [[ElementRef]])
|
||||||
|
export class DropDown {
|
||||||
|
constructor(elem) {
|
||||||
|
this.change = new EventEmitter();
|
||||||
|
this.elem = elem.nativeElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
ngAfterContentInit() {
|
||||||
|
this.inst = new DropKick(this.elem.firstElementChild, {autoWidth: true});
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange(value) {
|
||||||
|
this.change.next(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
destroy() {
|
||||||
|
this.inst.dispose();
|
||||||
|
}
|
||||||
|
}
|
70
lib/common/components/DropDown/dropdown.scss
Normal file
70
lib/common/components/DropDown/dropdown.scss
Normal file
|
@ -0,0 +1,70 @@
|
||||||
|
@import '../../styles/variables';
|
||||||
|
|
||||||
|
$silver: #666D71;
|
||||||
|
$background-silver: #EEEFEF;
|
||||||
|
$border: darken($background-silver, 2%);
|
||||||
|
|
||||||
|
:host {
|
||||||
|
.dk-select {
|
||||||
|
max-width: 100%;
|
||||||
|
font-family: $headers-font;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dk-selected:after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
// button
|
||||||
|
|
||||||
|
.dk-selected {
|
||||||
|
color: $silver;
|
||||||
|
border-color: $silver;
|
||||||
|
padding: 0.4em 0.9em 0.4em 0.4em;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dk-select-open-down .dk-selected {
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dk-select-open-down .dk-selected, .dk-selected:focus, .dk-selected:hover {
|
||||||
|
border-color: $primary-color;
|
||||||
|
color: $primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// tick
|
||||||
|
.dk-selected:before {
|
||||||
|
border-top-color: $silver;
|
||||||
|
border-width: .35em .35em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dk-select-open-down .dk-selected:before,
|
||||||
|
.dk-select-open-up .dk-selected:before {
|
||||||
|
border-bottom-color: $primary-color;
|
||||||
|
border-width: 0 .35em .35em;
|
||||||
|
}
|
||||||
|
|
||||||
|
// items
|
||||||
|
.dk-select-multi:focus .dk-select-options,
|
||||||
|
.dk-select-open-down .dk-select-options,
|
||||||
|
.dk-select-open-up .dk-select-options {
|
||||||
|
border-color: $silver;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dk-select-options {
|
||||||
|
margin-top: 0.2em;
|
||||||
|
border-radius: 0.4em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dk-option {
|
||||||
|
color: $black;
|
||||||
|
padding: 0.4em 0.4em;
|
||||||
|
&:hover {
|
||||||
|
background-color: $background-silver;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dk-option-selected {
|
||||||
|
background-color: $background-silver;
|
||||||
|
}
|
||||||
|
}
|
|
@ -33,6 +33,7 @@
|
||||||
"jspm": {
|
"jspm": {
|
||||||
"configFile": "system.config.js",
|
"configFile": "system.config.js",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"Robdel12/DropKick": "github:Robdel12/DropKick@^2.1.7",
|
||||||
"angular2": "npm:angular2@^2.0.0-beta.12",
|
"angular2": "npm:angular2@^2.0.0-beta.12",
|
||||||
"es6-shim": "github:es-shims/es6-shim@^0.33.6",
|
"es6-shim": "github:es-shims/es6-shim@^0.33.6",
|
||||||
"hint.css": "npm:hint.css@^2.2.1",
|
"hint.css": "npm:hint.css@^2.2.1",
|
||||||
|
@ -53,6 +54,11 @@
|
||||||
"core-js": "npm:core-js@^1.2.6",
|
"core-js": "npm:core-js@^1.2.6",
|
||||||
"css": "github:systemjs/plugin-css@^0.1.18",
|
"css": "github:systemjs/plugin-css@^0.1.18",
|
||||||
"systemjs/plugin-json": "github:systemjs/plugin-json@^0.1.0"
|
"systemjs/plugin-json": "github:systemjs/plugin-json@^0.1.0"
|
||||||
|
},
|
||||||
|
"overrides": {
|
||||||
|
"github:Robdel12/DropKick@2.1.7": {
|
||||||
|
"format": "global"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -37,6 +37,7 @@ System.config({
|
||||||
},
|
},
|
||||||
|
|
||||||
map: {
|
map: {
|
||||||
|
"Robdel12/DropKick": "github:Robdel12/DropKick@2.1.7",
|
||||||
"angular2": "npm:angular2@2.0.0-beta.12",
|
"angular2": "npm:angular2@2.0.0-beta.12",
|
||||||
"babel": "npm:babel-core@5.8.34",
|
"babel": "npm:babel-core@5.8.34",
|
||||||
"babel-runtime": "npm:babel-runtime@5.8.34",
|
"babel-runtime": "npm:babel-runtime@5.8.34",
|
||||||
|
|
Loading…
Reference in New Issue
Block a user