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 . Hoje, vou falar sobre o framework e como usá-lo com o SwifWeb. Vamos começar! SwifWeb MaterializeCSS O que é? MaterializeCSS é uma estrutura de front-end responsiva moderna baseada em 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! de código aberto Material Design 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 para deixá-la assim: dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] Em seguida, edite para torná-lo assim: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), Em seguida, abra e configure no método assim: App.swift Materialize didFinishLaunching Lifecycle.didFinishLaunching { Materialize.configure() } Você enfrentará estilos ausentes se esquecer de configurá-lo 🙃 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 e declare recursos em da seguinte forma: Package.swift executableTarget .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 para o resto. leia-me no GitHub Botões Você pode fazer qualquer elemento como botão de material apenas chamando o método . .materialButton(...) elemento pode ser usado para links, e ou outros elementos podem ser usados com o manipulador . Um Div 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 é um link e funcionará como um link. A O método tem algumas opções: .materialButton pode ser type raised, floating, floatingHalfWay, flat pode ser size small, large podem ser ou personalizadas, por padrão waves light, red, yellow, orange, purple, green, teal light é apenas um sinalizador para marcar o botão desativado, passe o valor @State aqui para alterá-lo na hora disabled 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 pode ser e , é por padrão size large small large podem ser ou personalizadas, por padrão waves light, red, yellow, orange, purple, green, teal light pode ser , é por padrão direction top, right, bottom, left top pode ser é por padrão mode hover, click, toolbar hover 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 de ícone como o argumento do inicializador. A lista dos tipos de ícone está disponível . o tipo aqui MaterialIcon("announcement") Você pode alterar o tipo de ícone rapidamente mais tarde, chamando o método nele. .type(...) Métodos opcionais aceita .size(...) tiny, small, medium, large aceita .side(...) 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 estão disponíveis, incluindo seus modificadores. na documentação oficial 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 é , que tem sua largura e modificadores opcionais . a coluna 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 é muito mais fácil de usar! em Swift Quer aprender mais? Fique ligado nos próximos artigos! Não hesite em fazer qualquer pergunta e fique à vontade para contribuir! em nosso Discord

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

This story contains new, firsthand information uncovered by the writer.

The writer is smart, but don't just like, take their word for it. #DoYourOwnResearch

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

Making security fun one episode at a time

Bibliotecas SwifWeb: Materializar CSS

Muito longo; Para ler

Mikhail Isaev

STORY’S CREDIBILITY

Code License

Original Reporting

DYOR

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

Bibliotecas SwifWeb: Materializar CSS

Muito longo; Para ler

Mikhail Isaev

STORY’S CREDIBILITY

Code License

Original Reporting

DYOR

About Author

Rótulos

Languages

ESTE ARTIGO FOI APRESENTADO EM...

HISTÓRIAS RELACIONADAS