adds navigation bar block component
This commit is contained in:
kevmodrome
parent
cfd93ece49
commit
eeac06e30c
4 changed files with 207 additions and 63 deletions
|
|
@ -52,28 +52,28 @@ export default {
|
|||
name: "Textfield",
|
||||
description: "A textfield component that allows the user to input text.",
|
||||
icon: 'ri-edit-box-line',
|
||||
props: {}
|
||||
props: {}
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/checkbox",
|
||||
name: "Checkbox",
|
||||
description: "A selectable checkbox component",
|
||||
icon: 'ri-checkbox-line',
|
||||
props: {}
|
||||
props: {}
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/radiobutton",
|
||||
name: "Radiobutton",
|
||||
description: "A selectable radiobutton component",
|
||||
icon: 'ri-radio-button-line',
|
||||
props: {}
|
||||
props: {}
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/select",
|
||||
name: "Select",
|
||||
description: "A select component for choosing from different options",
|
||||
icon: 'ri-file-list-line',
|
||||
props: {}
|
||||
props: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -123,9 +123,10 @@ export default {
|
|||
children: []
|
||||
},
|
||||
{
|
||||
name: 'Navbar',
|
||||
description: 'A component for handling the navigation within your app.',
|
||||
icon: 'ri-navigation-fill',
|
||||
name: "Navigation Bar",
|
||||
_component: "@budibase/standard-components/Navigation",
|
||||
description: "A component for handling the navigation within your app.",
|
||||
icon: "ri-navigation-fill",
|
||||
commonProps: {},
|
||||
children: []
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,32 @@
|
|||
{
|
||||
"_lib": "./dist/index.js",
|
||||
"_templates" : {
|
||||
"saveRecordButton" : {
|
||||
"_templates": {
|
||||
"saveRecordButton": {
|
||||
"description": "Save record button",
|
||||
"component": "button"
|
||||
}
|
||||
},
|
||||
"button" : {
|
||||
"Navigation": {
|
||||
"name": "Navigation",
|
||||
"description": "A basic header navigation component",
|
||||
"props": {
|
||||
"logoUrl": "string",
|
||||
"title": "string",
|
||||
"backgroundColor": "string",
|
||||
"color": "string",
|
||||
"borderWidth": "string",
|
||||
"borderColor": "string",
|
||||
"borderStyle": "string"
|
||||
}
|
||||
},
|
||||
"button": {
|
||||
"name": "Button",
|
||||
"description": "an html <button />",
|
||||
"props": {
|
||||
"contentText": { "type": "string", "default": "Button" },
|
||||
"contentText": {
|
||||
"type": "string",
|
||||
"default": "Button"
|
||||
},
|
||||
"className": "string",
|
||||
"disabled": "bool",
|
||||
"onClick": "event",
|
||||
|
|
@ -22,76 +38,110 @@
|
|||
"hoverBackground": "string",
|
||||
"hoverBorder": "string"
|
||||
},
|
||||
"tags": ["layout"],
|
||||
"tags": [
|
||||
"layout"
|
||||
],
|
||||
"presets": {
|
||||
"primary": {
|
||||
"contentText": "Primary Button Preset",
|
||||
"color": "papayawhip",
|
||||
"color": "papayawhip",
|
||||
"padding": "20px",
|
||||
"background": "blue"
|
||||
},
|
||||
"secondary": {
|
||||
"contentText": "Secondary Button Preset",
|
||||
"color": "rebeccapurple",
|
||||
"color": "rebeccapurple",
|
||||
"padding": "10px",
|
||||
"background": "#fff",
|
||||
"border": "1px solid red"
|
||||
},
|
||||
"error": {
|
||||
"contentText": "ERROR",
|
||||
"color": "red",
|
||||
"color": "red",
|
||||
"padding": "10px",
|
||||
"border": "1px solid red"
|
||||
}
|
||||
}
|
||||
},
|
||||
"login" : {
|
||||
}
|
||||
},
|
||||
"login": {
|
||||
"name": "Login Control",
|
||||
"description": "A control that accepts username, password an also handles password resets",
|
||||
"props" : {
|
||||
"props": {
|
||||
"logo": "asset",
|
||||
"loginRedirect": "string",
|
||||
"usernameLabel": {"type":"string", "default": "Username"},
|
||||
"passwordLabel": {"type":"string", "default": "Password"},
|
||||
"loginButtonLabel": {"type":"string", "default": "Login"},
|
||||
"usernameLabel": {
|
||||
"type": "string",
|
||||
"default": "Username"
|
||||
},
|
||||
"passwordLabel": {
|
||||
"type": "string",
|
||||
"default": "Password"
|
||||
},
|
||||
"loginButtonLabel": {
|
||||
"type": "string",
|
||||
"default": "Login"
|
||||
},
|
||||
"buttonClass": "string",
|
||||
"inputClass": "string"
|
||||
},
|
||||
"tags": ["login", "credentials", "password", "logon"]
|
||||
"tags": [
|
||||
"login",
|
||||
"credentials",
|
||||
"password",
|
||||
"logon"
|
||||
]
|
||||
},
|
||||
"input" : {
|
||||
"input": {
|
||||
"name": "Input",
|
||||
"description": "An HTML input",
|
||||
"props" : {
|
||||
"props": {
|
||||
"value": "string",
|
||||
"type": {
|
||||
"type":"options",
|
||||
"options":[
|
||||
"text", "password", "checkbox", "color",
|
||||
"date", "datetime-local", "email",
|
||||
"file", "hidden", "image", "month", "number",
|
||||
"radio", "range", "reset", "search", "submit",
|
||||
"tel", "time", "week"],
|
||||
"default":"text"
|
||||
"type": "options",
|
||||
"options": [
|
||||
"text",
|
||||
"password",
|
||||
"checkbox",
|
||||
"color",
|
||||
"date",
|
||||
"datetime-local",
|
||||
"email",
|
||||
"file",
|
||||
"hidden",
|
||||
"image",
|
||||
"month",
|
||||
"number",
|
||||
"radio",
|
||||
"range",
|
||||
"reset",
|
||||
"search",
|
||||
"submit",
|
||||
"tel",
|
||||
"time",
|
||||
"week"
|
||||
],
|
||||
"default": "text"
|
||||
},
|
||||
"onChange": "event",
|
||||
"className": "string"
|
||||
},
|
||||
"tags": ["form"]
|
||||
"tags": [
|
||||
"form"
|
||||
]
|
||||
},
|
||||
"select" : {
|
||||
"select": {
|
||||
"name": "Select",
|
||||
"description": "An HTML <select> (dropdown)",
|
||||
"props" : {
|
||||
"props": {
|
||||
"value": "string",
|
||||
"className": "string"
|
||||
}
|
||||
},
|
||||
"option" : {
|
||||
"option": {
|
||||
"name": "Option",
|
||||
"description": "An HTML <option>, to be used with <select>",
|
||||
"children": false,
|
||||
"props" : {
|
||||
"props": {
|
||||
"value": "string",
|
||||
"text": "string"
|
||||
}
|
||||
|
|
@ -100,28 +150,32 @@
|
|||
"name": "Text",
|
||||
"description": "stylable block of text",
|
||||
"children": false,
|
||||
"props" : {
|
||||
"props": {
|
||||
"text": "string",
|
||||
"font": "string",
|
||||
"fontSize": "string",
|
||||
"color": "string",
|
||||
"textAlign": {
|
||||
"type": "options",
|
||||
"default":"inline",
|
||||
"type": "options",
|
||||
"default": "inline",
|
||||
"options": [
|
||||
"left", "center", "right"
|
||||
"left",
|
||||
"center",
|
||||
"right"
|
||||
]
|
||||
},
|
||||
"verticalAlign": {
|
||||
"type": "options",
|
||||
"default":"inline",
|
||||
"type": "options",
|
||||
"default": "inline",
|
||||
"options": [
|
||||
"top", "middle", "bottom"
|
||||
"top",
|
||||
"middle",
|
||||
"bottom"
|
||||
]
|
||||
},
|
||||
"formattingTag": {
|
||||
"type": "options",
|
||||
"default":"none",
|
||||
"type": "options",
|
||||
"default": "none",
|
||||
"options": [
|
||||
"none",
|
||||
"<b> - bold",
|
||||
|
|
@ -137,7 +191,10 @@
|
|||
]
|
||||
}
|
||||
},
|
||||
"tags": ["div", "container"]
|
||||
"tags": [
|
||||
"div",
|
||||
"container"
|
||||
]
|
||||
},
|
||||
"textfield": {
|
||||
"name": "Textfield",
|
||||
|
|
@ -166,13 +223,13 @@
|
|||
"checked": "bool",
|
||||
"value": "string",
|
||||
"onchange": "event"
|
||||
}
|
||||
}
|
||||
},
|
||||
"icon": {
|
||||
"description": "A HTML icon tag",
|
||||
"props": {
|
||||
"icon": "string",
|
||||
"fontSize": "string"
|
||||
"fontSize": "string"
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
|
|
@ -200,11 +257,11 @@
|
|||
"container": {
|
||||
"name": "Container",
|
||||
"description": "An element that contains and lays out other elements. e.g. <div>, <header> etc",
|
||||
"props" : {
|
||||
"className":"string",
|
||||
"props": {
|
||||
"className": "string",
|
||||
"onLoad": "event",
|
||||
"type": {
|
||||
"type": "options",
|
||||
"type": "options",
|
||||
"options": [
|
||||
"article",
|
||||
"aside",
|
||||
|
|
@ -227,7 +284,7 @@
|
|||
"borderWidth": "string",
|
||||
"borderColor": "string",
|
||||
"borderStyle": {
|
||||
"type":"options",
|
||||
"type": "options",
|
||||
"options": [
|
||||
"none",
|
||||
"solid",
|
||||
|
|
@ -241,21 +298,31 @@
|
|||
],
|
||||
"default": "none"
|
||||
}
|
||||
|
||||
},
|
||||
"container": true,
|
||||
"tags": ["div", "container", "layout"]
|
||||
"tags": [
|
||||
"div",
|
||||
"container",
|
||||
"layout"
|
||||
]
|
||||
},
|
||||
"heading": {
|
||||
"name": "Heading",
|
||||
"description": "An HTML H1 - H6 tag",
|
||||
"props" : {
|
||||
"className":"string",
|
||||
"props": {
|
||||
"className": "string",
|
||||
"text": "string",
|
||||
"type": {
|
||||
"type": "options",
|
||||
"default": "h1",
|
||||
"options": ["h1","h2","h3","h4","h5","h6"]
|
||||
"options": [
|
||||
"h1",
|
||||
"h2",
|
||||
"h3",
|
||||
"h4",
|
||||
"h5",
|
||||
"h6"
|
||||
]
|
||||
}
|
||||
},
|
||||
"tags": []
|
||||
|
|
@ -263,15 +330,15 @@
|
|||
"thead": {
|
||||
"name": "TableHead",
|
||||
"description": "an HTML <thead> tab",
|
||||
"props" : {
|
||||
"className":"string"
|
||||
"props": {
|
||||
"className": "string"
|
||||
}
|
||||
},
|
||||
"tbody": {
|
||||
"name": "TableBody",
|
||||
"description": "an HTML <tbody> tab",
|
||||
"props" : {
|
||||
"className":"string"
|
||||
"props": {
|
||||
"className": "string"
|
||||
}
|
||||
}
|
||||
}
|
||||
75
packages/standard-components/src/Navigation.svelte
Normal file
75
packages/standard-components/src/Navigation.svelte
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<script>
|
||||
import { cssVars, createClasses } from "./cssVars"
|
||||
|
||||
export let className = ""
|
||||
export let onLoad
|
||||
export let backgroundColor
|
||||
export let color
|
||||
export let borderWidth
|
||||
export let borderColor
|
||||
export let borderStyle
|
||||
export let logoUrl
|
||||
export let title
|
||||
export let _bb
|
||||
|
||||
let itemContainer
|
||||
let hasLoaded
|
||||
let currentChildren
|
||||
|
||||
$: cssVariables = {
|
||||
backgroundColor,
|
||||
color,
|
||||
borderWidth,
|
||||
borderColor,
|
||||
borderStyle,
|
||||
}
|
||||
|
||||
$: {
|
||||
if (itemContainer) {
|
||||
_bb.attachChildren(itemContainer)
|
||||
if (!hasLoaded) {
|
||||
_bb.call(onLoad)
|
||||
hasLoaded = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<nav use:cssVars={cssVariables}>
|
||||
<a href="/">
|
||||
<img class="logo" alt="logo" src={logoUrl} height="30" />
|
||||
<span>{title}</span>
|
||||
</a>
|
||||
<div class="menu-items" bind:this={itemContainer} />
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
color: var(--color);
|
||||
background-color: var(--backgroundColor);
|
||||
align-items: center;
|
||||
display: flex;
|
||||
font-weight: bold;
|
||||
justify-content: space-between;
|
||||
padding: 20px 0 20px 40px;
|
||||
}
|
||||
|
||||
nav > a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 1.5em;
|
||||
color: var(--color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
nav a img {
|
||||
border-radius: 15px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.menu-items {
|
||||
display: flex;
|
||||
}
|
||||
.menu-items > :global(*) {
|
||||
margin: 0 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -13,3 +13,4 @@ export { default as saveRecordButton } from "./Templates/saveRecordButton"
|
|||
export { default as link } from "./Link.svelte"
|
||||
export { default as image } from "./Image.svelte"
|
||||
export { default as icon } from "./Icon.svelte"
|
||||
export { default as Navigation } from "./Navigation.svelte"
|
||||
|
|
|
|||
Loading…
Reference in a new issue