swift ui语法_如何使用超净语法制作自己的按钮UI套件

最新推荐文章于 2024-09-26 10:01:01 发布

daique1908

最新推荐文章于 2024-09-26 10:01:01 发布

阅读量174

点赞数

文章标签： css java html javascript css3 ViewUI

swift ui语法

每个设计师都喜欢按钮。这是因为对Unicorn UI等项目的赞赏而认识到的（在撰写本文时， Unicorn UI仅支持按钮，在GitHub上有近4,000个观星者）。

但是没有设计师适合放在盒子里。我们都有一个按钮框架之外的自己的需求。我们所有人都希望看到某些类型的按钮，也许我们真的已经非常擅长设计某种类型的按钮。那么，为什么不从头开始制作自己的按钮UI套件呢？

标记

首先，我们需要确定按钮可以定位的元素。在我们的情况下，请确保可以通过我们的UI套件设置任何锚，输入或按钮标签的样式。为此，我们创建一些标记：

<a href="#" ui="button">Button</a>

<button ui="button">Button</button>

<input type="submit" value="Button" ui="button">

关于“ UI”属性的注释

我使用属性来执行此操作仅仅是因为我认为它看起来更好。可能不是完全面向未来（如果W3C为ui属性引入新规范会怎样？），但是如果您对此感到担心，则可以将ui命名空间命名为cory-ui在这种情况下，我会打赌不受W3C的新介绍。如果您真的，真的很担心它，或者对性能感到疯狂，则可以使用类并达到相同的效果，但是您可能会遇到类在某些时候相互覆盖的问题。

基本样式

我们将使用Stylus CSS预处理程序来避免不得不写出一百万个花括号，因此我们的代码看起来整洁干净，没有重复。即使您不熟悉Stylus，也应该能够使用其他预处理器或原始CSS。

首先，让我们为[ui*="button"]选择器设置一些默认样式。我们在此上下文中使用星型选择器，因此您可以在属性中的任何位置添加“按钮”，并且该按钮将起作用。

[ui*="button"]
  cursor: pointer
  transition: all 200ms ease
  border: 0
  background: darken(white, 5%)
  color: lighten(black, 20%)
  padding: .5em 1.75em
  text-decoration: none
  &:hover
    background: darken(white, 10%)

添加属性

现在有趣的部分。让我们开始添加我们认为可能使用的任何属性。例如，我知道我希望能够具有各种大小的按钮，因此我将为按钮添加大小：

<a href="#" ui="button small">Button</a>

<button ui="button large">Button</button>

<input type="submit" value="Button" ui="button huge">

[ui*="button"]
  cursor: pointer
  transition: all 200ms ease
  border: 0
  background: darken(white, 5%)
  color: lighten(black, 20%)
  padding: .5em 1.75em
  text-decoration: none
  &:hover
    background: darken(white, 10%)

  &[ui*="small"]
    padding: .25em 1em
    font-size: .75em

  &[ui*="large"]
    padding: .75em 2em
    font-size: 1.25em

  &[ui*="huge"]
    padding: 1em 3em
    font-size: 1.25em

注意我们如何将属性附加到按钮属性选择器上？这意味着这些属性不适用于没有ui="button"元素。这是使我们的更改仅限于可能要添加的各种属性的一种好方法。

更详细的样式

让我们继续并在按钮上添加一些舍入：

<a href="#" ui="button small round">Button</a>

<button ui="button large pill">Button</button>

&[ui*="round"]
    border-radius: 5px

  &[ui*="pill"]
    border-radius: 999em

色彩

到现在为止，您应该对这个概念更加熟悉。让我们以变量的形式添加一些颜色：

<a href="#" ui="button small round primary">Button</a>

<button ui="button large pill danger">Button</button>

color-primary = blue
color-danger = red


[ui*="button"]
  cursor: pointer
  transition: all 200ms ease
  border: 0
  background: darken(white, 5%)
  color: lighten(black, 20%)
  padding: .5em 1.75em
  text-decoration: none
  &:hover
    background: darken(white, 10%)

  &[ui*="small"]
    padding: .25em 1em
    font-size: .75em

  &[ui*="large"]
    padding: .75em 2em
    font-size: 1.25em

  &[ui*="huge"]
    padding: 1em 3em
    font-size: 1.25em

  &[ui*="round"]
    border-radius: 5px

  &[ui*="pill"]
    border-radius: 999em

  &[ui*="primary"]
    background: color-primary
    color: white

  &[ui*="danger"]
    background: color-danger
    color: white

这就是要旨！根据需要添加任意数量的规则和属性。您甚至可以将复杂的主题添加到按钮，有趣的悬停状态和动画。在评论中与我们分享您的按钮UI框架！