Merge pull request #535 from Budibase/Card-component
New card component
This commit is contained in:
Joe
GitHub
commit
bf720c866d
|
|
@ -168,6 +168,9 @@
|
|||
max-width: 200px;
|
||||
text-overflow: ellipsis;
|
||||
border: 1px solid var(--grey-4);
|
||||
overflow: hidden;
|
||||
white-space: pre;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
|
|
@ -187,6 +190,7 @@
|
|||
|
||||
.popovers {
|
||||
display: flex;
|
||||
gap: var(--spacing-m);
|
||||
}
|
||||
|
||||
.no-data {
|
||||
|
|
|
|||
|
|
@ -94,10 +94,6 @@
|
|||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.rotate :global(svg) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -81,10 +81,6 @@
|
|||
color: var(--grey-7);
|
||||
}
|
||||
|
||||
:global(svg) {
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
.rotate :global(svg) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,6 +70,20 @@ export const layout = [
|
|||
{ label: "no wrap", value: "noWrap" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "Gap",
|
||||
key: "gap",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
{ label: "None", value: "0px" },
|
||||
{ label: "4px", value: "4px" },
|
||||
{ label: "8px", value: "8px" },
|
||||
{ label: "16px", value: "16px" },
|
||||
{ label: "20px", value: "20px" },
|
||||
{ label: "32px", value: "32px" },
|
||||
{ label: "64px", value: "64px" },
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
export const margin = [
|
||||
|
|
|
|||
|
|
@ -311,6 +311,174 @@ export default {
|
|||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "Card",
|
||||
description: "Card components",
|
||||
icon: "ri-layout-bottom-line",
|
||||
commonProps: {},
|
||||
children: [
|
||||
{
|
||||
_component: "@budibase/standard-components/card",
|
||||
name: "Vertical",
|
||||
description:
|
||||
"A basic card component that can contain content and actions.",
|
||||
icon: "ri-layout-column-line",
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Image",
|
||||
key: "imageUrl",
|
||||
control: Input,
|
||||
placeholder: "Image",
|
||||
},
|
||||
{
|
||||
label: "Heading",
|
||||
key: "heading",
|
||||
control: Input,
|
||||
placeholder: "Heading",
|
||||
},
|
||||
{
|
||||
label: "Description",
|
||||
key: "description",
|
||||
control: Input,
|
||||
placeholder: "Description",
|
||||
},
|
||||
{
|
||||
label: "Link Text",
|
||||
key: "linkText",
|
||||
control: Input,
|
||||
placeholder: "Link Text",
|
||||
},
|
||||
{
|
||||
label: "Link Url",
|
||||
key: "linkUrl",
|
||||
control: Input,
|
||||
placeholder: "Link URL",
|
||||
},
|
||||
{
|
||||
label: "Link Color",
|
||||
key: "color",
|
||||
control: Input,
|
||||
placeholder: "Link Color",
|
||||
},
|
||||
{
|
||||
label: "Hover Color",
|
||||
key: "linkHoverColor",
|
||||
control: Input,
|
||||
placeholder: "Hover Color",
|
||||
},
|
||||
{
|
||||
label: "Image Height",
|
||||
key: "imageHeight",
|
||||
control: OptionSelect,
|
||||
options: ["12rem", "16rem", "20rem", "24rem"],
|
||||
placeholder: "Image Height",
|
||||
},
|
||||
{
|
||||
label: "Card Width",
|
||||
key: "cardWidth",
|
||||
control: OptionSelect,
|
||||
options: ["16rem", "20rem", "24rem"],
|
||||
placeholder: "Card Width",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
_component: "@budibase/standard-components/cardhorizontal",
|
||||
name: "Horizontal",
|
||||
description:
|
||||
"A basic card component that can contain content and actions.",
|
||||
icon: "ri-layout-row-line",
|
||||
children: [],
|
||||
properties: {
|
||||
design: { ...all },
|
||||
settings: [
|
||||
{
|
||||
label: "Image",
|
||||
key: "imageUrl",
|
||||
control: Input,
|
||||
placeholder: "Image",
|
||||
},
|
||||
{
|
||||
label: "Heading",
|
||||
key: "heading",
|
||||
control: Input,
|
||||
placeholder: "Heading",
|
||||
},
|
||||
{
|
||||
label: "Description",
|
||||
key: "description",
|
||||
control: Input,
|
||||
placeholder: "Description",
|
||||
},
|
||||
{
|
||||
label: "Subtext",
|
||||
key: "subtext",
|
||||
control: Input,
|
||||
placeholder: "Subtext",
|
||||
},
|
||||
{
|
||||
label: "Link Text",
|
||||
key: "linkText",
|
||||
control: Input,
|
||||
placeholder: "Link Text",
|
||||
},
|
||||
{
|
||||
label: "Link Url",
|
||||
key: "linkUrl",
|
||||
control: Input,
|
||||
placeholder: "Link URL",
|
||||
},
|
||||
{
|
||||
label: "Link Color",
|
||||
key: "color",
|
||||
control: Input,
|
||||
placeholder: "Link Color",
|
||||
},
|
||||
{
|
||||
label: "Hover Color",
|
||||
key: "linkHoverColor",
|
||||
control: Input,
|
||||
placeholder: "Hover Color",
|
||||
},
|
||||
{
|
||||
label: "Card Width",
|
||||
key: "cardWidth",
|
||||
control: OptionSelect,
|
||||
options: [
|
||||
"24rem",
|
||||
"28rem",
|
||||
"32rem",
|
||||
"40rem",
|
||||
"48rem",
|
||||
"60rem",
|
||||
"100%",
|
||||
],
|
||||
placeholder: "Card Height",
|
||||
},
|
||||
{
|
||||
label: "Image Width",
|
||||
key: "imageWidth",
|
||||
control: OptionSelect,
|
||||
options: ["8rem", "12rem", "16rem"],
|
||||
placeholder: "Image Width",
|
||||
},
|
||||
{
|
||||
label: "Image Height",
|
||||
key: "imageHeight",
|
||||
control: OptionSelect,
|
||||
options: ["8rem", "12rem", "16rem", "auto"],
|
||||
placeholder: "Image Height",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
_component: "@budibase/materialdesign-components/BasicCard",
|
||||
name: "Card",
|
||||
|
|
|
|||
|
|
@ -268,6 +268,81 @@
|
|||
"model": "models"
|
||||
}
|
||||
},
|
||||
"card": {
|
||||
"name": "Card",
|
||||
"props": {
|
||||
"imageUrl": "string",
|
||||
"heading": "string",
|
||||
"description": "string",
|
||||
"linkText": "string",
|
||||
"linkUrl": "string",
|
||||
"color": "string",
|
||||
"linkHoverColor": "string",
|
||||
"imageHeight": {
|
||||
"type": "options",
|
||||
"default": "20rem",
|
||||
"options": [
|
||||
"12rem",
|
||||
"16rem",
|
||||
"20rem",
|
||||
"24rem"
|
||||
]
|
||||
},
|
||||
"cardWidth": {
|
||||
"type": "options",
|
||||
"default": "20rem",
|
||||
"options": [
|
||||
"16rem",
|
||||
"20rem",
|
||||
"24rem"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"cardhorizontal": {
|
||||
"name": "Horizontal Card",
|
||||
"props": {
|
||||
"imageUrl": "string",
|
||||
"heading": "string",
|
||||
"description": "string",
|
||||
"subtext": "string",
|
||||
"linkText": "string",
|
||||
"linkUrl": "string",
|
||||
"color": "string",
|
||||
"linkHoverColor": "string",
|
||||
"imageWidth": {
|
||||
"type": "options",
|
||||
"default": "8rem",
|
||||
"options": [
|
||||
"8rem",
|
||||
"12rem",
|
||||
"16rem"
|
||||
]
|
||||
},
|
||||
"cardWidth": {
|
||||
"type": "options",
|
||||
"default": "32rem",
|
||||
"options": [
|
||||
"24rem",
|
||||
"28rem",
|
||||
"32rem",
|
||||
"40rem",
|
||||
"48rem",
|
||||
"60rem",
|
||||
"100%"
|
||||
]
|
||||
},
|
||||
"imageHeight": {
|
||||
"type": "options",
|
||||
"default": "8rem",
|
||||
"options": [
|
||||
"8rem",
|
||||
"12rem",
|
||||
"16rem"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"datamap": {
|
||||
"description": "shiny chart",
|
||||
"data": true,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,80 @@
|
|||
<script>
|
||||
import { cssVars, createClasses } from "./cssVars"
|
||||
|
||||
export const className = ""
|
||||
export let imageUrl = ""
|
||||
export let heading = ""
|
||||
export let description = ""
|
||||
export let linkText = ""
|
||||
export let linkUrl
|
||||
export let color
|
||||
export let linkHoverColor
|
||||
export let imageHeight
|
||||
export let cardWidth
|
||||
|
||||
$: cssVariables = {
|
||||
color,
|
||||
linkHoverColor,
|
||||
imageHeight,
|
||||
cardWidth,
|
||||
}
|
||||
|
||||
$: showImage = !!imageUrl
|
||||
</script>
|
||||
|
||||
<div use:cssVars={cssVariables} class="container">
|
||||
{#if showImage}
|
||||
<img class="image" src={imageUrl} alt="" />
|
||||
{/if}
|
||||
<div class="content">
|
||||
<h2 class="heading">{heading}</h2>
|
||||
<h4 class="text">{description}</h4>
|
||||
<a href={linkUrl}>{linkText}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
width: var(--cardWidth);
|
||||
overflow: hidden !important;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100% !important;
|
||||
max-width: 100%;
|
||||
height: var(--imageHeight);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0.5rem 0;
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--linkHoverColor);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,104 @@
|
|||
<script>
|
||||
import { cssVars, createClasses } from "./cssVars"
|
||||
|
||||
export const className = ""
|
||||
export let imageUrl = ""
|
||||
export let heading = ""
|
||||
export let description = ""
|
||||
export let subtext = ""
|
||||
export let linkText = ""
|
||||
export let linkUrl
|
||||
export let color
|
||||
export let linkHoverColor
|
||||
export let cardWidth
|
||||
export let imageWidth
|
||||
export let imageHeight
|
||||
|
||||
$: cssVariables = {
|
||||
color,
|
||||
linkHoverColor,
|
||||
imageWidth,
|
||||
cardWidth,
|
||||
imageHeight,
|
||||
}
|
||||
|
||||
$: showImage = !!imageUrl
|
||||
</script>
|
||||
|
||||
<div use:cssVars={cssVariables} class="container">
|
||||
{#if showImage}
|
||||
<img class="image" src={imageUrl} alt="" />
|
||||
{/if}
|
||||
<div class="content">
|
||||
<main>
|
||||
<h2 class="heading">{heading}</h2>
|
||||
<p class="text">{description}</p>
|
||||
</main>
|
||||
<footer>
|
||||
<p class="subtext">{subtext}</p>
|
||||
<a href={linkUrl}>{linkText}</a>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
height: 100%;
|
||||
max-width: var(--cardWidth);
|
||||
display: flex !important;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: var(--imageWidth);
|
||||
height: var(--imageHeight);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0.85rem 1.5rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 0.85rem;
|
||||
margin: 0.5rem 0 0 0;
|
||||
font-weight: 400;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.subtext {
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0.5rem 0 0 0;
|
||||
text-decoration: none;
|
||||
color: var(--color);
|
||||
font-weight: 600;
|
||||
font-size: 0.85rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--linkHoverColor);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -23,5 +23,7 @@ export { default as list } from "./List.svelte"
|
|||
export { default as datasearch } from "./DataSearch.svelte"
|
||||
export { default as embed } from "./Embed.svelte"
|
||||
export { default as stackedlist } from "./StackedList.svelte"
|
||||
export { default as card } from "./Card.svelte"
|
||||
export { default as cardhorizontal } from "./CardHorizontal.svelte"
|
||||
export { default as recorddetail } from "./RecordDetail.svelte"
|
||||
export * from "./Chart"
|
||||
|
|
|
|||
Loading…
Reference in New Issue