diff --git a/src/popover/README.md b/src/popover/README.md index 5772a8d1b..27ea687f2 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -14,7 +14,136 @@ Vue.use(Popover); ### Basic Usage ```html + + + +``` +```js +export default { + data() { + return { + showPopover: false, + actions: [ + { text: 'Option 1' }, + { text: 'Option 2' }, + { text: 'Option 3' }, + ], + }; + }, +}; +``` + +### Dark theme + +Using the `theme` prop to change the style of Popover. + +```html + + + +``` + +```js +export default { + data() { + return { + showPopover: false, + actions: [ + { text: 'Option 1' }, + { text: 'Option 2' }, + { text: 'Option 3' }, + ], + }; + }, +}; +``` + +### Show Icon + +```html + + + +``` + +```js +export default { + data() { + return { + showPopover: false, + actions: [ + { text: 'Option 1', icon: 'add-o' }, + { text: 'Option 2', icon: 'music-o' }, + { text: 'Option 3', icon: 'more-o' }, + ], + }; + }, +}; +``` + +### Disable Action + +Using the `disabled` option to disable an action. + +```html + + + +``` + +```js +export default { + data() { + return { + showPopover: false, + actions: [ + { text: 'Option 1', disabled: true }, + { text: 'Option 2', disabled: true }, + { text: 'Option 3' }, + ], + }; + }, +}; +``` + +### Placement + +```html + +``` + +`placement` supports the following values: + +```bash +top # Top middle +top-start # Top left +top-end # Top right +left # Left middle +left-start # Left top +left-end # Left bottom +right # Right middle +right-start # Right top +right-end # Right bottom +bottom # Bottom middle +bottom-start # Bottom left +bottom-end # Bottom right ``` ## API @@ -22,11 +151,37 @@ Vue.use(Popover); ### Props | Attribute | Description | Type | Default | -| --------- | ----------- | ---- | ------- | +| --- | --- | --- | --- | +| v-model | Whether to show Popover | _boolean_ | `false` | +| actions | Actions | _Action[]_ | `[]` | +| placement | Placement | _string_ | `bottom` | +| theme | Theme,can be set to `dark` | _string_ | `light` | +| overlay | Whether to show overlay | _boolean_ | `false` | +| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` | +| close-on-click-outside | Whether to close when clicking outside | _boolean_ | `true` | +| get-container | Return the mount node for Popover | _string \| () => Element_ | `body` | +### Data Structure of Action + +| Key | Description | Type | +| --------- | ----------------------- | --------- | +| text | Action Text | _string_ | +| icon | Icon | _string_ | +| disabled | Whether to be disabled | _boolean_ | +| className | className of the option | _any_ | ### Events -| Event | Description | Arguments | -| ----- | ----------- | --------- | +| Event | Description | Arguments | +| ------ | -------------------------------- | ------------------------------- | +| select | Triggered when clicking action | _action: Action, index: number_ | +| open | Triggered when opening Popover | - | +| close | Triggered when closing Popover | - | +| opened | Triggered when Popover is opened | - | +| closed | Triggered when Popover is closed | - | +### Slots + +| Name | Description | +| --------- | ----------------- | +| reference | Reference Element | diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue index 0d52daa8d..69ce4f1c6 100644 --- a/src/popover/demo/index.vue +++ b/src/popover/demo/index.vue @@ -143,7 +143,7 @@ export default { showPopover: 'Show Popover', actionOptions: 'Action Options', disableAction: 'Disable Action', - choosePlacement: 'Choose Placement', + choosePlacement: 'Placement', }, },