Página Inicial>Recursos de construção de sites>Baixar fonte
Baixar

Plugin iconpicker para artesanato CMS 3.x

Atualmente, o projeto está descontinuado . No entanto, sinta -se à vontade para gastar e continuar seu desenvolvimento!

O plug -in de artesanato que fornece um novo tipo de campo que oferece aos usuários uma maneira fácil de escolher um ícone de um arquivo de fonte .woff ou .ttf. Você pode facilmente usar ionicons ou ícones incríveis de fonte

Nota : Este plug-in pode se tornar um complemento pago quando a loja de plug-in de artesanato estiver disponível.

Requisitos

  • Craft 3.0 (beta 20)+
  • Php 7.0+
  • Fonte phenx php
  • Um ou mais arquivos .ttf ou .woff

Exemplo

Exemplo do uso de campo no modelo para um usuário do CMS

Captura de tela

Exemplo do pop -up de seleção

Captura de tela

Instalação

  1. Instale com o compositor 

     composer require dolphiq/iconpicker

  2. Instale o plug -in no painel de controle de artesanato em Configurações> Plugins

  3. Adicione os ativos do plug -in ao seu aplicativo adicionando a seguinte linha no início do seu modelo: 

     {% do view.registerAssetBundle("plugins\dolphiq\iconpicker\assets\sharedAsset") %}

  4. Adicione as fontes que deseja ao seguinte diretório 

     /vendor/dolphiq/iconpicker/src/resources-shared/fonts

  5. O tipo Iconpicker Field estará disponível ao adicionar um novo campo - Configurações> Campos> Adicionar novo campo

Criando um campo com o tipo de campo iconpicker

  1. Escolha o tipo Iconpicker Field
  2. Ao adicionar um novo campo com o tipo Iconpicker Field , você pode escolher qual fonte deseja usar para esse campo a partir do menu suspenso

Usando o tipo de campo iconpicker

  1. Adicione o campo a um layout de campo (por exemplo, a uma seção)
  2. Agora você pode escolher um ícone ao criar ou atualizar uma seção

Amostra de uso no modelo de galho

Código de exemplo rápido 

    {% do view.registerAssetBundle("plugins\dolphiq\iconpicker\assets\sharedAsset") %}
    <html style="padding: 0; margin: 0;">
    <head>
        <title></title>

        {{ head() }}

    </head>

    <body>

    {{ beginBody() }}

    {% if entry.iconPickerField.icon %}
        Hex: {{ entry.iconPickerField.icon }}<br>
        {{ entry.iconPickerField.iconSpan|raw }}
    {% endif %}

    {{ endBody() }}

    </body>
    </html>

Exiba um ícone com uma classe personalizada: 

 <span class='{{ entry.iconClass }} myCustomClass'>{{ entry.iconChar }}</span>
Propriedades do campo de ícones

  1. Obtenha o ícone Unicode (decimal) 

     {{ entry.fieldName.icon }}

  2. Obtenha o ícone Unicode (hexadecimal) 

     {{ entry.fieldName.iconHex }}

  3. Exibir o ícone como caractere html &#00000 

     {{ entry.fieldName.iconChar|raw }}

  4. Exibir o ícone como HTML Personagem Hex &#xf100 

     {{ entry.fieldName.iconCharHex|raw }}

  5. Exibir o ícone como span com o personagem e a classe de fonte 

     {{ entry.fieldName.iconSpan|raw }}

  6. Obtenha a aula de fonte do ícone 

     {{ entry.fieldName.iconClass }}

  7. Exemplo condicional de mostrar o ícone apenas quando está definido 

     {% if entry.fieldName.icon %}
     {{ entry.fieldName.iconSpan|raw }}
{% endif %}

Iconpicker Roadmap

  • Selecione e carregue as fontes na interface do usuário
  • Ativar (nome) Pesquisar enquanto escolhe um ícone

Colaboradores e desenvolvedores

Lucas Weijers - Desenvolvedor original Johan Zandstra - Pequenas mudanças trazidas a você por dolphiq [email protected]

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos