O desenvolvimento da Web sem bibliotecas de IU prontas para uso não seria tão rápido e eficiente. Você pode argumentar que é um ninja HTML/CSS, e eu acredito em você porque também sou. No entanto, ainda é legal usar componentes estilosos predefinidos, e é por isso que estamos procurando algumas belas bibliotecas de interface do usuário.

Meu nome é Mikhail Isaev e sou o autor do framework SwifWeb . Hoje, vou falar sobre o framework MaterializeCSS e como usá-lo com o SwifWeb. Vamos começar!

O que é?

MaterializeCSS é uma estrutura de front-end de código aberto responsiva moderna baseada em Material Design que foi criada pelo Google para combinar os princípios clássicos de design bem-sucedido com inovação e tecnologia. Gostei de escrever um wrapper para este framework porque é muito fácil de usar!

Como instalar?

Se você é novo no SwifWeb, precisará criar um novo projeto usando a ferramenta Webber CLI.

No projeto, abra Package.swift e edite a seção dependencies para deixá-la assim:

 dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ]

Em seguida, edite executableTarget para torná-lo assim:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]),

Em seguida, abra App.swift e configure Materialize no método didFinishLaunching assim:

 Lifecycle.didFinishLaunching { Materialize.configure() }

Tema personalizado:

Se você gerou um estilo Materialize personalizado a partir do SCSS, configure-o desta forma:

 Lifecycle.didFinishLaunching { app in Materialize.configure(avoidStyles: true) app.addStylesheet("/css/custom-materialize.min.css") }

Adicione seu estilo personalizado em /Sources/App/css/custom-materialize.min.css

abra Package.swift e declare recursos em executableTarget da seguinte forma:

 .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ], resources: [ .copy("css/custom-materialize.min.css"), .copy("css") ]),

Agora você está pronto para começar a construir a IU!

Componentes

Eu coloquei lindamente todos os componentes no Swift, mas o artigo ficaria muito longo se eu descrevesse todos eles.

Deixe-me examinar alguns deles aqui, e você pode consultar o leia-me no GitHub para o resto.

Botões

Você pode fazer qualquer elemento como botão de material apenas chamando o método .materialButton(...) .

Um elemento pode ser usado para links, e Div ou outros elementos podem ser usados com o manipulador onClick .

 Div("My Button") .materialButton(type: .raised) .onClick {} A("My Link") .href("https://google.com") .materialButton(type: .raised)

Ambos os elementos terão a mesma aparência, a única diferença é que A é um link e funcionará como um link.

O método .materialButton tem algumas opções:

type pode ser raised, floating, floatingHalfWay, flat

size pode ser small, large

waves podem ser light, red, yellow, orange, purple, green, teal ou personalizadas, light por padrão

disabled é apenas um sinalizador para marcar o botão desativado, passe o valor @State aqui para alterá-lo na hora

Além disso, você pode adicionar um ícone de material simplesmente chamando .addMaterialIcon(...)

 .addMaterialIcon("announcement") // or optionally .addMaterialIcon("announcement".size(.tiny).side(.right))

Saiba mais sobre o ícone de material abaixo.

Botão de Ação Flutuante

É um botão de ação flutuante fixo com várias ações. Leia mais sobre isso nos documentos oficiais .

 FloatingActionButton(icon: "add", color: .pink) .item(icon: "public", color: .red) .item(icon: "adb", color: .purple) .item(icon: "announcement", color: .blue) { Toast.show("Announcement!") } 

Argumentos opcionais

size pode ser large e small , é large por padrão

waves podem ser light, red, yellow, orange, purple, green, teal ou personalizadas, light por padrão

direction pode ser top, right, bottom, left , é top por padrão

mode pode ser hover, click, toolbar é hover por padrão

Controle-o programaticamente:

 lazy var fab = FloatingActionButton(...) fab.open() // to show the menu/toolbar fab.close() // to show the menu/toolbar fab.isOpen // the check if it is open

Ícones

Você pode adicionar um ícone em qualquer lugar inicializando o objeto MaterialIcon .

Este objeto aceita o tipo de ícone como o argumento do inicializador. A lista dos tipos de ícone está disponível aqui .

 MaterialIcon("announcement")

Você pode alterar o tipo de ícone rapidamente mais tarde, chamando o método .type(...) nele.

Métodos opcionais

.size(...) aceita tiny, small, medium, large

.side(...) aceita left, right

Todos os métodos podem aceitar o valor @State reativo, para que você possa alterar o ícone e suas propriedades em tempo real.

cores

Todas as cores listadas na documentação oficial estão disponíveis, incluindo seus modificadores.

Cor do texto

 Span("Hello").textColor(.red) // just red color Span("Hello").textColor(.red.lighten3) // red color with lighten-3 modifier Span("Hello").textColor(.red.darken4) // red color with darken-4 modifier

Cor de fundo

 Div().materialBackground(.red) // just red color Div().textColor(.red.lighten3) // red color with lighten-3 modifier Div().textColor(.red.darken4) // red color with darken-4 modifier // or Div().red() Div().red(.lighten3) Div().red(.darken4)

