精华内容
参与话题
问答
  • vue、Dropdown 下拉菜单、Dropdown属性、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性设计规则何时使用代码演示1.基本2.右键菜单 设计规则 向下弹出的列表。 何时使用 当页面上的操作命令过多时,用此组件可以...

    设计规则

    向下弹出的列表。

    何时使用

    当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。

    代码演示

    1.基本

    在这里插入图片描述
    最简单的下拉菜单。

    <template>
      <a-dropdown>
        <a class="ant-dropdown-link" href="#"> Hover me <a-icon type="down" /> </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </template>
    

    2.右键菜单

    在这里插入图片描述
    默认是移入触发菜单,可以点击鼠标右键触发。

    <template>
      <a-dropdown :trigger="['contextmenu']">
        <span style="user-select: none">Right Click on Me</span>
        <a-menu slot="overlay">
          <a-menu-item key="1">1st menu item</a-menu-item>
          <a-menu-item key="2">2nd menu item</a-menu-item>
          <a-menu-item key="3">3rd menu item</a-menu-item>
        </a-menu>
      </a-dropdown>
    </template>
    

    3.带下拉框的按钮

    在这里插入图片描述
    左边是按钮,右边是额外的相关功能菜单。

    <template>
      <div>
        <a-dropdown-button @click="handleButtonClick">
          Dropdown
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"><a-icon type="user" />1st menu item</a-menu-item>
            <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item>
            <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item>
          </a-menu>
        </a-dropdown-button>
        <a-dropdown-button @click="handleButtonClick" disabled style="margin-left: 8px">
          Dropdown
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"><a-icon type="user" />1st menu item</a-menu-item>
            <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item>
            <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item>
          </a-menu>
        </a-dropdown-button>
        <a-dropdown>
          <a-menu slot="overlay" @click="handleMenuClick">
            <a-menu-item key="1"><a-icon type="user" />1st menu item</a-menu-item>
            <a-menu-item key="2"><a-icon type="user" />2nd menu item</a-menu-item>
            <a-menu-item key="3"><a-icon type="user" />3rd item</a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"> Button <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div>
    </template>
    
    <script>
      export default {
        methods: {
          handleButtonClick(e) {
            console.log('click left button', e);
          },
          handleMenuClick(e) {
            console.log('click', e);
          },
        },
      };
    </script>
    

    4.触发事件

    在这里插入图片描述
    点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作。

    <template>
        <a-dropdown>
            <a class="ant-dropdown-link" @click="onClickTwo"> Hover me, Click menu item <a-icon type="down" /> </a>
            <a-menu slot="overlay" @click="onClick">
                <a-menu-item key="1">1st menu item</a-menu-item>
                <a-menu-item key="2">2nd menu item</a-menu-item>
                <a-menu-item key="3">3rd menu item</a-menu-item>
            </a-menu>
        </a-dropdown>
    </template>
    <script>
        export default {
            methods: {
                onClick({ key }) {
                    this.$message.success(`点击了第 ${key} 个下拉菜单`)
                },
                onClickTwo() {
                    this.$message.success("点击了一下链接")
                }
            }
        };
    </script>
    

    5.其他元素

    在这里插入图片描述
    分割线和不可用菜单项。

    <template>
      <a-dropdown>
        <a class="ant-dropdown-link" href="#"> Hover me <a-icon type="down" /> </a>
        <a-menu slot="overlay">
          <a-menu-item key="0">
            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">1st menu item</a>
          </a-menu-item>
          <a-menu-item key="1">
            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">2nd menu item</a>
          </a-menu-item>
          <a-menu-divider />
          <a-menu-item key="3" disabled>3rd menu item(disabled)</a-menu-item>
        </a-menu>
      </a-dropdown>
    </template>
    

    6.菜单隐藏方式

    在这里插入图片描述
    默认是点击关闭菜单,可以关闭此功能。

    <template>
        <a-dropdown v-model="visible">
            <a class="ant-dropdown-link" href="#"> Hover me <a-icon type="down" /> </a>
            <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1">Clicking me will not close the menu.</a-menu-item>
                <a-menu-item key="2">Clicking me will not close the menu also.</a-menu-item>
                <a-menu-item key="3">Clicking me will close the menu</a-menu-item>
            </a-menu>
        </a-dropdown>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    visible: false,
                };
            },
            methods: {
                handleMenuClick(e) {
                    if (e.key === '3') {
                        this.visible = false;
                    }
                },
            },
        };
    </script>
    

    7.弹出位置

    在这里插入图片描述
    支持 6 个弹出位置。

    <template>
        <div id="components-dropdown-demo-placement" style="padding-top: 100px;">
            <template v-for="(placement, index) in placements">
                <a-dropdown :placement="placement">
                    <a-button style="width: 350px">{{placement}}</a-button>
                    <a-menu slot="overlay">
                        <a-menu-item>
                            <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/"
                            >1st menu item</a
                            >
                        </a-menu-item>
                        <a-menu-item>
                            <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/"
                            >2nd menu item</a
                            >
                        </a-menu-item>
                        <a-menu-item>
                            <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/"
                            >3rd menu item</a
                            >
                        </a-menu-item>
                    </a-menu>
                </a-dropdown>
                <br v-if="index === 2" />
            </template>
        </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    placements: [
                        'bottomLeft',
                        'bottomCenter',
                        'bottomRight',
                        'topLeft',
                        'topCenter',
                        'topRight',
                    ],
                };
            },
        };
    </script>
    <style>
        #components-dropdown-demo-placement .ant-btn {
            margin-right: 8px;
            margin-bottom: 8px;
        }
    </style>
    

    8.多级菜单

    在这里插入图片描述
    传入的菜单里有多个层级。

    <template>
      <a-dropdown>
        <a class="ant-dropdown-link" href="#"> Cascading menu <a-icon type="down" /> </a>
        <a-menu slot="overlay">
          <a-menu-item>1st menu item</a-menu-item>
          <a-menu-item>2nd menu item</a-menu-item>
          <a-sub-menu title="sub menu" key="test">
            <a-menu-item>3rd menu item</a-menu-item>
            <a-menu-item>4th menu item</a-menu-item>
          </a-sub-menu>
          <a-sub-menu title="disabled sub menu" disabled>
            <a-menu-item>5d menu item</a-menu-item>
            <a-menu-item>6th menu item</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-dropdown>
    </template>
    

    9.触发方式

    在这里插入图片描述
    默认是移入触发菜单,可以点击触发。

    <template>
        <a-dropdown :trigger="['click']">
            <a class="ant-dropdown-link" href="#"> Click me <a-icon type="down" /> </a>
            <a-menu slot="overlay">
                <a-menu-item key="0">
                    <a href="http://www.alipay.com/">1st menu item</a>
                </a-menu-item>
                <a-menu-item key="1">
                    <a href="http://www.taobao.com/">2nd menu item</a>
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item key="3">3rd menu item</a-menu-item>
            </a-menu>
        </a-dropdown>
    </template>
    

    API

    属性

    参数 说明 类型 默认值
    disabled 菜单是否禁用 boolean -
    getPopupContainer 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 Function(triggerNode) () => document.body
    overlay(slot-scope) 菜单 boolean -
    disabled 菜单 Menu -
    overlayClassName 下拉根元素的类名称 string -
    overlayStyle 下拉根元素的样式 object -
    placement 菜单弹出位置: bottomLeft bottomCenter bottomRight topLeft topCenter topRight String bottomLeft
    trigger 触发下拉的行为, 移动端不支持 hover Array< click hover contextmenu> ['hover']
    visible(v-model) 菜单是否显示 boolean -

    overlay 菜单使用 Menu,还包括菜单项 Menu.Item,分割线 Menu.Divider

    注意: Menu.Item 必须设置唯一的 key 属性。
    Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中,可以指定 <Menu selectable>.

    事件

    事件名称 说明 回调参数
    visibleChange 菜单显示状态改变时调用,参数为 visible function(visible)

    Dropdown.Button

    参数 说明 类型 默认值
    disabled 菜单是否禁用 boolean -
    overlay(slot-scope) 菜单 Menu -
    placement 菜单弹出位置: bottomLeft bottomCenter bottomRight topLeft topCenter topRight String bottomLeft
    size 按钮大小,和 Button 一致 string 'default'
    trigger 触发下拉的行为 Array<click hover contextmenu> ['hover']
    type 按钮类型,和 Button 一致 string 'default'
    visible(v-model) 菜单是否显示 boolean -

    Dropdown.Button 事件

    事件名称 说明 回调参数
    visibleChange 菜单显示状态改变时调用,参数为 visible function(visible)
    click 点击左侧按钮的回调,和 Button 一致 Function
    展开全文
  • Bootstrap 下拉菜单(Dropdowns)

    千次阅读 2019-07-23 23:01:52
    dropdown指定下拉菜单,下拉菜单都包裹在 .dropdown 里,dropdown-menu指定下拉菜单 <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"...

    一、Bootstrap 下拉菜单(Dropdowns)

    1.1 基本下拉框

    .dropdown 类用来指定一个下拉菜单。
    我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。
    <div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。

    <div class="container">
        <h2>下拉菜单</h2>
        <p>.dropdown 类用来指定一个下拉菜单。</p>
        <p>.dropdown-menu 类来设置实际下拉菜单。</p>
        <p>我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。</p>
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
            </div>
        </div>
    </div>
    

    在这里插入图片描述

    1.2 下拉菜单中的分割线

    .dropdown-divider类用于定义下拉菜单中的分割线

    <div class="container">
      <h2>下拉菜单中</h2>
      <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:</p>
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Another link</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.3 下拉菜单中的禁用项

    <div class="container">
      <h2>下拉菜单</h2>
      <p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。</p>
      <p>如果要禁用下拉菜单的选项,可以使用.disabled 类。</p>
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Normal</a>
          <a class="dropdown-item active" href="#">Active</a>
          <a class="dropdown-item disabled" href="#">Disabled</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.4 指定向上弹出的下拉菜单

    如果你希望下拉菜单向上弹出,可以将 <div> 元素的 class=“dropdown” 替换为 “dropup”:

    <div class="container">
      <h2>下拉菜单</h2>
      <p> .dropup 类用于设置下拉菜单向上弹出:</p><br>
      <div class="dropup">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.5 下拉菜单中添加标题

    .dropdown-dropdown-header 下拉菜单中添加标题

    <div class="container">
      <h2>下拉菜单中</h2>
      <p>.dropdown-header 类用于在下拉菜单中添加标题:</p>
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <h5 class="dropdown-header">Dropdown header</h5>
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
          <h5 class="dropdown-header">Dropdown header</h5>
          <a class="dropdown-item" href="#">Another link</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.6 按钮中设置下拉菜单

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>按钮中的下拉菜单</h2>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
      
      <div class="btn-group">
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • Unity 之 UGUI Dropdown组件使用简析

    千次阅读 2019-06-25 23:58:44
    Unity 之 UGUI Dropdown组件使用简析,动态生成下拉选项内容,代码控制下拉选项操作。

    Unity 之 UGUI Dropdown组件使用简析

    官方文档:https://docs.unity3d.com/Manual/script-Dropdown.html
    来自官方诠释:控件显示当前选择的选项。一旦单击,它将打开选项列表,以便可以选择一个新选项。选择新选项后,关闭的列表再次关闭,控件将显示新选定的选项。如果用户单击控件本身或画布中的任何其他位置,列表也将关闭。

    创建出Unity 定义好的Dropdown组件,大概长成这个样子…

    dropdown

    细心的你会发现,当运行时,会生成一个Blocker,这个时充满当前图层的,这也是为什么当你点击了下拉选项,点击空白处,下拉选项会自动关闭的原因。

    在这里插入图片描述

    看一下生成的Blocker的Inspector面板

    在这里插入图片描述


    下面是一个对DropDown基础操作

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    public class DropDownTest : MonoBehaviour {
    
        public Dropdown dropDown;
    
    	void Start () {
    
            //是否可以点击
            dropDown.interactable = true;
    
            #region 添加下拉选项,,,设置文字,底图
            //添加一个下拉选项
            Dropdown.OptionData data = new Dropdown.OptionData();
            data.text = "方案一";
            //data.image = "指定一个图片做背景不指定则使用默认";
            dropDown.options.Add(data);
    
            //另一种添加方式 , 不过用起来并不比第一个方便,
            List<Dropdown.OptionData> listOptions = new List<Dropdown.OptionData>();       
            listOptions.Add(new Dropdown.OptionData("方案二"));
            listOptions.Add(new Dropdown.OptionData("方案三"));
            dropDown.AddOptions(listOptions);
    
            //设置显示字体大小
            dropDown.captionText.fontSize = 14;
            //dropDown.captionImage = "底图";
            //设置要复制字体大小
            dropDown.itemText.fontSize = 15;
            //dropDown.itemImage = "底图";
    
            //PS:我一般是使用循环 使用第一种形式添加
            #endregion
    
            #region 添加完成就可以使用了,那么当我们想要复用怎么办呢?,这时就用到了移除OptionData,下面的每个注释打开都是一个功能
            //直接清理掉所有的下拉选项,
            dropDown.ClearOptions();
            //亲测不是很好用
            //dropDown.options.Clear(); 
    
            //对象池回收时,有下拉状态的,直接干掉... (在极限点击测试的情况下会出现)
            if (dropDown.transform.childCount == 3)
            {
                Destroy(dropDown.transform.GetChild(2).gameObject);
            }
    
            //移除指定数据   参数:OptionData
            dropDown.options.Remove(data);
            //移除指定位置   参数:索引
            dropDown.options.RemoveAt(0); 
            #endregion
    
            #region 添加监听函数
            //当点击后值改变是触发 (切换下拉选项)
            dropDown.onValueChanged.AddListener((int v) => OnValueChange(v));
            //若有多个,可以将自己当做参数传递进去,已做区分。
            //dropDown.onValueChanged_1.AddListener((int v) => OnValueChange(dropDown.gameobject,v));
            #endregion
        }
    
        /// <summary>
        /// 当点击后值改变是触发 (切换下拉选项)
        /// </summary>
        /// <param name="v">是点击的选项在OptionData下的索引值</param>
        void OnValueChange(int v)
        {
            //切换选项 时处理其他的逻辑...
            Debug.Log("点击下拉控件的索引是..." + v);
        }	
    	
    }
    
    


    内置的方法和属性大家可以去官网查看,文章开头有官网链接哦

    官方源码:

    #region 程序集 UnityEngine.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null
    // E:\program files\Unity\Editor\Data\UnityExtensions\Unity\GUISystem\UnityEngine.UI.dll
    #endregion
    
    using System.Collections.Generic;
    using UnityEngine.Events;
    using UnityEngine.EventSystems;
    
    namespace UnityEngine.UI
    {
        //
        // 摘要:
        //     A standard dropdown that presents a list of options when clicked, of which one
        //     can be chosen.
        //一个标准的下拉菜单,它在单击时显示一个选项列表,可以从中选择一个。
        [AddComponentMenu("UI/Dropdown", 35)]
        [RequireComponent(typeof(RectTransform))]
        public class Dropdown : Selectable, IPointerClickHandler, ISubmitHandler, ICancelHandler, IEventSystemHandler
        {
            protected Dropdown();
    
            //
            // 摘要:
            //     The Image component to hold the image of the currently selected option.
            //用于保存当前选定选项的图像的图像组件。
            public Image captionImage { get; set; }
            //
            // 摘要:
            //     The Text component to hold the text of the currently selected option.
            //用于保存当前选定选项的文本的文本组件。
            public Text captionText { get; set; }
            //
            // 摘要:
            //     The Rect Transform of the template for the dropdown list.
            //下拉列表模板的Rect转换
            public RectTransform template { get; set; }
            //
            // 摘要:
            //     The list of possible options. A text string and an image can be specified for
            //     each option.
            //可能选项的列表。可以为每个选项指定文本字符串和图像。
            public List<OptionData> options { get; set; }
            //
            // 摘要:
            //     A UnityEvent that is invoked when when a user has clicked one of the options
            //     in the dropdown list.
            //当用户单击其中一个选项时调用的UnityEvent 在下拉列表中。
            public DropdownEvent onValueChanged { get; set; }
            //
            // 摘要:
            //     The Text component to hold the text of the item.
            //文本组件来保存项的文本。
            public Text itemText { get; set; }
            //
            // 摘要:
            //     The Image component to hold the image of the item.
            //用于保存项的图像的图像组件。
            public Image itemImage { get; set; }
            //
            // 摘要:
            //     The index of the currently selected option. 0 is the first option, 1 is the second,
            //     and so on.
            //当前选定选项的索引。0是第一个选项,1是第二个选项,等等。
            public int value { get; set; }
    
            public void AddOptions(List<Sprite> options);
            public void AddOptions(List<string> options);
            public void AddOptions(List<OptionData> options);
            //
            // 摘要:
            //     Clear the list of options in the Dropdown.
            //清除下拉列表中的选项。
            public void ClearOptions();
            //
            // 摘要:
            //     Hide the dropdown list.
            //隐藏下拉列表。
            public void Hide();
            //
            // 摘要:
            //     Called by a BaseInputModule when a Cancel event occurs.
            //当发生取消事件时,由BaseInputModule调用。
            // 参数:
            //   eventData:
            public virtual void OnCancel(BaseEventData eventData);
            //
            // 摘要:
            //     Handling for when the dropdown is 'clicked'.
            //处理当下拉框被'点击'。
            // 参数:
            //   eventData:
            //     Current event.
            public virtual void OnPointerClick(PointerEventData eventData);
            //
            // 摘要:
            //     What to do when the event system sends a submit Event.
            //当事件系统发送提交事件时应该做什么。
            // 参数:
            //   eventData:
            //     Current event.
            public virtual void OnSubmit(BaseEventData eventData);
            //
            // 摘要:
            //     Refreshes the text and image (if available) of the currently selected option.
            //     If you have modified the list of options, you should call this method afterwards
            //     to ensure that the visual state of the dropdown corresponds to the updated options.
            //刷新当前选定选项的文本和图像(如果可用)。
            //如果你修改了选项列表,你应该在之后调用这个方法
            //确保下拉菜单的可视状态与更新后的选项相对应。
            public void RefreshShownValue();
            //
            // 摘要:
            //     Show the dropdown list.
            //显示下拉列表。
            public void Show();
            protected override void Awake();
            //
            // 摘要:
            //     Override this method to implement a different way to obtain a blocker GameObject.
            //重写此方法以实现获取拦截器GameObject的另一种方法。
            // 参数:
            //   rootCanvas:
            //     The root canvas the dropdown is under.
            //下拉菜单下的根画布。
            // 返回结果:
            //     The obtained blocker.
            protected virtual GameObject CreateBlocker(Canvas rootCanvas);
            //
            // 摘要:
            //     Override this method to implement a different way to obtain a dropdown list GameObject.
            //重写此方法以实现获取下拉列表GameObject的另一种方法。
            // 参数:
            //   template:
            //     The template to create the dropdown list from.
            //创建下拉列表的模板。
            // 返回结果:
            //     The obtained dropdown list.
            protected virtual GameObject CreateDropdownList(GameObject template);
            protected virtual DropdownItem CreateItem(DropdownItem itemTemplate);
            //
            // 摘要:
            //     Override this method to implement a different way to dispose of a blocker GameObject
            //     that blocks clicks to other controls while the dropdown list is open.
            //重写此方法以实现处理拦截器GameObject的另一种方法
    		//当下拉列表打开时,它阻止对其他控件的单击。
            // 参数:
            //   blocker:
            //     The blocker to dispose of.
            //要处理的阻滞剂。
            protected virtual void DestroyBlocker(GameObject blocker);
            //
            // 摘要:
            //     Override this method to implement a different way to dispose of a dropdown list
            //     GameObject.
            //重写此方法,以实现处理下拉列表的另一种方法
            // 参数:
            //   dropdownList:
            //     The dropdown list to dispose of.
            //要处理的下拉列表。
            protected virtual void DestroyDropdownList(GameObject dropdownList);
            protected virtual void DestroyItem(DropdownItem item);
            protected override void OnValidate();
    
            //
            // 摘要:
            //     Class used internally to store the list of options for the dropdown list.
            //类,用于在内部存储下拉列表的选项列表。
            public class OptionDataList
            {
                public OptionDataList();
    
                //
                // 摘要:
                //     The list of options for the dropdown list.
                public List<OptionData> options { get; set; }
            }
            //
            // 摘要:
            //     Class to store the text and/or image of a single option in the dropdown list.
            //类来存储下拉列表中单个选项的文本和/或图像。
            public class OptionData
            {
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData();
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData(string text);
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData(Sprite image);
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //为下拉列表创建一个表示单个选项的对象。
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData(string text, Sprite image);
    
                //
                // 摘要:
                //     The text associated with the option.
                public string text { get; set; }
                //
                // 摘要:
                //     The image associated with the option.
                public Sprite image { get; set; }
            }
            //
            // 摘要:
            //     UnityEvent callback for when a dropdown current option is changed.
            //UnityEvent回调函数,用于更改当前下拉选项时的回调。
            public class DropdownEvent : UnityEvent<int>
            {
                public DropdownEvent();
            }
            protected internal class DropdownItem : MonoBehaviour, IPointerEnterHandler, ICancelHandler, IEventSystemHandler
            {
                public DropdownItem();
    
                public Text text { get; set; }
                public Image image { get; set; }
                public RectTransform rectTransform { get; set; }
                public Toggle toggle { get; set; }
    
                public virtual void OnCancel(BaseEventData eventData);
                public virtual void OnPointerEnter(PointerEventData eventData);
            }
        }
    }
    
    展开全文
  • 组件-Element— Dropdown( 下拉菜单)

    千次阅读 2019-07-04 14:29:09
    组件-Element— Dropdown( 下拉菜单) 组件— 下拉菜单 基础用法 <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> <...

    组件-Element— Dropdown( 下拉菜单)

    组件— 下拉菜单

    1. 基础用法
      在这里插入图片描述

      <el-dropdown>
        <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <style>
        .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
      </style>
      
    2. 触发对象
      在这里插入图片描述

      <el-dropdown>
        <el-button type="primary">
          更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown split-button type="primary" @click="handleClick">
        更多菜单
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <style>
        .el-dropdown {
          vertical-align: top;
        }
        .el-dropdown + .el-dropdown {
          margin-left: 15px;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
      </style>
      
      <script>
        export default {
          methods: {
            handleClick() {
              alert('button click');
            }
          }
        }
      </script>
      
    3. 触发方式
      在这里插入图片描述

      <el-row class="block-col-2">
        <el-col :span="12">
          <span class="demonstration">hover 激活</span>
          <el-dropdown>
            <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
              <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <el-col :span="12">
          <span class="demonstration">click 激活</span>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus">黄金糕</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">狮子头</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline">螺蛳粉</el-dropdown-item>
              <el-dropdown-item icon="el-icon-check">双皮奶</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check-outline">蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
      
      <style>
        .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
        .demonstration {
          display: block;
          color: #8492a6;
          font-size: 14px;
          margin-bottom: 20px;
        }
      </style>
      
    4. 菜单隐藏方式
      在这里插入图片描述

      <el-dropdown :hide-on-click="false">
        <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <style>
        .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
      </style>
      
    5. 指令事件
      在这里插入图片描述

      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link">
          下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="a">黄金糕</el-dropdown-item>
          <el-dropdown-item command="b">狮子头</el-dropdown-item>
          <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
          <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
          <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <style>
        .el-dropdown-link {
          cursor: pointer;
          color: #409EFF;
        }
        .el-icon-arrow-down {
          font-size: 12px;
        }
      </style>
      
      <script>
        export default {
          methods: {
            handleCommand(command) {
              this.$message('click on item ' + command);
            }
          }
        }
      </script>
      
    6. 不同尺寸
      在这里插入图片描述

      <el-dropdown split-button type="primary">
        默认尺寸
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown size="medium" split-button type="primary">
        中等尺寸
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown size="small" split-button type="primary">
        小型尺寸
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
      <el-dropdown size="mini" split-button type="primary">
        超小尺寸
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>黄金糕</el-dropdown-item>
          <el-dropdown-item>狮子头</el-dropdown-item>
          <el-dropdown-item>螺蛳粉</el-dropdown-item>
          <el-dropdown-item>双皮奶</el-dropdown-item>
          <el-dropdown-item>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      
    7. Dropdown Attributes
      在这里插入图片描述

    8. Dropdown Slots
      在这里插入图片描述

    9. Dropdown Events
      在这里插入图片描述

    10. Dropdown Menu Item Attributes
      在这里插入图片描述

    展开全文
  • Dropdown:方法与事件

    千次阅读 2019-05-24 20:19:23
  • DROPDOWN-下拉列表

    2018-06-21 17:48:13
    自己生产的是不能直接用的哦 不能全面显示?怎么办?需要增加三句话。参考:...amp;traceid=static void _cbDialog(WM_MESSAGE * pMsg) { WM_HWIN hItem; int NCode; ... WM...
  • 下拉框dropdown

    千次阅读 2018-04-12 22:28:19
    container"],包裹所有用到的标签。...2、容器内有一个div [class="c-dropdown"]用来定义下下拉框的 宽度width:80px; 行内块元素display:inline-block; 相对位置position:relativ...
  • 使用Dropdown 下拉菜单

    2018-10-31 16:53:26
    点击查看
  • Bootstrap 组件 - 下拉菜单(Dropdowns)

    千次阅读 2018-05-25 14:51:48
    标记(Markup) 需要使用.dropdown或者其它声明了 position: relative; 的元素来包容下拉触发器和下拉菜单。 &lt;div class="
  • UGUI内核大探究(十三)Dropdown

    千次阅读 2016-09-18 09:07:25
    Dropdown(下拉框)可谓是UGUI的集大成者,在Unity Editor里新建一个Dropdown,会随之附赠Text(Label对象)、Image(Arrow对象)、ScrollRect(Template对象)、Toggle(Template\Viewport\Content\item)和...
  • Bootstrap下拉菜单Dropdown)插件实现隐藏操作按钮的简单实现1) 接到任务2) 实现过程3) 想象 VS 现实 1) 接到任务 这周接到一个关于前端的任务,由于我是前端菜鸡,只能靠投机取巧来实现。需求描述:表格中最后一...
  • Bootstrap 下拉菜单Dropdown)插件 Bootstrap 下拉菜单 这一章讲解了下拉菜单,但是没有涉及到交互部分,本章将具体讲解下拉菜单的交互。使用下拉菜单Dropdown)插件,您可以向任何组件(比如导航栏、标签页、...
  • 使用的bootstrapdropdown,以前是单选,因此点击切换后就会自动收起并且将数据传给后台,现在改成了多选,出现了一个问题就是点击一个后也会自动收起,这样的多选肯定是有问题的,因此在网上搜索了一下,找到了一种...
  • 使用下拉菜单的插件,您...您可以切换下拉菜单(dropdown)插件隐藏内容 1、通过data属性,向链接或按钮添加data-toggle="dropdown"来切换下拉菜单。 <div class="dropdown"> <a href="#" data-toggle="dr...
  • 官方发布引用地址:http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-dropdown.js 样式代码:  ☑ LESS版本:对应的源文件dropdowns.less  ☑ Sass版本:对应的源文件_dropdowns.scss  
  • 使用bootstrap下拉菜单在页面上不能显示出来,我用的是firefox浏览器,F12的HTML窗口发现.dropdown-menu元素及其子元素都是灰的,这是怎么回事啊? [img]...
  • Bootstrap下拉菜单默认需要通过点击,才可以打开,在管理系统的开发过程中,使用悬停代替点击能减少一步操作,更人性化。下面是实现方式: html> head> link href=...
  • 方法一:实际上比较简单,只需要加一个css设置下hover的状态,把...方法二:不仅可以解决Bootstrap鼠标悬停的问题,还可以让一个菜单恢复链接实现点击下拉菜单效果是JS实现的,分析bootstrap.js文件发现,Bootstr...
  • 文章目录BootStrap下拉菜单点击不显示效果的原因 BootStrap下拉菜单点击不显示效果的原因 不会出现下拉菜单效果的原因? 引入顺序问题 <link href="css/bootstrap.min.css" rel="stylesheet" /> <script...
  • Bootstrap 下拉菜单

    2016-03-15 21:37:44
    网页交互的时候经常需要上下文菜单或者隐藏/展示菜单项,Bootstrap提供了下拉菜单的设置方法。 只有在菜单的父元素上应用.open样式(当单击“下拉菜单”按钮的时候,会自动在.dropdown样式的div元素上再次附加一个....
  • Bootstrap 下拉菜单多级联动

    千次阅读 2018-07-06 09:12:39
    直接上干货&lt;!DOCTYPE HTML&gt;&lt;html lang="zh-CN"&gt;&lt;...Bootstrap 3 的多级下拉菜单示例&lt;/title&gt; &lt;script type="text/javasc
  • 修改bootstrap下拉菜单的宽度

    千次阅读 2018-11-06 15:51:57
    &lt;!-- Single button --&gt; &lt;div class="btn-group"...btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded=&
  • Bootstrap3 下拉菜单Dropdown

    千次阅读 2019-02-18 11:43:22
    下拉菜单是可切换的,是以列表格式显示...使用下拉菜单,只需要在 class .dropdown 内加上下拉菜单即可。 效果图: 源代码:  必须加入bootstrap样式,主题,JS和jquery! &lt;link rel="st...
  • bootstrap 通过增加glyphicon-menu-downglyphicon-menu-right 设置按钮的下拉和收起效果。 通过获取点击菜单所对应的父级的同级div来隐藏显示菜单:$menuscs=$(this).parent().next('div'); 通过fadeToggle()来...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <...Bootstrap 下拉菜单对齐方式</title> <link rel="stylesheet" href="http://cdn.static.ru...
  • bootstrap 下拉菜单不显示的解决办法

    千次阅读 2015-11-10 16:15:00
    bootstrap 下拉菜单不显示,最后改成如下正常显示: &lt;div class="btn-group open"&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"...
  • Bootstrap3中,为下拉菜单中某个下拉项的 <li> 元素添加 .disabled 类,就可以禁止该选项,让该菜单项的链接变灰并失去鼠标悬停效果。如: <ulclass="dropdown-menu"> <li><ahref="#">...
  • 修改下拉菜单样式 &lt;style type="text/css"&gt; .navbar .nav &gt; li .dropdown-menu { margin: 0; } .navbar .nav &gt; li:hover .dropdown-menu { display: block; } &...
  • 1.jquery与bootstrap的依赖关系 由于bootstrap.js是依赖于jquery.js文件,所以文件的顺序应该如下表示。 导入bootstrap的.css文件 导入jquery的.js文件 导入bootstrap的.js文件 正确的导入代码如下: <link rel...
  • 下拉菜单要使用JS插件,bootstrap的JS插件是基于jquery的,所以我们同时需要加载jquery代码很简单。下面贴出来 <div class="dropdown"> <button class="btn btn-info dropdown-toggle" type="button" id="dropdown...

空空如也

1 2 3 4 5 ... 20
收藏数 48,194
精华内容 19,277
关键字:

dropdown