즉시 사용할 수 있는 UI 라이브러리가 없는 웹 개발은 빠르고 효율적이지 않습니다. 당신은 HTML/CSS 닌자라고 주장할 수도 있고, 나도 그렇기 때문에 당신을 믿습니다. 그럼에도 불구하고 미리 정의된 스타일리시한 구성 요소를 사용하는 것은 여전히 멋진 일입니다. 이것이 바로 우리가 아름다운 UI 라이브러리를 찾는 이유입니다.

제 이름은 Mikhail Isaev이고 SwifWeb 프레임워크의 작성자입니다. 오늘은 MaterializeCSS 프레임워크와 이를 SwifWeb과 함께 사용하는 방법에 대해 말씀드리겠습니다. 의 시작하자!

그것은 무엇입니까?

MaterializeCSS는 성공적인 디자인의 고전적인 원칙과 혁신 및 기술을 결합하기 위해 Google이 만든 Material Design 을 기반으로 하는 현대적인 반응형 오픈 소스 프런트 엔드 프레임워크입니다. 이 프레임워크는 사용하기 매우 쉽기 때문에 이 프레임워크에 대한 래퍼를 작성하는 것이 즐거웠습니다!

설치하는 방법?

SwifWeb을 처음 사용하는 경우 Webber CLI 도구를 사용하여 새 프로젝트를 생성해야 합니다.

프로젝트에서 Package.swift를 열고 dependencies 섹션을 편집하여 다음과 같이 만드세요:

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

다음으로 executableTarget 편집하여 다음과 같이 만듭니다.

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

그런 다음 App.swift 열고 다음과 같이 didFinishLaunching 메소드에서 Materialize를 구성하십시오.

 Lifecycle.didFinishLaunching { Materialize.configure() }

맞춤 테마:

SCSS에서 사용자 정의 Materialize 스타일을 생성한 경우 다음과 같이 구성하십시오.

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

/Sources/App/css/custom-materialize.min.css 에 사용자 정의 스타일을 추가하세요.

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") ]),

이제 UI 구축을 시작할 준비가 되었습니다!

구성요소

모든 구성 요소를 Swift로 아름답게 포장했지만, 모두 설명하려면 기사가 너무 길어질 것입니다.

여기에서 그 중 몇 가지를 살펴보고 나머지 내용은 GitHub의 추가 정보를 참조할 수 있습니다.

버튼

.materialButton(...) 메서드를 호출하면 어떤 요소든 머티리얼 버튼으로 만들 수 있습니다.

링크에는 요소 를 사용할 수 있으며, onClick 핸들러와 함께 Div 또는 기타 요소를 사용할 수 있습니다.

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

두 요소 모두 동일하게 보이지만 유일한 차이점은 A 가 링크이고 링크처럼 작동한다는 것입니다.

.materialButton 메소드에는 몇 가지 옵션이 있습니다.

type raised, floating, floatingHalfWay, flat

size small, large 수도 있습니다

waves light, red, yellow, orange, purple, green, teal 또는 사용자 정의일 수 있으며 기본적으로 light .

disabled 버튼이 비활성화되었음을 표시하는 플래그일 뿐입니다. 여기에 @State 값을 전달하여 즉시 변경하세요.

또한 .addMaterialIcon(...) 호출하여 머티리얼 아이콘을 추가할 수도 있습니다.

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

아래에서 머티리얼 아이콘에 대해 자세히 알아보세요.

플로팅 작업 버튼

여러 동작이 포함된 고정된 부동 동작 버튼입니다. 공식 문서에서 자세한 내용을 읽어보세요.

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

선택적 인수

size large small 수 있으며 기본적으로 large .

waves light, red, yellow, orange, purple, green, teal 또는 사용자 정의일 수 있으며 기본적으로 light .

direction top, right, bottom, left 이 될 수 있으며 기본적으로 top 입니다.

mode hover, click, toolbar 일 수 있으며 기본적으로 hover 입니다.

프로그래밍 방식으로 제어합니다.

 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

아이콘

MaterialIcon 객체를 초기화하면 어디에나 아이콘을 추가할 수 있습니다.

이 객체는 아이콘 유형을 초기화 인수로 받아들입니다. 아이콘 유형 목록은 여기에서 확인할 수 있습니다.

 MaterialIcon("announcement")

나중에 .type(...) 메소드를 호출하여 아이콘 유형을 즉시 변경할 수 있습니다.

선택적 방법

.size(...) tiny, small, medium, large 허용합니다.

.side(...) left, right 허용

모든 메소드는 반응형 @State 값을 허용하므로 아이콘과 해당 속성을 즉시 변경할 수 있습니다.

그림 물감

공식 문서에 나열된 모든 색상은 해당 수정자를 포함하여 사용할 수 있습니다.

텍스트 색상

 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

배경색

 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)

그리드

그리드에서 가장 중요한 것은 너비 와 선택적 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" } } }

위의 예시는 공식문서와 같이 1:1로 비교가 가능하기 때문에 간단히 비교하시면 됩니다.

열에 두 개 이상의 크기 클래스를 설정할 수 있습니다.

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

조정

수직 정렬

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

텍스트 정렬

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

퀵 플로트

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

콘텐츠 숨기기/표시

 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

서식 지정

잘림

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

호버

이 기능은 마우스를 올리면 상자 그림자에 대한 애니메이션을 추가합니다.

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

브라우저 기본값

요소 스타일을 원래 상태로 되돌릴 수 있습니다.

 Ul().browserDefault()

이미지

반응형 이미지

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

원형 이미지

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

비디오

반응형 임베드

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

반응형 비디오

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

Navbar

 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: "") }

카드

 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: "#")

프리로더

회보

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

불확정

 PreloaderLinearIndeterminate()

한정된

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

쪽수 매기기

 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) }

그게 다야

좋습니다. 프레임워크의 약 20% 정도를 설명했습니다.

Materialise CSS에 익숙하다면 Swift 표현이 사용하기 훨씬 쉽다는 것을 알 수 있을 것입니다!

더 자세히 알아보고 싶으신가요? 앞으로 나올 기사를 계속 지켜봐주세요!