budibase/packages/materialdesign-components/components.json

409 lines
9.7 KiB
JSON

{
"_lib": "./dist/index.js",
"_templates": {
"indexDatatable": {
"description": "Datatable based on an Index",
"component": "Datatable"
},
"recordForm": {
"description": "Form for saving a record",
"component": "Form"
}
},
"Body1": {
"name": "Body1",
"description": "Sets the font properties as Roboto Body 1",
"props": {
"text": "string"
},
"tags": []
},
"Body2": {
"name": "Body2",
"description": "Sets the font properties as Roboto Body 2",
"props": {
"text": "string"
},
"tags": []
},
"Select": {
"name": "Select",
"description": "A material design select (aka Dropdown, aka Combobox)",
"props": {
"onSelect": "event",
"value": "string",
"width": "string",
"variant": {
"type": "options",
"options": [
"filled", "outlined"
]
},
"disabled": "bool",
"required": "bool",
"label": "string",
"helperText": "string",
"persistent": "bool"
}
},
"List": {
"name": "List",
"description": "A Material Design List Component.",
"props": {
"onSelect": "event",
"singleSelection": "bool",
"variant": {
"type": "options",
"options": ["one-line", "two-line"],
"default": "one-line"
}
}
},
"ListItem": {
"name": "ListItem",
"description": "Use as item in a 'List' or 'Select' component",
"props": {
"value": "string",
"text": "string",
"secondaryText": "string",
"leadingIcon": "string",
"trailingIcon": "string",
"selected": "bool",
"disabled": "bool",
"divideAfter": "bool"
}
},
"Button": {
"name": "Button",
"children": false,
"description": "A Material Design button with different variations. It renders as an anchor if href is passed to it.",
"props": {
"onClick": "event",
"variant": {
"type": "options",
"options": ["text", "raised", "unelevated", "outlined"],
"default": "text"
},
"colour": {
"type": "options",
"options": ["primary", "secondary"],
"default": "primary"
},
"size": {
"type": "options",
"options": ["small", "medium", "large"],
"default": "medium"
},
"href": "string",
"icon": "string",
"trailingIcon": "bool",
"fullwidth": "bool",
"text": "string",
"disabled": "bool"
},
"tags": []
},
"Caption": {
"name": "Caption",
"description": "Sets the font properties as Roboto Caption",
"props": {
"text": "string"
},
"tags": []
},
"Card": {
"name": "Card",
"description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
"props": {
"width": "string",
"height": "string",
"variant": {
"type": "options",
"options": ["standard", "outlined"],
"default": "standard"
}
}
},
"CardBody": {
"name": "CardBody",
"description": "A Material CardBody component. Contains the main content of a Material Card component",
"props": {
"onClick": "event"
}
},
"CardImage": {
"name": "CardImage",
"description": "An image component for the Material Card component",
"props": {
"displayHorizontal": "bool",
"url": "string",
"title": "string",
"subtitle": "string"
}
},
"CardHeader": {
"name": "CardHeader",
"description": "Displays a icon, title and subtitle above main body of the Material Card component",
"props": {
"title": "string",
"subtitle": "string",
"icon": "string"
}
},
"CardFooter": {
"name": "CardFooter",
"description": "Displays buttons / icon buttons as actions for the Material Card component",
"props": {
"padding": "string"
}
},
"Checkbox": {
"name": "Checkbox",
"description": "A Material Design checkbox. Supports aligning label before or after checkbox.",
"props": {
"onClick": "event",
"id": "string",
"label": "string",
"disabled": "bool",
"alignEnd": "bool",
"indeterminate": "bool",
"checked": "bool"
},
"tags": []
},
"Checkboxgroup": {
"name": "Checkboxgroup",
"description": "A group of material design checkboxes. Supports row and column orientation.",
"props": {
"onChange": "event",
"label":"string",
"orientation": {
"type": "options",
"options": ["row", "column"],
"default": "row"
},
"fullwidth": "bool",
"disabled": "bool",
"alignEnd": "bool"
}
},
"Datatable": {
"name": "Datatable",
"description": "A Material Design component to represent tabular data.",
"props": {
"onLoad":"event"
},
"tags": []
},
"DatatableHead": {
"name": "DatatableHead",
"description": "Material Design <thead>.",
"props": {}
},
"DatatableCell": {
"name": "DatatableCell",
"description": "Material Design <td>.",
"props": {}
},
"DatatableBody": {
"name": "DatatableBody",
"description": "Material Design <tbody>.",
"props": {}
},
"DatatableRow": {
"name": "DatatableRow",
"description": "Material Design <tr>.",
"props": {}
},
"DatePicker": {
"name": "DatePicker",
"description": "Material Design DatePicker",
"props": {
"date": "string",
"label": "string",
"onSelect": "event"
},
"tags": []
},
"H1": {
"name": "H1",
"description": "Sets the font properties as Roboto Headline1",
"props": {
"text": "string"
},
"tags": []
},
"H2": {
"name": "H2",
"description": "Sets the font properties as Roboto Headline2",
"props": {
"text": "string"
},
"tags": []
},
"H3": {
"name": "H3",
"description": "Sets the font properties as Roboto Headline3",
"props": {
"text": "string"
},
"tags": []
},
"H4": {
"name": "H4",
"description": "Sets the font properties as Roboto Headline4",
"props": {
"text": "string"
},
"tags": []
},
"H5": {
"name": "H5",
"description": "Sets the font properties as Roboto Headline5",
"props": {
"text": "string"
},
"tags": []
},
"H6": {
"name": "H6",
"description": "Sets the font properties as Roboto Headline6",
"props": {
"text": "string"
},
"tags": []
},
"IconButton": {
"onClick": "event",
"disabled": "bool",
"href": "string",
"icon": "string",
"size": {
"type":"options",
"options": ["small", "medium", "large"],
"default": "medium"
},
"tags": []
},
"Label": {
"name": "Label",
"description": "A simple label component that displays its text in the standard Roboto Material Design font",
"props": {
"bold": "bool"
},
"tags": []
},
"Menu": {
"name": "Menu",
"description": "A Material Design menu component. Anchor to other components to create a pop-out menu.",
"props": {
"onSelect": "event",
"width": "string",
"open": "bool",
"useFixedPosition": "bool",
"absolutePositionX": "number",
"absolutePositionY": "number"
}
},
"Overline": {
"name": "Overline",
"description": "Sets the font properties as Roboto Overline",
"props": {
"text": "string"
},
"tags": []
},
"Radiobutton": {
"name": "Radiobutton",
"description": "A Material Design radiobutton. Supports aligning label before or after radiobutton.",
"props": {
"onClick": "event",
"id": "string",
"label": "string",
"name": "string",
"checked": "bool",
"disabled": "bool",
"alignEnd": "bool"
},
"tags": []
},
"Radiobuttongroup": {
"name": "Radiobuttongroup",
"description": "A Material Design Radiobutton group. Supports row and column orientation.",
"props": {
"onChange": "event",
"name": "string",
"orientation": {
"type": "options",
"options": ["row", "column"],
"default": "row"
},
"fullwidth": "bool",
"alignEnd": "bool",
"disabled": "bool"
}
},
"Sub1": {
"name": "Sub1",
"description": "Sets the font properties as Roboto Subtitle1",
"props": {
"text": "string"
},
"tags": []
},
"Sub2": {
"name": "Sub2",
"description": "Sets the font properties as Roboto Subtitle2",
"props": {
"text": "string"
},
"tags": []
},
"Textfield": {
"name": "Textfield",
"description": "A Material Design textfield with multiple variants. Can also be converted to a text area / multine text field.",
"props": {
"onChange": "event",
"value": "string",
"label": "string",
"variant": {
"type": "options",
"options": ["standard", "outlined", "filled"],
"default": "standard"
},
"disabled": "bool",
"fullwidth": "bool",
"colour": {
"type": "options",
"options": ["primary", "secondary"],
"default": "primary"
},
"size":{
"type": "options",
"options": ["small", "medium", "large"],
"default": "medium"
},
"type": {
"type": "options",
"options": ["text", "password"],
"default": "text"
},
"required": "bool",
"minLength": "number",
"maxLength": "number",
"helperText": "string",
"errorText": "string",
"placeholder": "string",
"icon": "string",
"trailingIcon": "bool",
"textarea": "bool",
"rows": "number",
"cols": "number",
"validation": "bool",
"persistent": "bool"
},
"tags": []
}
}