element ui

In this example below you will see how to do a element ui with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by DaihanaMora, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright DaihanaMora ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>element ui</title>
  
  
  <link rel='stylesheet prefetch' href='https://unpkg.com/element-ui/lib/theme-chalk/index.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  
<div id="app">
  <el-row :gutter="15">
    <el-col class="grid-content" :md="4">
      <!--el-radio-group(v-model='isCollapse', style='margin-bottom: 20px;')
      el-radio-button(:label='false') expand
      el-radio-button(:label='true') collapse
      -->
      <!--el-menu.el-menu-vertical-demo(@open='handleOpen', @close='handleClose', :collapse='isCollapse')
      el-submenu(index='1')
      	template(slot='title')
      		i.el-icon-location
      		span(slot='title') Datos del centro
      	el-menu-item-group
      		span(slot='title') Group One
      		el-menu-item(index='1-1') item one
      		el-menu-item(index='1-2') item two
      	el-menu-item-group(title='Group Two')
      		el-menu-item(index='1-3') item three
      	el-submenu(index='1-4')
      		span(slot='title') item four
      		el-menu-item(index='1-4-1') item one
      el-menu-item(index='2')
      	i.el-icon-menu
      	span(slot='title') Sedes
      el-menu-item(index='3')
      	i.el-icon-setting
      	span(slot='title') Productos
      el-menu-item(index='4')
      	i.el-icon-setting
      	span(slot='title') Servicios
      el-menu-item(index='5')
      	i.el-icon-setting
      	span(slot='title') Categoria
      el-menu-item(index='6')
      	i.el-icon-setting
      	span(slot='title') Usuario
      -->
    </el-col>
    <el-col class="grid-content" :md="18" style="margin-top:2rem; margin-bottom:2rem;"> 
      <el-row :gutter="15">
        <el-col class="grid-content" :md="8">
          <el-card class="box-card">
            <div class="clearfix" slot="header"><span>Sede 1</span>
              <el-button style="float: right; padding: 3px 0;" type="text" icon="el-icon-more"> </el-button>
            </div>
            <div class="text item">Teléfonos: <br> Dirección: Calle 1 <br> tiempo de agenda: 30 Minutos <br> Horario Lunes a viernes: 08:00 - 17:00 <br> Horario Sábado: 08:00 - 13:00 <br> Horario Domingo: Sin servicio</div>
            <el-button plain="plain">Editar </el-button>
          </el-card>
        </el-col>
        <el-col class="grid-content" :md="8">
          <el-card class="box-card">
            <div class="clearfix" slot="header"><span>Sede 1</span>
              <el-button style="float: right; padding: 3px 0;" type="text" icon="el-icon-more"> </el-button>
            </div>
            <div class="text item">Teléfonos: <br> Dirección: Calle 1 <br> tiempo de agenda: 30 Minutos <br> Horario Lunes a viernes: 08:00 - 17:00 <br> Horario Sábado: 08:00 - 13:00 <br> Horario Domingo: Sin servicio</div>
            <el-button>Editar </el-button>
          </el-card>
        </el-col>
        <el-col class="grid-content" :md="8">
          <el-card class="box-card">
            <div class="clearfix" slot="header"><span>Sede 1</span>
              <el-button style="float: right; padding: 3px 0;" type="text" icon="el-icon-more"> </el-button>
            </div>
            <div class="text item">Teléfonos: <br> Dirección: Calle 1 <br> tiempo de agenda: 30 Minutos <br> Horario Lunes a viernes: 08:00 - 17:00 <br> Horario Sábado: 08:00 - 13:00 <br> Horario Domingo: Sin servicio</div>
          </el-card>
        </el-col>
      </el-row>
      <hr/>
      <h2>Datos del centro</h2>
      <el-form :label-position="labelPosition" label-width="120px" :model="formLabelAlign" ref="formLabelAlign" :rules="rules">
        <el-form-item label="Nombre">
          <el-input v-model="formLabelAlign.name" size="medium"></el-input>
        </el-form-item>
        <el-form-item label="Codigo de centro">
          <el-input v-model="formLabelAlign.region" size="small"></el-input>
        </el-form-item>
        <el-form-item label="Activity form">
          <el-input v-model="formLabelAlign.type"></el-input>
        </el-form-item>
        <el-form-item label="Categoria">
          <el-input v-model="formLabelAlign.type"></el-input>
        </el-form-item>
        <el-form-item label="Fecha" required="">
          <el-col :span="11">
            <el-form-item prop="date1">
              <el-date-picker type="date" placeholder="Pick a date" v-model="formLabelAlign.date1" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-form-item prop="date2">
              <el-time-picker type="fixed-time" placeholder="Pick a time" v-model="formLabelAlign.date2" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="Profesional" required="">
          <el-select v-model="value" placeholder="Select">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary">Aceptar </el-button>
      </el-form>
    </el-col>
  </el-row>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.js'></script>
<script src='https://unpkg.com/element-ui/lib/index.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/DaihanaMora/element-ui-yPOKoE */
@import url("//unpkg.com/element-ui@2.0.3/lib/theme-chalk/index.css");
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  background: black;
}

.el-menu-item {
  background: black;
  color: white !important;
}

.el-menu-item:hover {
  background-color: blue;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 300px;
}


/*Downloaded from https://www.codeseek.co/DaihanaMora/element-ui-yPOKoE */
var Main = {
  data: function data() {
    return {
      isCollapse: true,
      labelPosition: 'left',
      formLabelAlign: {
        name: '',
        region: '',
        type: '',
        date1: '',
        date2: ''
      },
      rules: {
        date1: [{ type: 'date', required: true, message: 'Please pick a date', trigger: 'change' }],
        date2: [{ type: 'date', required: true, message: 'Please pick a time', trigger: 'change' }]
      },
      options: [{
        value: 'Option1',
        label: 'Option1'
      }, {
        value: 'Option2',
        label: 'Option2'
      }, {
        value: 'Option3',
        label: 'Option3'
      }, {
        value: 'Option4',
        label: 'Option4'
      }, {
        value: 'Option5',
        label: 'Option5'
      }],
      value: ''
    };
  },

  methods: {
    handleOpen: function handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose: function handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
var Ctor = Vue.extend(Main);
new Ctor().$mount('#app');

Comments