Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[ios] Search Bar Icon #220

Closed
xereda opened this issue Nov 21, 2016 · 0 comments
Closed

[ios] Search Bar Icon #220

xereda opened this issue Nov 21, 2016 · 0 comments
Milestone

Comments

@xereda
Copy link

xereda commented Nov 21, 2016

The icon is not showing in the iOS theme search bar. I tested it on an iphone 5 (real device).

Check the simulation below:

icon_search

Component:

<template>
  <div>
    <div slot="header" class="toolbar primary">
      <quasar-search v-model="search" class="primary"></quasar-search>
    </div>
    <div class="layout-padding">
      <div class="list item-delimiter">
        <router-link to="/detalhesMedico" tag="div" class="item three-lines" v-for="(medico, index) in listaComFiltro">
          <img class="item-primary" :src="'' + medico.avatar + ''">
          <div class="item-content has-secondary">
            <div>{{ medico.nome }}</div>
            <div>
              <span>{{ medico.especializacao }}</span><br />
              (crm {{ medico.crm }})
            </div>
          </div>
          <div class="item-secondary stamp">
            {{ medico.dist }}
          </div>
          <i class="item-secondary">location_on</i>
        </router-link>

      </div>
    </div>

    <button @click="sendAllProviders()" class="negative circular shadow-3 absolute-bottom-right" style="right:20px; bottom:25px;"><i>done_all</i></button>

  </div>
</template>

<script>
import { Dialog, Toast } from 'quasar'
import { mapActions } from 'vuex'

export default {
  mounted () {
    this.setHeaderTitle('Por médico...')
  },
  data () {
    return {
      infiniteScrollOn: true,
      search: '',
      listaMedicos: [
        { id: 1, nome: 'Mauriano Salazar', especializacao: 'Cardiologia', crm: 5765, dist: '550 m', avatar: 'statics/img/avatars/1.jpg' },
        { id: 2, nome: 'Paula Guimarães', especializacao: 'Cardiologia', crm: 21308, dist: '970 m', avatar: 'statics/img/avatars/2.jpg' },
        { id: 3, nome: 'Sérgio Silva Souza', especializacao: 'Cardiologia', crm: 98123, dist: '1,1 km', avatar: 'statics/img/avatars/3.jpg' }
      ]
    }
  },
  methods: {
    ...mapActions([
      'setHeaderTitle'
    ]),
    sendAllProviders () {
      Dialog.create({
        title: 'Solicitar Agenda',
        message: 'Você deseja solicitar agenda para todos os médicos da lista?',
        buttons: [
          {
            label: 'Cancelar',
            handler () {
              console.log('Disagreed...')
            }
          },
          {
            label: 'Sim',
            handler () {
              console.log('Agreed!')
              Toast.create.positive('Solicitação enviada')
            }
          }
        ]
      })
    }
  },
  computed: {
    listaComFiltro () {
      return this.listaMedicos.filter((element) => {
        return element.nome.toUpperCase().indexOf(this.search.toUpperCase()) > -1
      })
    }
  }
}
</script>

<style>
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants