examples.layout.card #5398

neomjs · Apr 20, 2024 · edc44fd · edc44fd
1 parent 38a58dc
commit edc44fd
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 0 deletions.
diff --git a/examples/layout/card/MainContainer.mjs b/examples/layout/card/MainContainer.mjs
@@ -0,0 +1,133 @@
+import Button from '../../../src/button/Base.mjs';
+import CheckBox from '../../../src/form/field/CheckBox.mjs';
+import ComboBox from '../../../src/form/field/ComboBox.mjs';
+import ConfigurationViewport from '../../ConfigurationViewport.mjs';
+import Container from '../../../src/container/Base.mjs';
+import NumberField from '../../../src/form/field/Number.mjs';
+import Radio from '../../../src/form/field/Radio.mjs';
+import TextField from '../../../src/form/field/Text.mjs';
+import Toolbar from '../../../src/toolbar/Base.mjs';
+
+/**
+ * @class Neo.examples.layout.card.MainContainer
+ * @extends Neo.examples.ConfigurationViewport
+ */
+class MainContainer extends ConfigurationViewport {
+ static config = {
+ className : 'Neo.examples.layout.card.MainContainer',
+ configItemLabelWidth: 160,
+ configItemWidth : 280,
+ layout : {ntype: 'hbox', align: 'stretch'}
+ }
+
+ createConfigurationComponents() {
+ let me = this,
+ {layout} = me.exampleComponent;
+
+ return [{
+ module : Radio,
+ checked : layout.slideDirection === 'bottom-left',
+ hideValueLabel: false,
+ labelText : 'slideDirection',
+ listeners : {change: me.onRadioLayoutChange.bind(me, 'slideDirection', 'horizontal')},
+ name : 'slideDirection',
+ valueLabelText: 'horizontal'
+ }, {
+ module : Radio,
+ checked : layout.slideDirection === 'vertical',
+ hideValueLabel: false,
+ labelText : '',
+ listeners : {change: me.onRadioLayoutChange.bind(me, 'slideDirection', 'vertical')},
+ name : 'slideDirection',
+ valueLabelText: 'vertical'
+ }, {
+ module : Radio,
+ checked : layout.slideDirection === null,
+ hideValueLabel: false,
+ labelText : '',
+ listeners : {change: me.onRadioLayoutChange.bind(me, 'slideDirection', null)},
+ name : 'slideDirection',
+ valueLabelText: 'null'
+ }, {
+ module : NumberField,
+ clearable : true,
+ labelText : 'height',
+ listeners : {change: me.onConfigChange.bind(me, 'height')},
+ maxValue : 300,
+ minValue : 30,
+ stepSize : 5,
+ style : {marginTop: '10px'},
+ value : me.exampleComponent.height
+ }, {
+ module : NumberField,
+ clearable : true,
+ labelText : 'width',
+ listeners : {change: me.onConfigChange.bind(me, 'width')},
+ maxValue : 300,
+ minValue : 100,
+ stepSize : 5,
+ style : {marginTop: '10px'},
+ value : me.exampleComponent.width
+ }];
+ }
+
+ /**
+ * @returns {Neo.component.Base}
+ */
+ createExampleComponent() {
+ return Neo.create({
+ module : Container,
+ height : 300,
+ width : 400,
+
+ items: [{
+ module: Container,
+ layout: {ntype: 'card', slideDirection: 'horizontal'},
+ items : [{
+ style: {backgroundColor: 'red'}
+ }, {
+ style: {backgroundColor: 'blue'}
+ }]
+ }, {
+ module: Toolbar,
+ flex : 'none',
+ items : [{
+ handler: 'onNextButtonClick',
+ text : 'Prev'
+ }, '->', {
+ handler: 'onPrevButtonClick',
+ text : 'Next'
+ }]
+ }]
+ })
+ }
+
+ /**
+ * @param {Object} data
+ */
+ onNextButtonClick(data) {
+ this.exampleComponent.layout.activeIndex++;
+ }
+
+ /**
+ * @param {String} config
+ * @param {String} value
+ * @param {Object} opts
+ */
+ onRadioLayoutChange(config, value, opts) {
+ if (opts.value === true) { // we only want to listen to check events, not uncheck
+ this.exampleComponent.layout[config] = value;
+ }
+ }
+
+ /**
+ * @param {Object} data
+ */
+ onPrevButtonClick(data) {
+ this.exampleComponent.layout.activeIndex--;
+ }
+}
+
+Neo.setupClass(MainContainer);
+
+export default MainContainer;
diff --git a/examples/layout/card/app.mjs b/examples/layout/card/app.mjs
@@ -0,0 +1,6 @@
+import MainContainer from './MainContainer.mjs';
+
+export const onStart = () => Neo.app({
+ mainView: MainContainer,
+ name : 'Neo.examples.layout.card'
+});
diff --git a/examples/layout/card/index.html b/examples/layout/card/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <meta charset="UTF-8">
+ <title>Neo Card Layout</title>
+</head>
+<body>
+ <script src="../../../src/MicroLoader.mjs" type="module"></script>
+</body>
+</html>
diff --git a/examples/layout/card/neo-config.json b/examples/layout/card/neo-config.json
@@ -0,0 +1,6 @@
+{
+ "appPath" : "examples/layout/card/app.mjs",
+ "basePath" : "../../../",
+ "environment": "development",
+ "mainPath" : "./Main.mjs"
+}