Edit this post

State Aplikasi dengan Attribute Selector

tmp7
Feb 14

Di aplikasi web, misalkan kamu mau menampilkan halaman tertentu, atau menampilkan fitur tertentu ketika user sudah login. Ini adalah UI state aplikasi, dan lumayan sulit untuk diawasi perkembangannya.

UI state bisa bertambah banyak seriring kebutuhan. Tapi tanpa dokumentasi state apa saja yang ada, ini mimpi buruk untuk developer aplikasi web vanila.

Untuk itu kamu bisa gunakan attribute selector sebagai berikut di CSS :

css
/* initial state */
[data-view-name] { display: none; }

[data-view-group~="screens"][data-view-states~="homepage"] [data-view-group~="screens"][data-view-name~="homepage"] { 
    display: revert; 
}

Mula-mula semua elemen dengan attribute [data-view-name] akan disembunyikan. Kemudian kita tampilkan halaman beranda jika data-view-states bernilai homepage.

html
[ data-view-group="screens" data-view-states="homepage"
  
  [ data-view-group="screens" data-view-name="homepage"
    Beranda
  ]
  [ data-view-group="screens" data-view-name="settings"
    Pengaturan
  ]
  
]

Kalau kamu mau menampilkan halaman pengaturan, cukup ganti state di grup containernya saja :

html
[ data-view-group="screens" data-view-states="settings"
  
  [ data-view-group="screens" data-view-name="homepage"
    Beranda
  ]
  [ data-view-group="screens" data-view-name="settings"
    Pengaturan
  ]
  
]

Kamu juga bisa menampilkan keduanya :

html
[ data-view-group="screens" data-view-states="homepage settings"
  
  [ data-view-group="screens" data-view-name="homepage"
    Beranda
  ]
  [ data-view-group="screens" data-view-name="settings"
    Pengaturan
  ]
  
]

Tapi karena selector CSS cukup rumit, maka kita perlu buat utility.

Di akhir, kamu akan punya stateMap. Ini memastikan hanya state yang sudah ditambahkan ke stateMap saja yang bisa digunakan.

js
let viewStatesMap = [
  {
    group: 'workspace',
    states: [
      'sidebar',
    ],
    inverseStates: [
      'filter-target',
    ],
  },
];
Home

Komentar

Posting Komentar