@limetech/lime-elements
Version:
154 lines (153 loc) • 5.77 kB
JavaScript
import { h } from "@stencil/core";
/**
* This component is deprecated and will be removed in a future version of
* Lime Elements. Please use CSS for your flexible container needs 🙂
* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
*
* @deprecated - Please use CSS instead https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
* @private
* @slot - Container content
*/
export class FlexContainer {
constructor() {
/**
* Direction of the main axis
*/
this.direction = 'horizontal';
/**
* Specify how items are aligned along the main axis
*/
this.justify = 'space-between';
/**
* Specify how items are aligned along the cross axis
*/
this.align = 'center';
/**
* Reverse the order of the items
*/
this.reverse = false;
}
componentWillLoad() {
console.warn('limel-flex-container is deprecated, please use CSS instead: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox');
}
render() {
return h("slot", { key: 'f308350023b1ced85d78be3fe3f2365cb30aeabd' });
}
static get is() { return "limel-flex-container"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() {
return {
"$": ["flex-container.scss"]
};
}
static get styleUrls() {
return {
"$": ["flex-container.css"]
};
}
static get properties() {
return {
"direction": {
"type": "string",
"mutable": false,
"complexType": {
"original": "FlexContainerDirection",
"resolved": "\"horizontal\" | \"vertical\"",
"references": {
"FlexContainerDirection": {
"location": "import",
"path": "./flex-container.types",
"id": "src/components/flex-container/flex-container.types.ts::FlexContainerDirection",
"referenceLocation": "FlexContainerDirection"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Direction of the main axis"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "direction",
"defaultValue": "'horizontal'"
},
"justify": {
"type": "string",
"mutable": false,
"complexType": {
"original": "FlexContainerJustify",
"resolved": "\"center\" | \"end\" | \"space-around\" | \"space-between\" | \"space-evenly\" | \"start\"",
"references": {
"FlexContainerJustify": {
"location": "import",
"path": "./flex-container.types",
"id": "src/components/flex-container/flex-container.types.ts::FlexContainerJustify",
"referenceLocation": "FlexContainerJustify"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specify how items are aligned along the main axis"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "justify",
"defaultValue": "'space-between'"
},
"align": {
"type": "string",
"mutable": false,
"complexType": {
"original": "FlexContainerAlign",
"resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
"references": {
"FlexContainerAlign": {
"location": "import",
"path": "./flex-container.types",
"id": "src/components/flex-container/flex-container.types.ts::FlexContainerAlign",
"referenceLocation": "FlexContainerAlign"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specify how items are aligned along the cross axis"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "align",
"defaultValue": "'center'"
},
"reverse": {
"type": "boolean",
"mutable": false,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Reverse the order of the items"
},
"getter": false,
"setter": false,
"reflect": true,
"attribute": "reverse",
"defaultValue": "false"
}
};
}
}