Работа над SettingsPage

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -6,6 +6,24 @@
                     Настройки
                 </template>
 
+                <el-tabs type="border-card" tab-position="left" style="height: 100%;" v-model="selectedTab">
+                    <el-tab-pane label="Вид">
+                        <el-form :model="form" size="mini" label-width="100px">
+                            <el-form-item>
+                                Название раздела
+                            </el-form-item>
+                            <el-form-item label="item">
+                                <el-input v-model="form.item"></el-input>
+                            </el-form-item>
+                        </el-form>
+                    </el-tab-pane>
+                    <el-tab-pane label="Листание">
+                        
+                    </el-tab-pane>
+                    <el-tab-pane label="Другое">
+                        
+                    </el-tab-pane>
+                </el-tabs>
             </Window>
         </div>
     </div>
@@ -24,8 +42,8 @@ export default @Component({
     },
 })
 class SettingsPage extends Vue {
-    sliderValue = null;
-    sliderMax = null;
+    selectedTab = null;
+    form = {};
 
     created() {
         this.commit = this.$store.commit;
@@ -65,4 +83,8 @@ class SettingsPage extends Vue {
     display: flex;
     position: relative;
 }
+
+.el-form {
+    border-top: 2px solid #bbbbbb;
+}
 </style>

client/element.js

@@ -62,6 +62,12 @@ import './theme/progress.css';
 import ElSlider from 'element-ui/lib/slider';
 import './theme/slider.css';
 
+import ElForm from 'element-ui/lib/form';
+import './theme/form.css';
+
+import ElFormItem from 'element-ui/lib/form-item';
+import './theme/form-item.css';
+
 import Notification from 'element-ui/lib/notification';
 import './theme/notification.css';
 
@@ -75,7 +81,7 @@ const components = {
     ElMenu, ElMenuItem, ElButton, ElCheckbox, ElTabs, ElTabPane, ElTooltip,
     ElContainer, ElAside, ElMain, ElHeader,
     ElInput, ElTable, ElTableColumn,
-    ElProgress, ElSlider
+    ElProgress, ElSlider, ElForm, ElFormItem,
 };
 
 for (let name in components) {