vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

ButtonGroup demo updates

pull/5300/head
tugcekucukoglu 2024-02-16 14:08:18 +03:00
parent fc28340d8b
commit 0cb64e33c1
4 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
doc/button/ButtonSetDoc.vue → doc/button/ButtonGroupDoc.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonSet</i> component.</p> <p>Multiple buttons are grouped when wrapped inside an element with <i>ButtonGroup</i> component.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ButtonSet> <ButtonGroup>
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" /> <Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" /> <Button label="Cancel" icon="pi pi-times" />
</ButtonSet> </ButtonGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
</template> </template>
@ -18,20 +18,20 @@ export default {
return { return {
code: { code: {
basic: ` basic: `
<ButtonSet> <ButtonGroup>
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" /> <Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" /> <Button label="Cancel" icon="pi pi-times" />
</ButtonSet> </ButtonGroup>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ButtonSet> <ButtonGroup>
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" /> <Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" /> <Button label="Cancel" icon="pi pi-times" />
</ButtonSet> </ButtonGroup>
</div> </div>
</template> </template>
@ -41,11 +41,11 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<ButtonSet> <ButtonGroup>
<Button label="Save" icon="pi pi-check" /> <Button label="Save" icon="pi pi-check" />
<Button label="Delete" icon="pi pi-trash" /> <Button label="Delete" icon="pi pi-trash" />
<Button label="Cancel" icon="pi pi-times" /> <Button label="Cancel" icon="pi pi-times" />
</ButtonSet> </ButtonGroup>
</div> </div>
</template> </template>

42
doc/common/apidoc/index.json
View File

@ -5371,7 +5371,7 @@
} }
], ],
"methods": [], "methods": [],
"extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle" "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
} }
} }
} }
@ -6911,11 +6911,11 @@
} }
} }
}, },
"buttonset": { "buttongroup": {
"description": "A set of Buttons can be displayed together using the ButtonSet component.\n\n[Live Demo](https://www.primevue.org/button/)", "description": "A set of Buttons can be displayed together using the ButtonGroup component.\n\n[Live Demo](https://www.primevue.org/button/)",
"components": { "components": {
"default": { "default": {
"description": "A set of Buttons can be displayed together using the ButtonSet component.", "description": "A set of Buttons can be displayed together using the ButtonGroup component.",
"methods": { "methods": {
"description": "Defines methods that can be accessed by the component's reference.", "description": "Defines methods that can be accessed by the component's reference.",
"values": [] "values": []
@ -6928,7 +6928,7 @@
"methodDescription": "Defines methods that can be accessed by the component's reference.", "methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.", "typeDescription": "Defines the custom types used by the module.",
"values": { "values": {
"ButtonSetPassThroughMethodOptions": { "ButtonGroupPassThroughMethodOptions": {
"description": "Custom passthrough(pt) option method.", "description": "Custom passthrough(pt) option method.",
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
@ -6944,7 +6944,7 @@
"name": "props", "name": "props",
"optional": false, "optional": false,
"readonly": false, "readonly": false,
"type": "ButtonSetProps", "type": "ButtonGroupProps",
"default": "", "default": "",
"description": "Defines valid properties." "description": "Defines valid properties."
}, },
@ -6959,15 +6959,15 @@
], ],
"methods": [] "methods": []
}, },
"ButtonSetPassThroughOptions": { "ButtonGroupPassThroughOptions": {
"description": "Custom passthrough(pt) options.", "description": "Custom passthrough(pt) options.",
"relatedProp": "ButtonSetProps.pt", "relatedProp": "ButtonGroupProps.pt",
"props": [ "props": [
{ {
"name": "root", "name": "root",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "ButtonSetPassThroughOptionType", "type": "ButtonGroupPassThroughOptionType",
"default": "", "default": "",
"description": "Used to pass attributes to the root's DOM element." "description": "Used to pass attributes to the root's DOM element."
}, },
@ -6982,7 +6982,7 @@
], ],
"methods": [] "methods": []
}, },
"ButtonSetPassThroughAttributes": { "ButtonGroupPassThroughAttributes": {
"description": "Custom passthrough attributes for each DOM elements", "description": "Custom passthrough attributes for each DOM elements",
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
@ -6995,15 +6995,15 @@
], ],
"methods": [] "methods": []
}, },
"ButtonSetProps": { "ButtonGroupProps": {
"description": "Defines valid properties in ButtonSet component.", "description": "Defines valid properties in ButtonGroup component.",
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
{ {
"name": "pt", "name": "pt",
"optional": true, "optional": true,
"readonly": false, "readonly": false,
"type": "PassThrough<ButtonSetPassThroughOptions>", "type": "PassThrough<ButtonGroupPassThroughOptions>",
"default": "", "default": "",
"description": "Used to pass attributes to DOM elements inside the component." "description": "Used to pass attributes to DOM elements inside the component."
}, },
@ -7026,8 +7026,8 @@
], ],
"methods": [] "methods": []
}, },
"ButtonSetSlots": { "ButtonGroupSlots": {
"description": "Defines valid slots in ButtonSet component.", "description": "Defines valid slots in ButtonGroup component.",
"relatedProp": "", "relatedProp": "",
"props": [], "props": [],
"methods": [ "methods": [
@ -7039,8 +7039,8 @@
} }
] ]
}, },
"ButtonSetEmits": { "ButtonGroupEmits": {
"description": "Defines valid emits in ButtonSet component.", "description": "Defines valid emits in ButtonGroup component.",
"relatedProp": "", "relatedProp": "",
"props": [], "props": [],
"methods": [] "methods": []
@ -7050,20 +7050,20 @@
"types": { "types": {
"description": "Defines the custom types used by the module.", "description": "Defines the custom types used by the module.",
"values": { "values": {
"ButtonSetPassThroughOptionType": { "ButtonGroupPassThroughOptionType": {
"values": "ButtonSetPassThroughAttributes | (options: ButtonSetPassThroughMethodOptions) => undefined | string | null | undefined" "values": "ButtonGroupPassThroughAttributes | (options: ButtonGroupPassThroughMethodOptions) => undefined | string | null | undefined"
} }
} }
} }
}, },
"buttonset/style/ButtonSetStyle": { "buttongroup/style/ButtonGroupStyle": {
"interfaces": { "interfaces": {
"description": "Defines the custom interfaces used by the module.", "description": "Defines the custom interfaces used by the module.",
"eventDescription": "Defines the custom events used by the component's emit.", "eventDescription": "Defines the custom events used by the component's emit.",
"methodDescription": "Defines methods that can be accessed by the component's reference.", "methodDescription": "Defines methods that can be accessed by the component's reference.",
"typeDescription": "Defines the custom types used by the module.", "typeDescription": "Defines the custom types used by the module.",
"values": { "values": {
"ButtonStyle": { "ButtonGroupStyle": {
"relatedProp": "", "relatedProp": "",
"props": [ "props": [
{ {

2
modules/nuxt-primevue/runtime/core/components/index.js
View File

@ -30,7 +30,7 @@ const form = [
'TriStateCheckbox' 'TriStateCheckbox'
]; ];
const button = ['Button', 'ButtonSet', 'SpeedDial', 'SplitButton']; const button = ['Button', 'ButtonGroup', 'SpeedDial', 'SplitButton'];
const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'DataViewLayoutOptions', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller']; const data = ['Column', 'Row', 'ColumnGroup', 'DataTable', 'DataView', 'DataViewLayoutOptions', 'OrderList', 'OrganizationChart', 'Paginator', 'PickList', 'Tree', 'TreeTable', 'Timeline', 'VirtualScroller'];

10
pages/button/index.vue
View File

@ -4,7 +4,7 @@
header="Button" header="Button"
description="Button is an extension to standard input element with icons and theming." description="Button is an extension to standard input element with icons and theming."
:componentDocs="docs" :componentDocs="docs"
:apiDocs="['Button', 'ButtonSet']" :apiDocs="['Button', 'ButtonGroup']"
:ptTabComponent="ptComponent" :ptTabComponent="ptComponent"
:themingDocs="themingDoc" :themingDocs="themingDoc"
/> />
@ -14,7 +14,7 @@
import AccessibilityDoc from '@/doc/button/AccessibilityDoc.vue'; import AccessibilityDoc from '@/doc/button/AccessibilityDoc.vue';
import BadgesDoc from '@/doc/button/BadgesDoc.vue'; import BadgesDoc from '@/doc/button/BadgesDoc.vue';
import BasicDoc from '@/doc/button/BasicDoc.vue'; import BasicDoc from '@/doc/button/BasicDoc.vue';
import ButtonSetDoc from '@/doc/button/ButtonSetDoc.vue'; import ButtonGroupDoc from '@/doc/button/ButtonGroupDoc.vue';
import DisabledDoc from '@/doc/button/DisabledDoc.vue'; import DisabledDoc from '@/doc/button/DisabledDoc.vue';
import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue'; import IconOnlyDoc from '@/doc/button/IconOnlyDoc.vue';
import IconsDoc from '@/doc/button/IconsDoc.vue'; import IconsDoc from '@/doc/button/IconsDoc.vue';
@ -106,9 +106,9 @@ export default {
component: BadgesDoc component: BadgesDoc
}, },
{ {
id: 'buttonset', id: 'buttongroup',
label: 'Button Set', label: 'Button Group',
component: ButtonSetDoc component: ButtonGroupDoc
} /* } /*
{ {
id: 'sizes', id: 'sizes',