El desarrollo web sin bibliotecas de interfaz de usuario listas para usar no sería tan rápido y eficiente. Puedes argumentar que eres un ninja de HTML/CSS, y te creo porque yo también lo soy. No obstante, sigue siendo genial usar componentes con estilo predefinidos, y es por eso que estamos buscando algunas bibliotecas de interfaz de usuario hermosas. Mi nombre es Mikhail Isaev y soy el autor del framework . Hoy les hablaré sobre el marco y cómo usarlo con SwifWeb. ¡Vamos a empezar! SwifWeb MaterializeCSS ¿Qué es? MaterializeCSS es un marco front-end receptivo moderno basado en que fue creado por Google para combinar los principios clásicos del diseño exitoso junto con la innovación y la tecnología. ¡Disfruté escribiendo un contenedor para este marco porque es muy fácil de usar! de código abierto Material Design ¿Cómo instalar? Si es nuevo en SwifWeb, debe crear un nuevo proyecto utilizando la herramienta CLI de Webber. En el proyecto, abra Package.swift y edite la sección para que se vea así: dependencies dependencies: [ // the rest of the other dependencies incuding swifweb/web .package(url: "https://github.com/swifweb/materialize", from: "1.0.0"), ] A continuación, edite para que se vea así: executableTarget .executableTarget(name: "App", dependencies: [ .product(name: "Web", package: "web"), .product(name: "Materialize", package: "materialize") ]), Luego abra y configure en el método de esta manera: App.swift Materialise didFinishLaunching Lifecycle.didFinishLaunching { Materialize.configure() } Te enfrentarás a estilos faltantes si olvidas configurarlo 🙃 Tema personalizado: Si generó un estilo Materialise personalizado desde SCSS, configúrelo de esta manera: Lifecycle.didFinishLaunching { app in Materialize.configure(avoidStyles: true) app.addStylesheet("/css/custom-materialize.min.css") } Agregue su estilo personalizado en /Sources/App/css/custom-materialize.min.css abra y declare los recursos en de la siguiente manera: 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") ]), ¡Ahora está listo para comenzar a construir la interfaz de usuario! Componentes Envolví maravillosamente todos los componentes en Swift, pero el artículo sería demasiado largo si tuviera que describirlos todos. Permítame examinar algunos de ellos aquí, y puede consultar el para conocer el resto. archivo Léame en GitHub Botones Puede hacer que cualquier elemento sea un botón de material simplemente llamando al método . .materialButton(...) Se puede usar elemento para enlaces, y u otros elementos se pueden usar con el controlador . un Div onClick Div("My Button") .materialButton(type: .raised) .onClick {} A("My Link") .href("https://google.com") .materialButton(type: .raised) Ambos elementos se verán iguales, la única diferencia es que es un enlace y actuará como un enlace. A El método tiene pocas opciones: .materialButton se puede type raised, floating, floatingHalfWay, flat puede ser size small, large pueden ser o personalizadas, de forma predeterminada waves light, red, yellow, orange, purple, green, teal light es solo una bandera para marcar el botón deshabilitado, pase el valor @State aquí para cambiarlo sobre la marcha disabled También puede agregarle un icono de material simplemente llamando a .addMaterialIcon(...) .addMaterialIcon("announcement") // or optionally .addMaterialIcon("announcement".size(.tiny).side(.right)) Obtenga más información sobre el icono de material a continuación. Botón de acción flotante Es un botón de acción flotante fijo con múltiples acciones. Lea más sobre esto . en los documentos oficiales FloatingActionButton(icon: "add", color: .pink) .item(icon: "public", color: .red) .item(icon: "adb", color: .purple) .item(icon: "announcement", color: .blue) { Toast.show("Announcement!") } Argumentos opcionales puede ser y , es por defecto size large small large pueden ser o personalizadas, de forma predeterminada waves light, red, yellow, orange, purple, green, teal light puede ser , es por defecto direction top, right, bottom, left top puede ser es por defecto mode hover, click, toolbar hover Controlarlo programáticamente: 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 Iconos Puede agregar un ícono en cualquier lugar inicializando el objeto . MaterialIcon Este objeto acepta de icono como argumento inicializador. La lista de tipos de iconos está disponible . el tipo aquí MaterialIcon("announcement") Puede cambiar el tipo de icono sobre la marcha más tarde llamando al método en él. .type(...) Métodos opcionales acepta .size(...) tiny, small, medium, large acepta .side(...) left, right Todos los métodos pueden aceptar el valor @State reactivo, por lo que puede cambiar el ícono y sus propiedades sobre la marcha. Colores Todos los colores que se enumeran están disponibles, incluidos sus modificadores. en la documentación oficial Color de 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 Color de fondo 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) Red Lo principal en la cuadrícula es , que tiene su ancho y modificadores opcionales . Columna 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" } } } Los ejemplos anteriores son 1: 1 como en la documentación oficial, por lo que puede comparar. Puede establecer más de una clase de tamaño en una columna: Column(.extraLarge(.twelve), .large(.ten), .medium(.eight), .small(.six)) Alineación alineación vertical VAlignWrapper { H5("This should be vertically aligned") } Texto alineado H5("This should be left aligned").leftAlign() H5("This should be right aligned").rightAlign() H5("This should be center aligned").centerAlign() Flotadores rápidos Div().floatLeft() // Quickly float things to left Div().floatRight() // Quickly float things to right Div().floatCenter() // Quickly float things to center Ocultar/Mostrar contenido 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 Formateo Truncamiento H4("This is an extremely long title").truncate() // also with @State Flotar Esta característica agrega una animación para la sombra del cuadro al pasar el mouse. Card().hoverable() // also with @State Valores predeterminados del navegador Puede revertir los estilos de elementos al estado original. Ul().browserDefault() Imágenes Imágenes receptivas Img().src("cool_pic.jpg").responsive() // resizes responsively to page width Imágenes circulares Img().src("images/yuna.jpg").circle() // square image that appears circular Vídeos Incrustaciones receptivas Div { IFrame(...) }.videoContainer() Vídeos receptivos Video { Source().src("movie.mp4").type("video/mp4") }.responsive() barra de navegación 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: "") } Tarjetas 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: "#") precargador Circular PreloaderCircular(colors: .blue, .red, .green, .yellow).active() Indeterminado PreloaderLinearIndeterminate() Determinado @State var value: Double = 20 // change it to update the progress PreloaderLinearDeterminate($value) Paginación 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) } Eso es todo Muy bien, describí aproximadamente ~20% del marco. Si está familiarizado con Materialise CSS, puede notar que su representación es mucho más fácil de usar. Swift ¿Quieres aprender más? ¡Estén atentos a los próximos artículos! ¡No dudes en hacer cualquier pregunta y siéntete libre de contribuir! en nuestro 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 audio es producido en el idioma original de la historia!

Demasiado Largo; Para Leer

Get free API security automated scan in minutes

Bibliotecas SwifWeb: materializar CSS

Demasiado Largo; Para Leer

@imike

Credibility

HISTORIAS RELACIONADAS