Framework7 - Barra de Mensagens

Descrição

Framework7 fornece barra de ferramentas redimensionável especial para trabalhar com o sistema de mensagens no aplicativo.

O código a seguir mostra o layout da barra de mensagens -

<div clas = "toolbar messagebar">
   <div clas = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" clas = "link">Send</a>
   </div>
</div>

Na barra de mensagens, o interior da "página" é muito importante e está à direita de "conteúdo-mensagens" -

<div class = "page toolbar-fixed">
   <!-- messagebar -->
   <div class = "toolbar messagebar">
      <div class = "toolbar-inner">
         <textarea placeholder = "Message"></textarea>
         <a href = "#" class = "link">Send</a>
      </div>
   </div>
   
   <!-- messages-content -->
   <div class = "page-content messages-content">
      <div class = "messages">
         ... messages
      </div>
   </div>
</div>

Você pode usar o seguinte método para inicializar a barra de mensagens com JavaScript -

myApp.messagesbar(messagesbarContainer, parameters)

O método tem duas opções -

• messagesbarContainer - É um elemento ou string HTML obrigatório que inclui o elemento HTML do recipiente da barra de mensagens.

• parameters - Especifica um objeto com parâmetros da barra de mensagens.

Por exemplo -

var myMessagebar = app.messagebar('.messagebar', {
   maxHeight: 200
});

Parâmetro Messagebar

maxHeight- É usado para definir a altura máxima da área de texto e será redimensionado dependendo da quantidade de seu texto. O tipo de parâmetro é número e o valor padrão é nulo .

Propriedades da barra de mensagens

A tabela a seguir mostra as propriedades da barra de mensagens -

S.Não	Propriedades e descrição
1	myMessagebar.params Você pode especificar o objeto com os parâmetros de inicialização aprovados.
2	myMessagebar.container Você pode especificar o elemento dom7 com o elemento HTML do contêiner da barra de mensagens.
3	myMessagebar.textarea Você pode especificar o elemento dom7 com o elemento HTML textarea da barra de mensagens.

Métodos da barra de mensagens

A tabela a seguir mostra os métodos da barra de mensagens -

S.Não	Métodos e Descrição
1	myMessagebar.value(newValue); Ele define o valor / texto da área de texto da barra de mensagens e retorna o valor da área de texto da barra de mensagens, se newValue não é especificado.
2	myMessagebar.clear(); Ele limpa a área de texto e atualiza / redefine o tamanho.
3	myMessagebar.destroy(); Ele destrói a instância da barra de mensagens.

Inicializar Messagebar com HTML

Você pode inicializar a barra de mensagens usando HTML sem métodos e propriedades JavaScript, adicionando a classe messagebar-init ao .messagebar e pode passar os parâmetros necessários usando atributos de dados .

O código a seguir especifica a inicialização da barra de mensagens com HTML -

<div class = "toolbar messagebar messagebar-init" data-max-height = "200">
   <div class = "toolbar-inner">
      <textarea placeholder = "Message"></textarea>
      <a href = "#" class = "link">Send</a>
   </div>
</div>

Acesso à instância da Messagebar

É possível acessar a instância da barra de mensagens, se você inicializá-la usando HTML; isso é obtido usando a propriedade f7 Message bar de seu elemento contêiner.

var myMessagebar = $$('.messagebar')[0].f7Messagebar;
// Now you can use it
myMessagebar.value('Hello world');

Você pode ver o exemplo da Messagebar, que é explicado neste link