Grade

A principal coisa na grade é a coluna , que tem sua largura e modificadores opcionais offest, push, pull .

 Container { Row { Column(.small(.one)) { "1" } // <div class="col s1">1</div> Column(.small(.one)) { "2" } // <div class="col s1">2</div> Column(.small(.one)) { "3" } // <div class="col s1">3</div> Column(.small(.one)) { "4" } // <div class="col s1">4</div> Column(.small(.one)) { "5" } // <div class="col s1">5</div> Column(.small(.one)) { "6" } // <div class="col s1">6</div> Column(.small(.one)) { "7" } // <div class="col s1">7</div> Column(.small(.one)) { "8" } // <div class="col s1">8</div> Column(.small(.one)) { "9" } // <div class="col s1">9</div> Column(.small(.one)) { "10" } // <div class="col s1">10</div> Column(.small(.one)) { "11" } // <div class="col s1">11</div> Column(.small(.one)) { "12" } // <div class="col s1">12</div> } Divider() Row { Column(.small(.twelve)) { "screen-wide" } Column(.small(.six)) { "one-half" } Column(.small(.six)) { "one-half" } } Divider() Row { Column(.small(.twelve)) { "12-columns" } Column(.small(.six, offset: .six)) { "6-columns at the right" } } Divider() Row { Column(.small(.seven, push: .five)) { "7-columns pushed to the right" } Column(.small(.five, pull: .seven)) { "5-columns pulled to the left" } } }

Os exemplos acima são 1:1 como na documentação oficial, então você pode apenas comparar.

Você pode definir mais de uma classe de tamanho para uma coluna:

 Column(.extraLarge(.twelve), .large(.ten), .medium(.eight), .small(.six))

Alinhamento

Alinhamento Vertical

 VAlignWrapper { H5("This should be vertically aligned") }

Alinhamento de texto

 H5("This should be left aligned").leftAlign() H5("This should be right aligned").rightAlign() H5("This should be center aligned").centerAlign()

Flutuações rápidas

 Div().floatLeft() // Quickly float things to left Div().floatRight() // Quickly float things to right Div().floatCenter() // Quickly float things to center

Ocultar/mostrar conteúdo

 Div().hideOnSmallOnly() // Hidden for Mobile Only Div().hideOnMedOnly() // Hidden for Tablet Only Div().hideOnMedAndDown() // Hidden for Tablet and Below Div().hideOnMedAndUp() // Hidden for Tablet and Above Div().hideOnLargeOnly() // Hidden for Desktop Only Div().showOnSmall() // Show for Mobile Only Div().showOnMedium() // Show for Tablet Only Div().showOnLarge() // Show for Desktop Only Div().showOnMediumAndUp() // Show for Tablet and Above Div().showOnMediumAndDown() // Show for Tablet and Below Div().pinned() // Pins element

Formatação

Truncamento

 H4("This is an extremely long title").truncate() // also with @State

Flutuar

Esse recurso adiciona uma animação para a sombra da caixa ao passar o mouse.

 Card().hoverable() // also with @State

Padrões do navegador

Você pode reverter estilos de elemento para o estado original.

 Ul().browserDefault()

Imagens

Imagens responsivas

 Img().src("cool_pic.jpg").responsive() // resizes responsively to page width

imagens circulares

 Img().src("images/yuna.jpg").circle() // square image that appears circular

Vídeos

Incorporações responsivas

 Div { IFrame(...) }.videoContainer()

Vídeos responsivos

 Video { Source().src("movie.mp4").type("video/mp4") }.responsive()

barra de navegação

 Navbar { A("Logo") .floatLeft() // align left .floatRight() // align right .floatCenter() // align center } .deepPurple(.lighten4) // background .left() // left aligned links .right() // right aligned links .item("Sass", href: "/sass") .item("Components", href: "/badges") .item("JavaScript", active: true, href: "/collapsible") // as active // dropdown menu .dropdownItem("More", background: .white, hover: false) { DropdownItem("Dropdown 1", color: .red) { Toast.show("Hi") } DropdownItem("Dropdown 2", href: "") }

cartões

 Card("Card Title") .blueGrey(.darken1) .textColor(.white) .message("""I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively. """) .action("THIS IS A BUTTON") {} .action("THIS IS A LINK", href: "#")

Pré-carregador

Circular

 PreloaderCircular(colors: .blue, .red, .green, .yellow).active()

Indeterminado

 PreloaderLinearIndeterminate()

Determinado

 @State var value: Double = 20 // change it to update the progress PreloaderLinearDeterminate($value)

Paginação

 Pagination() .back(disabled: true, icon: "chevron_left") {} .item(1, href: "#1") .item(2, href: "#2") .item(3) { Toast.show("Going to 3!") } .forward() { Toast.show("Going forward!", rounded: true) }

É isso

Tudo bem, descrevi cerca de ~ 20% da estrutura.

Se você está familiarizado com Materialize CSS, pode notar que sua representação em Swift é muito mais fácil de usar!

Quer aprender mais? Fique ligado nos próximos artigos!