259 lines
No EOL
8.7 KiB
JSON
259 lines
No EOL
8.7 KiB
JSON
{
|
|
"type": "plugin",
|
|
"meta": {
|
|
"docsUrl": "https://v2.quasar.dev/quasar-plugins/bottom-sheet"
|
|
},
|
|
"injection": "$q.bottomSheet",
|
|
"methods": {
|
|
"create": {
|
|
"desc": "Creates an ad-hoc Bottom Sheet; Same as calling $q.bottomSheet(...)",
|
|
"params": {
|
|
"opts": {
|
|
"type": "Object",
|
|
"required": true,
|
|
"definition": {
|
|
"class": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueClassProp",
|
|
"desc": "CSS Class name to apply to the Dialog's QCard",
|
|
"examples": [
|
|
"my-class"
|
|
]
|
|
},
|
|
"style": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueStyleProp",
|
|
"desc": "CSS style to apply to the Dialog's QCard",
|
|
"examples": [
|
|
"border: 2px solid black"
|
|
]
|
|
},
|
|
"title": {
|
|
"type": "String",
|
|
"desc": "Title",
|
|
"examples": [
|
|
"Share"
|
|
]
|
|
},
|
|
"message": {
|
|
"type": "String",
|
|
"desc": "Message",
|
|
"examples": [
|
|
"Please select how to share"
|
|
]
|
|
},
|
|
"actions": {
|
|
"type": "Array",
|
|
"desc": "Array of Objects, each Object defining an action",
|
|
"definition": {
|
|
"classes": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueClassProp",
|
|
"desc": "CSS classes for this action",
|
|
"examples": [
|
|
"my-class"
|
|
]
|
|
},
|
|
"style": {
|
|
"type": [
|
|
"String",
|
|
"Array",
|
|
"Object"
|
|
],
|
|
"tsType": "VueStyleProp",
|
|
"desc": "Style definitions to be attributed to this action element",
|
|
"examples": [
|
|
"{ padding: '2px' }"
|
|
],
|
|
"addedIn": "v2.11.7"
|
|
},
|
|
"icon": {
|
|
"type": "String",
|
|
"desc": "Icon name following Quasar convention; Make sure you have the icon library installed unless you are using 'img:' prefix; If 'none' (String) is used as value then no icon is rendered (but screen real estate will still be used for it)",
|
|
"examples": [
|
|
"map",
|
|
"ion-add",
|
|
"img:https://cdn.quasar.dev/logo-v2/svg/logo.svg",
|
|
"img:path/to/some_image.png"
|
|
],
|
|
"category": "content"
|
|
},
|
|
"img": {
|
|
"type": "String",
|
|
"desc": "Path to an image for this action",
|
|
"examples": [
|
|
"(public folder) img/something.png",
|
|
"(relative path format) :src=\"require('./my_img.jpg')\"",
|
|
"(URL) https://some-site.net/some-img.gif"
|
|
]
|
|
},
|
|
"avatar": {
|
|
"type": "String",
|
|
"desc": "Path to an avatar image for this action",
|
|
"examples": [
|
|
"(public folder) img/avatar.png",
|
|
"(relative path format) :src=\"require('./my_img.jpg')\"",
|
|
"(URL) https://some-site.net/some-img.gif"
|
|
]
|
|
},
|
|
"label": {
|
|
"type": [
|
|
"String",
|
|
"Number"
|
|
],
|
|
"desc": "Action label",
|
|
"examples": [
|
|
"Facebook"
|
|
]
|
|
},
|
|
"...": {
|
|
"type": "Any",
|
|
"desc": "Any other custom props"
|
|
}
|
|
}
|
|
},
|
|
"grid": {
|
|
"type": "Boolean",
|
|
"desc": "Display actions as a grid instead of as a list"
|
|
},
|
|
"dark": {
|
|
"type": "Boolean",
|
|
"desc": "Apply dark mode",
|
|
"category": "style"
|
|
},
|
|
"seamless": {
|
|
"type": "Boolean",
|
|
"desc": "Put Bottom Sheet into seamless mode; Does not use a backdrop so user is able to interact with the rest of the page too"
|
|
},
|
|
"persistent": {
|
|
"type": "Boolean",
|
|
"desc": "User cannot dismiss Bottom Sheet if clicking outside of it or hitting ESC key"
|
|
}
|
|
},
|
|
"desc": "Bottom Sheet options"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Object",
|
|
"desc": "Chainable Object",
|
|
"tsType": "DialogChainObject",
|
|
"autoDefineTsType": true,
|
|
"definition": {
|
|
"onOk": {
|
|
"type": "Function",
|
|
"required": true,
|
|
"desc": "Receives a Function param to tell what to do when OK is pressed / option is selected",
|
|
"params": {
|
|
"callbackFn": {
|
|
"type": "Function",
|
|
"desc": "Tell what to do",
|
|
"required": true,
|
|
"params": {
|
|
"payload": {
|
|
"type": "Any",
|
|
"desc": "The payload if called onDialogOK with the parameter or emitted one with the 'ok' event",
|
|
"required": false,
|
|
"examples": [
|
|
"'Quasar Framework'",
|
|
"[ 1, 2, 6, 3 ]",
|
|
"{ book: { id: 1, name: 'Lorem Ipsum' }, user: { name: 'Lorem J. Ipsum', role: 'admin' } }"
|
|
]
|
|
}
|
|
},
|
|
"returns": null,
|
|
"examples": [
|
|
"() => console.log('OK!')",
|
|
"(payload) => Notify.create({ type: 'positive', message: `Successfully saved '${payload.book.name}' book!` })"
|
|
]
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Object",
|
|
"desc": "Chained Object",
|
|
"tsType": "DialogChainObject"
|
|
}
|
|
},
|
|
"onCancel": {
|
|
"type": "Function",
|
|
"required": true,
|
|
"desc": "Receives a Function as param to tell what to do when Cancel is pressed / dialog is dismissed",
|
|
"params": {
|
|
"callbackFn": {
|
|
"type": "Function",
|
|
"desc": "Tell what to do",
|
|
"required": true,
|
|
"params": null,
|
|
"returns": null
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Object",
|
|
"desc": "Chained Object",
|
|
"tsType": "DialogChainObject"
|
|
}
|
|
},
|
|
"onDismiss": {
|
|
"type": "Function",
|
|
"required": true,
|
|
"desc": "Receives a Function param to tell what to do when the dialog is closed",
|
|
"params": {
|
|
"callbackFn": {
|
|
"type": "Function",
|
|
"desc": "Tell what to do",
|
|
"required": true,
|
|
"params": null,
|
|
"returns": null
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Object",
|
|
"desc": "Chained Object",
|
|
"tsType": "DialogChainObject"
|
|
}
|
|
},
|
|
"hide": {
|
|
"type": "Function",
|
|
"required": true,
|
|
"desc": "Hides the dialog when called",
|
|
"params": null,
|
|
"returns": {
|
|
"type": "Object",
|
|
"desc": "Chained Object",
|
|
"tsType": "DialogChainObject"
|
|
}
|
|
},
|
|
"update": {
|
|
"type": "Function",
|
|
"required": true,
|
|
"desc": "Updates the initial properties (given as create() param) except for 'component'",
|
|
"params": {
|
|
"opts": {
|
|
"type": "Object",
|
|
"required": true,
|
|
"desc": "Props (except 'component') which will overwrite the initial create() params; If create() was invoked with a custom dialog component then this param should contain the new componentProps"
|
|
}
|
|
},
|
|
"returns": {
|
|
"type": "Object",
|
|
"desc": "Chained Object",
|
|
"tsType": "DialogChainObject"
|
|
}
|
|
}
|
|
}
|
|
},
|
|
"tsInjectionPoint": true
|
|
}
|
|
}
|
|
} |