53 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
			
		
		
	
	
			53 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			Vue
		
	
	
<script>
 | 
						|
import Basic from './basic'
 | 
						|
import ContextMenu from './context-menu'
 | 
						|
import DropdownButton from './dropdown-button'
 | 
						|
import Event from './event'
 | 
						|
import Item from './item'
 | 
						|
import OverlayVisible from './overlay-visible'
 | 
						|
import Placement from './placement'
 | 
						|
import SubMenu from './sub-menu'
 | 
						|
import Trigger from './trigger'
 | 
						|
import CN from '../index.zh-CN.md'
 | 
						|
import US from '../index.en-US.md'
 | 
						|
const md = {
 | 
						|
  cn: `# 下拉菜单
 | 
						|
        向下弹出的列表。
 | 
						|
        ## 何时使用
 | 
						|
        当页面上的操作命令过多时,用此组件可以收纳操作元素。点击或移入触点,会出现一个下拉菜单。可在列表中进行选择,并执行相应的命令。
 | 
						|
        ## 代码演示`,
 | 
						|
  us: `# Dropdown
 | 
						|
        A dropdown list.
 | 
						|
        ## When To Use
 | 
						|
        If there are too many operations to display, you can wrap them in a \`Dropdown\`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions.
 | 
						|
        ## Examples 
 | 
						|
        `,
 | 
						|
}
 | 
						|
export default {
 | 
						|
  category: 'Components',
 | 
						|
  subtitle: '下拉菜单',
 | 
						|
  type: 'Navigation',
 | 
						|
  title: 'Dropdown',
 | 
						|
  render () {
 | 
						|
    return (
 | 
						|
      <div>
 | 
						|
        <md cn={md.cn} us={md.us}/>
 | 
						|
        <Basic />
 | 
						|
        <ContextMenu />
 | 
						|
        <DropdownButton />
 | 
						|
        <Event />
 | 
						|
        <Item/>
 | 
						|
        <OverlayVisible />
 | 
						|
        <Placement />
 | 
						|
        <SubMenu />
 | 
						|
        <Trigger />
 | 
						|
        <api>
 | 
						|
          <CN slot='cn' />
 | 
						|
          <US/>
 | 
						|
        </api>
 | 
						|
      </div>
 | 
						|
    )
 | 
						|
  },
 | 
						|
}
 | 
						|
</script>
 |