yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive property behavior

Browse Source
This commit is contained in:
Niels Lyngsø
2023-02-21 20:58:01 +01:00
parent 390e8d3f0e
commit 6daa244531
1 changed files with 28 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-property-layout/workspace-property-layout.element.ts
View File

@@ -15,18 +15,25 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
css`
:host {
display: grid;
grid-template-columns: 200px 600px;
gap: var(--uui-size-layout-2);
grid-template-columns: 200px auto;
column-gap: var(--uui-size-layout-2);
border-bottom: 1px solid var(--uui-color-divider);
padding: var(--uui-size-space-6) 0;
container-type: inline-size;
}
:host([orientation="vertical"]) {
display:block;
:host > div {
grid-column: span 2;
}
@container (width > 600px) {
:host(:not([orientation='vertical'])) > div {
grid-column: span 1;
}
}
:host(:last-of-type) {
border-bottom:none;
border-bottom: none;
}
p {
@@ -40,6 +47,15 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
`,
];
/**
* Alias. The technical name of the property.
* @type {string}
* @attr
* @default ''
*/
@property({ type: String })
public alias = '';
/**
* Label. Name of the property.
* @type {string}
@@ -49,6 +65,13 @@ export class UmbWorkspacePropertyLayoutElement extends LitElement {
@property({ type: String })
public label = '';
/**
* Orientation: Horizontal is the default where label goes left and editor right.
* Vertical is where label goes above the editor.
* @type {string}
* @attr
* @default ''
*/
@property({ type: String })
public orientation: 'horizontal' | 'vertical' = 'horizontal';