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 SwifWeb . Hoy les hablaré sobre el marco MaterializeCSS y cómo usarlo con SwifWeb. ¡Vamos a empezar!

¿Qué es?

MaterializeCSS es un marco front-end de código abierto receptivo moderno basado en Material Design 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!

¿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 dependencies para que se vea así:

 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 executableTarget para que se vea así:

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

Luego abra App.swift y configure Materialise en el método didFinishLaunching de esta manera:

 Lifecycle.didFinishLaunching { Materialize.configure() }

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 Package.swift y declare los recursos en executableTarget de la siguiente manera:

 .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 archivo Léame en GitHub para conocer el resto.

Botones

Puede hacer que cualquier elemento sea un botón de material simplemente llamando al método .materialButton(...) .

Se puede usar un elemento para enlaces, y Div u otros elementos se pueden usar con el controlador 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 A es un enlace y actuará como un enlace.

El método .materialButton tiene pocas opciones:

type se puede raised, floating, floatingHalfWay, flat

size puede ser small, large

waves pueden ser light, red, yellow, orange, purple, green, teal o personalizadas, light de forma predeterminada

disabled es solo una bandera para marcar el botón deshabilitado, pase el valor @State aquí para cambiarlo sobre la marcha

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

size puede ser large y small , es large por defecto

waves pueden ser light, red, yellow, orange, purple, green, teal o personalizadas, light de forma predeterminada

direction puede ser top, right, bottom, left , es top por defecto

mode puede ser hover, click, toolbar es hover por defecto

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 el tipo de icono como argumento inicializador. La lista de tipos de iconos está disponible aquí .

 MaterialIcon("announcement")

Puede cambiar el tipo de icono sobre la marcha más tarde llamando al método .type(...) en él.

Métodos opcionales

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

.side(...) acepta 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 en la documentación oficial están disponibles, incluidos sus modificadores.

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 Columna , que tiene su ancho y modificadores opcionales 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 Swift es mucho más fácil de usar.

¿Quieres aprender más? ¡Estén atentos a los próximos artículos!