純粋なCSSと尾風を使っているステッパー原子部品をつくる方法

これでfrontend pill 我々は、Aを作成するつもりです
純粋CSSにおけるステッパ原子成分
我々は、Sonextでオンボードウィザードを完了するために我々のデザインシステムでそれを必要としました.com .
これは結果です.

コードを書く前に(いくつかの行は本当にです)
開発者がこのコンポーネントを消費する.

純粋なCSSでステッパー原子成分を消費する最良の方法は何ですか

Componentは純粋なCSSであるので、開発者はいくつかのクラスを持っていることを期待します
コンポーネントを作成するには
開発者の経験を最大にするためには、2つの条件があります.
ステッパーを作成するのに必要なタグの数を最小にします.
2 ) CSSのみを使用します.
ステッパを作るときは、ステッパのタイトルだけです.

<div>Step 1: do something</div>
<div>Step 2: almost done</div>
<div>Step 3: done!</div>

それから、我々はステップの状態を示す方法を決定しなければなりません:「Do Do」?「アクティブ」?"完了ですか?
それぞれの状態はクラスでありえます:

<div class="todo">Step 1: do something</div>
<div class="active">Step 2: almost done</div>
<div class="done">Step 3: done!</div>

上のコードの問題は、Activeが非常に一般的なCSSクラスであるので、それはよりよいです
詳細には、詳細な名前のクラスを使用します.
それで、次のクラスで終わります.

    <div class='bo-step-done'>
        STEP 1
    </div>
    <div class='bo-step-active'>
        STEP 2
    </div>
    <div class='bo-step-todo'>
        STEP 3
    </div>

シンプルでコンパクト.さあ、このCSS原子部品に上記のコードを翻訳する時です.

SCSS + TailWindCSSにステッパコンポーネントを実装する方法

ステッパーの原子部品を実装するには、純粋なCSSを使いたいということを忘れないでください.
開発者はまた、1つだけのHTMLタグを使用してステッパーを実装することができます(開発者の経験:可能な限り最小限にタグの数を保つ).

ステップサークル

円を描くには、次のようなテール風クラスを使用します.

@apply h-6 w-6 rounded-full border-2 border-bop bg-bop ;

rounded-full 組み合わせるbg-bop は、メインの色を使用して円の形になります-bop カラー.下記の注意を参照).
なぜborder-2 ? 特定の状態のために後でそれをカスタマイズするので.
ノート
The -bop カラーインbg-bop and border-bop 主なbutopen色に言及してください.使えます-red-600 or -green-500 ... それはあなたの選択です.
butopenプライマリカラーの良いことは
これはCSS 3変数で、実行時にルートスタイル( 1 )を使用したり、JavaScript ( 2 )

空の円は塗りつぶされた円を拡張するが、@apply bg-white クラス.
我々は、どのようにすぐに表示されます.

サークルポジション

円はステップ高さの中央に配置されますので、これらのテール風クラスを追加します.

flex items-center justify-center absolute top-0

サークルアイコン

私たちは純粋なCSSを持ちたいので、3つのアイコンを選択しました.

CSSのBase 64イメージデータURLhttps://www.cssportal.com/image-to-data/ )

CSSにおけるSVGデータURL (例:このオンラインツールを使用する)https://yoksel.github.io/url-encoder/ )

UTF 8アイコン(例:https://www.utf8icons.com/ )

これらのアイコンはUTF - 8で入手可能です.
純粋なCSSのチェックアイコン✓
純粋なCSSでの銃弾アイコン

ステップ垂直線の描画

垂直線は境界を持つ空の要素になります.
以下のテールウインドクラスを使用できます.

@apply block h-full w-0.5 border border-gray-300 absolute top-0 -left-4

The block h-full w-0.5 border border-gray-300 クラスは垂直線を描画します.
最後の3つのクラスは、要素を親に対して相対的に配置するために使用されます.

開発者にステップを実装するために単一のdivタグを使用させてください

開発者にステッパを実装して欲しい.

一つの札

シングルクラス

そこで、CSS擬似クラスの前後に使用します.
ベースステップのCSS(SCSS構文)は以下の通りです.

._bo-step {
  // the text
  @apply relative ml-8 pb-8 pt-0.5 pl-2 text-sm font-bold text-gray-500;

  // the vertical line
  &:before {
    content: "";
    @apply absolute top-0 -left-4 block h-full w-0.5 border border-gray-300;
  }

  // the icon
  &:after {
    content: "";
    @apply absolute top-0 flex h-6 w-6 items-center justify-center rounded-full border-2 border-bop bg-bop;
    left: -1.7rem;
  }
}

これは私たちの基本的なCSS構造である.
クラスの名前に小さなアンダースコアを追加しました._bo-step ) 開発者にこのクラスを直接使用したくないので.
それは“プライベート”クラスのようです.
この基本構造を持つので、いくつかの部分をカスタマイズすることで簡単に各ステップの状態を定義することができます.
結果を見てください.

完了したステップには次のようになります.

主色を用いた垂直線

チェックアイコン(白)

塗りつぶした円

.bo-step-done {
  @extend ._bo-step;
  &:before {
    @apply border-bop;
  }
  &:after {
    content: "✓";
    @apply text-sm font-black text-white;
  }
}

With @extend ベースCSS構造を拡張します.
それから、新しい色のクラスを指定することによって、境界色(グレイからプライマリまで)をオーバーライドします&:before セクション.
同じ&:after セクション

content: "✓" チェックアイコン

いくつかのTruwindフォント規則は、チェックアイコンを白にする(UTF 8テキストであることを覚えています).

アクティブでTODOステップも同様です.
アクティブなステップには次のようになります.

主色を用いた垂直線

弾丸のアイコン(主な色)

白い色の円

.bo-step-active {
  @extend ._bo-step;
  @apply text-bop;
  &:after {
    content: "•";
    @apply bg-white pb-1 text-lg font-black text-bop;
  }
}

todoステップには次のようになります.

灰色垂直線

アイコンなし

白い背景と円の灰色の境界線

.bo-step-todo {
  @extend ._bo-step;
  &:after {
    @apply rounded-full border-gray-300 bg-white;
  }
  &:last-child {
    &:before {
      @apply border-transparent;
    }
  }
}

完全butopenデザインシステム

このコンポーネントは現在butopenデザインシステムの一部です.

オープンソースです

それは純粋なCSSで作られます

それは消費し、任意のフロントエンドのフレームワークに統合するのは簡単です

ここで見つけることができます.https://github.com/butopen/butopen-design-system