@limetech/lime-elements
Version:
129 lines (128 loc) • 3.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() {
this.direction = 'horizontal';
this.justify = 'space-between';
this.align = 'center';
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", null);
}
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"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Direction of the main axis"
},
"attribute": "direction",
"reflect": true,
"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"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specify how items are aligned along the main axis"
},
"attribute": "justify",
"reflect": true,
"defaultValue": "'space-between'"
},
"align": {
"type": "string",
"mutable": false,
"complexType": {
"original": "FlexContainerAlign",
"resolved": "\"center\" | \"end\" | \"start\" | \"stretch\"",
"references": {
"FlexContainerAlign": {
"location": "import",
"path": "./flex-container.types"
}
}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Specify how items are aligned along the cross axis"
},
"attribute": "align",
"reflect": true,
"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"
},
"attribute": "reverse",
"reflect": true,
"defaultValue": "false"
}
};
}
}
//# sourceMappingURL=flex-container.js.map