如何更改聚合物核心 - 下拉菜单项间距

Question

如何更改核心下拉菜单中项目之间的间距，我尝试过行高和各种其他css属性，但我似乎无法影响项目之间的间距。

这是我的组件我希望Bug，Feature，None之间的间距可以更小。

<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/core-dropdown/core-dropdown.html" rel="import">
<link rel="import" href="http://www.polymer-project.org/components/core-dropdown-menu/core-dropdown-menu.html" rel="import">
<link rel="import" href="http://www.polymer-project.org/components/core-menu/core-menu.html" rel="import">
<link rel="import" href="http://www.polymer-project.org/components/core-item/core-item.html" rel="import">

<polymer-element name="sp-task-type">
    <template>

        <style>
            :host {
                width: 100%;
            }

            core-dropdown {
                min-width: 180px;
                border: 1px solid #000000;
                border-radius: 3px;
            }

            core-dropdown-menu {
                background: #f5f5f5;
                align-self: flex-start;
                height: 100%;

            }

            core-menu {
                margin: 0;

            }

            core-item {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            /*     #header {
                     *//*font-size: 14px;*//*
                     *//*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*//*
                     *//*-webkit-touch-callout: none;*//*
                     padding: 0;
                     margin: 0;
                     *//*border: 1px solid green;*//*
                     *//*align-self: flex-end;*//*
                     *//*align-self: stretch;*//*
                 }*/

            #tags {
                flex: 1 0 auto;
                height: 70%;
                align-self: flex-end;
                background: #ffffff;
            }

            #wrapper {
                display: flex;
                flex-direction: row;
                height: 30px;
                justify-content: flex-start;
                /*border: 1px solid red;*/
                background: #ffffff;
            }

        </style>

        <div id="wrapper">
            <core-dropdown-menu id="cdm">
                <core-dropdown class="dropdown">
                    <core-menu on-core-select="{{selectAction}}" id="menu">
                        <template repeat="{{d in data}}">
                            <core-item label="{{d.name}}" _style="color: {{d.color}}"></core-item>
                        </template>
                    </core-menu>
                </core-dropdown>
            </core-dropdown-menu>
            <div id="tags">test</div>
        </div>
    </template>
    <script>
        (function () {
            Polymer({
                ready: function () {
                    // populate the element’s data model
                    // (the salutations array)

                    this.data = [
                        {name: 'Bug', color: 'purple', isDefault: 0},
                        {name: 'Feature', color: 'brown', isDefault: 0},
                        {name: 'None', color: 'black', isDefault: 1}]

                    var i = arrayObjectIndexOf(this.data, 1, "isDefault");

                    this.$.menu.selected = i;

                },
                selectAction: function (e, detail) {

                    if (detail.isSelected) {
                        var selectedItem = detail.item;
                        var wrapper = this.$.wrapper;
                        var cdm = this.$.cdm;
                        var menu = this.$.menu;
                        var color = selectedItem.style.color;

                        if (selectedItem.label === 'None') {
                            menu.selected = 2;
                            wrapper.style.background = color;
                            cdm.style.color = color;
                        }
                        else {
                            wrapper.style.background = color;
                            cdm.style.color = color;
                        }
                    }
                }
            });

        })();
        function arrayObjectIndexOf(myArray, searchTerm, property) {
            for (var i = 0, len = myArray.length; i < len; i++) {
                if (myArray[i][property] === searchTerm) return i;
            }
            return -1;
        }
    </script>
</polymer-element>

<sp-task-type>

Answer 1

更改核心项目的最小高度

core-item {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   min-height: 24px;
}