widget builder

Construtor de widgets

Desenvolva, instale e distribua widgets HTML para sua área de trabalho do Windows com uma CLI simples

Índice

1. Instalação
2. Guia de iniciantes rápidos
3. Amostras
4. Publicação e instalação
   1. Publicação
   2. Instalação
5. O arquivo de configuração
6. Usando a CLI
7. Widgets contribuintes

Instalação

Faça o download, descompacte, navegue até a pasta e instale com npm :

 $ npm install -g
$ npm start

ou baixe diretamente do npm :

 $ npm install -g widget-builder

Guia de iniciantes rápidos

1. Crie uma nova pasta
2. cd na pasta, insira widgets init e preencha o nome do seu projeto
3. Mexa com o arquivo HTML gerado para personalizar a aparência do seu widget
4. Adicionar e vincular arquivos JavaScript ou CSS ao seu arquivo mestre HTML
5. Modifique o arquivo de configuração
6. Navegue até a pasta e entre widgets build para construir localmente e instalar seu widget

Amostras

Confira o ouvinte Spotify, um widget para ouvir suas músicas favoritas:

Publicação e instalação de widgets

Publicação

Então você deseja compartilhar seu widget para distribuição? Aqui está o que fazer:

1. cd para a pasta do seu projeto
2. Run widgets publish
3. Uma nova pasta dist será gerada no mesmo diretório da pasta do projeto. Agora você pode distribuir esta pasta e outros podem instalá -la com widgets install

Instalação

Veja como instalar um widget que foi compartilhado com você:

1. Navegue até a pasta
2. Execute widgets install

O arquivo de configuração

Todo projeto de widgets contém um arquivo config.json . Este arquivo informa ao programa quais configurações você gostaria de usar para o seu widget.
Aqui está um arquivo de configuração padrão:

{
  "name" : " widget " ,
  "version" : " 1.0.0 " ,
  "description" : " Custom desktop widget " ,
  "index" : " ./index.html " ,
  "properties" : {
    "x" : 100 ,
    "y" : 100 ,
    "width" : 100 ,
    "height" : 100 ,
    "transparent" : false ,
    "interact" : true ,
    "draggable" : true
  }
}

Propriedade	Definição
name (string)	Nome do projeto
version (string)	Versão do projeto
index (string)	A referência ao seu arquivo mestre HTML. Outras referências (como JS ou CSS) devem ser vinculadas neste arquivo.
x , y , width e height (números inteiros)	A posição e as dimensões do seu widget quando for inicial
transparent (booleano)	Faça o fundo do widget transparente
interact (booleano)	Torne o widget interactável
draggable (booleano)	Torne o widget arrastável
top (booleano)	Faça o widget permanecer no topo de todas as janelas
requirements (Array)	Pacotes NPM necessários para que o widget funcione; Esses pacotes são instalados localmente quando o widget é instalado
install (string ou matriz)	Script (s) para executar durante a instalação do widget

Usando a CLI

Depois que o Widget Builder é instalado, a CLI pode ser acessada com os widgets de palavras -chave

Comandos

Comando	Definição
widgets build [folder]	Construa arquivos HTML para widgets de mesa e instalações
widgets publish [folder]	Gera um arquivo dist
widgets install [folder]	Instala o widget na pasta
widgets init [folder]	Inicializa o projeto Widgets
widgets list	Lista todos os widgets instalados
widgets uninstall <widget>	Desinstalar o widget por nome
widgets config <widget>	Configurar o widget pelo nome
widgets start [folder]	Inicia o widget na pasta

Opções

Comando	Definição
widgets --help	Mostre ajuda
widgets --version	Exibe a versão atual

Widgets contribuintes

Aqui você pode encontrar instruções para compartilhar widgets que você criou