83.3K+İndir
Kurumsal yazılım · Yeni kaynak

Oracle Redwood Tasarım Sistemi.

Eksiksiz ve özgün, düzenlenebilir bir stok inceleme çalışma sayfası üzerinden Oracle JET 19 Redwood’un gerçek paletini, anlamsal rollerini, aralıklarını ve yoğunluk sınırlarını inceleyin.

OpenDesign’ı indirin DESIGN.md dosyasını indir
OpenDesign Kılavuzu8 Bölüm45 Başvuru KaydıÖzgün Uygulama Kılavuzu
01

Oracle Redwood Tasarım Sistemi Arayüz Önizlemesi

Geçerli taslağı koruyarak miktarları düzenleyin, doğrulamayı inceleyin, sıralayın ve filtreleyin.

Yerel bir malzeme taslağını inceleyinÖrneğin Tamamını Aç
Gerçek JET 19 Redwood herkese açık tema değişkenlerini kullanan özgün tarayıcı uygulaması; yerel JET JavaScript çalışma zamanı yok. · Uygulama başvurusu
02

Oracle Redwood Tasarım Sistemi Tasarım Başvurusu

Sabitlenmiş JET 19.0.0 Redwood stil dosyasındaki temel herkese açık tanımlar. Özgün çalışma sayfası davranışı ve düzeni ayrı olarak belirtilmiştir; özel değişkenler ve daha sonraki ters renk geçersiz kılmaları temel başvuruya dâhil edilmemiştir.

Redwood temel anlamsal rolleri

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
--oj-core-text-color-primaryrgb(var(--oj-palette-neutral-rgb-190))JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin.
--oj-core-text-color-secondaryrgba(var(--oj-palette-neutral-rgb-190), .70)JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin.
--oj-core-text-color-disabledrgba(var(--oj-palette-neutral-rgb-190), .4)JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin.
--oj-core-bg-color-contentrgb(var(--oj-palette-neutral-rgb-0))JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin.
--oj-body-bg-colorrgb(var(--oj-palette-neutral-rgb-10))JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin.
--oj-core-divider-colorrgba(var(--oj-palette-neutral-rgb-190),.12)JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin.
--oj-core-focus-border-colorrgb(var(--oj-palette-neutral-rgb-190))JET 19 Redwood'daki ilk/temel tanımlar. Ters renk ve yoğunluk seçicileri değerleri geçersiz kılabilir; tüm tanımları son değer için tek bir arama tablosunda birleştirmeyin.

Çalışma sayfasında kullanılan palet değerleri

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
--oj-palette-neutral-rgb-0255, 255, 255Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-neutral-rgb-10251, 249, 248Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-neutral-rgb-20245, 244, 242Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-neutral-rgb-19022, 21, 19Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-brand-rgb-1200, 104, 140Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-info-rgb-20237, 246, 249Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-danger-rgb-120179, 49, 31Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-success-rgb-20235, 248, 222Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.
--oj-palette-success-rgb-14053, 86, 23Ham RGB kanal değerleri rgb() veya rgba() içinde kullanılır. Bunlar tek başına tam CSS renk değerleri değildir.

Aralık ve şekil

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
--oj-core-spacing-1x.25remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-2x.5remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-3x.75remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-4x1remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-5x1.25remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-6x1.5remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-7x1.75remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-8x2remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-9x2.25remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-10x2.5remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-11x2.75remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-spacing-12x3remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-border-radius-sm2pxYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-border-radius-md.25remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-border-radius-lg.375remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.
--oj-core-border-radius-xl.5remYayımlanmış temel ölçek. Çalışma sayfasının yerel HTML kontrolleri seçili değerleri kullanır; ancak JET bileşenlerinin davranışını taklit ettiği iddia edilmez.

Gövde tipografisi ve denetim boyutları

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
--oj-typography-body-xs-font-size0.75remTemel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.
--oj-typography-body-sm-font-size0.859remTemel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.
--oj-typography-body-md-font-size1remTemel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.
--oj-typography-body-lg-font-size1.125remTemel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.
--oj-typography-body-xl-font-size1.25remTemel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.
--oj-typography-body-md-line-height1.25Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.
--oj-button-height2.75remTemel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.
--oj-button-border-radiusvar(--oj-core-border-radius-md)Temel tema tanımları. Özgün örnekte yedek yazı tipi olarak Arial kullanılır; tablo ve içerik düzeni uygulama kodudur.

Genel kullanıma açık stillendirme sınırları

Kaynak
Ad / KuralDeğer / YapılandırmaKullanım
Global theme overrides:root declarations after JET CSSKök düzeyindeki bir geçersiz kılma, bu genel kullanıma açık değişkeni kullanan herkesi etkiler.
Instance stylingA class scoped to the target componentDeğişiklik yalnızca tek bir yerel bileşen için gerekiyorsa genel kullanıma açık değişkeni kapsamlandırın.
Redwood baseTracks Oracle visual changesAmaç Oracle’ın görünümünü yakalamaksa bunu seçin; güncellemeler devralınan değerleri değiştirebilir.
Stable baseAlternative for a distinct custom themeBunu Redwood ile birebir aynıymış gibi sunmayın veya tüm tersine çevirme/ölçeklendirme özelliklerinin eşleştiğini varsaymayın.
Private variables--oj-private-* excludedÖrnek, genel kullanıma açık başvuru değerlerini özel uygulama kancaları üzerine kurmaz.
03

Oracle Redwood Tasarım Sistemi Kapsamlı Kılavuzu

Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz.

DESIGN-oracle-redwood.md

Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları.

Kılavuzu İndir

Oracle Redwood Tasarım Sistemi ve JET Sürüm Sınırları

Uygulama katmanını doğru adlandırın

Redwood, indirilebilir tek bir bileşen kitaplığından daha kapsamlıdır. Bu kılavuzda, somut ve incelenebilir bir başvuru kaynağı olan Oracle JET 19.0.0 ile sunulan genel kullanıma açık CSS temelleri kullanılır. Önizleme, bu değerleri kullanan özgün bir HTML/CSS stok inceleme çalışma sayfasıdır; oj-table, oj-input-number veya başka bir yerel JET özel öğesini örneklemez. Çalışma zamanı açıklaması açıkça belirtilmiştir; böylece okuyucular görsel temelleri eksiksiz bir Oracle uygulama SDK’sıyla karıştırmaz.

Bu OpenDesign kılavuzundan
  • Başvuru kaynağı: Oracle JET 19 Redwood CSS.
  • Önizleme çalışma zamanı: özgün yerel tarayıcı HTML/CSS/JavaScript.
  • Veriler ve doğrulama kuralları: özgün yerel örnek.

Oracle uygulamasını benimsemeyi ayrı ele alın

Redwood’u bir Oracle SaaS ürününde benimsemek, JET uygulamasını yapılandırmak ve genel kullanıma açık bir tema başvurusundan yararlanmak birbirinden farklı işlerdir. Örnek bir kiracıda değişiklik yapmaz, envanter kayıtlarına bağlanmaz veya ürün geçişi gerçekleştirmez. Görsel kuralları ve durum modelini incelemek için yerel belgenin tamamı kullanılabilir; gerçek bir JET uygulaması ise sürümlenmiş çerçeve kurulumunu ve yerel bileşen belgelerini izlemelidir.

Oracle Redwood Tasarım Sistemi Anlamsal Rolleri ve Palet Değerleri

Temel tanımları doğru belirleyin

Başvuru, sabitlenmiş stil sayfasındaki her genel kullanıma açık değişkenin ilk/temel tanımını alır. Sonraki tersine çevirme veya yoğunluk kapsamları aynı adı yeniden tanımlayabilir. Bu nedenle, son eşleşmeyi alan basit bir çıkarım, tersine çevrilmiş bir ön plan rengini varsayılan açık metin rengi olarak etiketleyebilir. Kılavuz temel kapsamı açıkça belirtir ve yayımlanan başvuruya --oj-private-* kancalarını dahil etmez.

Ham kanalları renk değerlerinden ayırın

--oj-palette-brand-rgb-120 gibi palet değişkenleri üç RGB kanalı içerirken anlamsal roller bu kanalları rgb() veya rgba() ile sarar. Özgün eylem rengi marka kanallarını rgb() üzerinden kullanır; metin core-text-color-primary, kart yüzeyi ise core-bg-color-content kullanır. Ham kanal dizgesini doğrudan background-color değerine kopyalamak, sayılar makul görünse bile geçersiz CSS olur.

Oracle Redwood Tasarım Sistemi Boşluk, Yazı Tipi ve Yoğunluk

Somut temel ölçeğini kullanın

Genel kullanıma açık core-spacing dizisi, 1x ile 12x arasında 4px’lik adımlarla ilerler. Küçük, orta, büyük ve ekstra büyük kenarlık rolleri birbirinden ayrıdır; düğme yüksekliği ise ayrı bir bileşen değişkenidir. Çalışma sayfası uygun yerlerde bu gerçek değerleri kullanır; 32px başlığını, duyarlı tablo dönüşümünü ve 1120px dış ölçüyü ise özgün yerleşim kararları olarak tanımlar.

Yoğunluğa özgü değerleri karıştırmayın

Bu sabitlenmiş stil sayfasında temel body-md boyutu 1rem, satır yüksekliği ise 1.25’tir; sonraki seçiciler ölçeklenmiş piksel değerleri sunabilir. Kılavuz, her Redwood bağlamında hesaplanan boyutun aynı olması gerektiğini ima etmek yerine temel değeri kaydeder. Tarayıcı örneği, Oracle Sans yüklüymüş gibi davranmak yerine yedek yazı tipi olarak Arial kullanır. Yerel bir JET uygulaması, seçilen yoğunluk, tema ve platformu birlikte sınamalıdır.

Oracle Redwood Tasarım Sistemi Esinli Çalışma Sayfası Yapısı

Verileri ve eylemleri anlaşılır kılın

Her özgün satırda bir stüdyo malzemesinin adı ve birimi açıklanır, mevcut stok miktarı asgari miktarla karşılaştırılır ve bir miktar girişi sunulur. İnceleme durumu etiketi, öğenin yerel taslağa dahil olup olmadığını da belirtir. Özet, filtreyle gizlenen satırlar da dahil olmak üzere taslağın tamamındaki birimleri sayar. Bunlar envanter kanıtı veya satın alma önerisi değil, kurgusal örnek kayıtlardır.

Sıralama boyunca satır kimliğini koruyun

Oracle Redwood Tasarım Sistemi Esinli Miktar Doğrulaması

Belirtilen yerel kuralın dışındaki değerleri reddedin

Özgün miktar girişi, sıfır ile 99 arasındaki tam sayılara izin verir. Boş, negatif, kesirli veya aralık dışı değerler satır içi hata gösterir ve inceleme eylemini devre dışı bırakır. Taslak modeli, geçerli bir düzenleme yapılana kadar son geçerli miktarı korur. Görünen hata bu farkı açıkça belirtir ve geçersiz hiçbir değer incelenen toplama dahil edilmez.

Geçersiz bir düzenlemenin ne zaman atıldığını açıklayın

Filtreyi veya sıralamayı değiştirmek, görünür satırları son geçerli taslak değerlerinden yeniden oluşturur; bu nedenle tamamlanmamış geçersiz bir düzenleme atılır. Bu, yerel örneğin bilinçli bir sınırıdır; yerel JET doğrulama garantisi değildir. Üretimde kullanılan düzenlenebilir bir tablo, geçersiz taslakları tüm görünümler boyunca koruyabilir veya gezinmeyi engelleyebilir; bu davranış kendi durum modelinde tasarlanıp sınanmalıdır.

Oracle Redwood Tasarım Sistemi Esinli İnceleme ve Sıfırlama

Gönderim yapıyormuş gibi davranmadan yerel incelemeyi açıklayın

Bu taslağı incele eylemi, birimlerin ve katkıda bulunan öğelerin okunabilir bir sayısını gösterir. Ayrıca hiçbir siparişin gönderilmediğini açıkça belirtir. Örnek zorunlu satın alma kuralı uydurmadığından sıfır birimlik geçerli bir taslağı kabul eder. Miktar düzenlendiğinde önceki inceleme mesajı temizlenir; böylece değişen taslakta eski bir onay mesajı kalmaz.

Öngörülebilir kurtarma olanağı sunun

Miktarları sıfırla, önerilen ilk eklemeleri geri yükler ve inceleme mesajını temizler. Geçerli filtreyi ve sıralamayı korur, ardından sıfırlanan modele göre bu satırları yeniden çizer. Böylece sayfayı yeniden yüklemeden kurtarma işlemi görünür hâle gelir. Örnekte depolama veya arka uç bulunmadığından sayfayı yeniden yüklemek de ilk yerel verileri geri yükler.

Oracle Redwood Tasarım Sistemi Esinli Duyarlı Tablo

Dar ekranlarda bilgi hiyerarşisini koruyun

Geniş düzende sütun başlıkları ve satır başlığı olarak kullanılan öğe adlarıyla bir tablo gösterilir. 650px altında satırlar okunabilir bloklara dönüşür ve her veri hücresinde değerden önce etiketi gösterilir. Girişler kullanılabilir genişliğe sığar; öğe açıklaması da öğe adına bağlı kalır. Bu geçiş özgün uygulama CSS davranışıdır; oj-table’ın duyarlı davranışına ilişkin bir iddia değildir.

Düzenlenmiş ve filtrelenmiş durumları sınayın

Tarayıcı kontrolünde geçersiz bir miktar girilir, değer düzeltilir, öğeler sıralanır, asgari stok seviyesinin altındakiler filtrelenir ve düzen ölçülmeden önce sonuç toplamı incelenir. 1440px’ten 280px’e kadar dört genişlik sınanmıştır. Bu, yalnızca boş bir tablo kapsayıcısının varlığını değil, gerçek içeriği ve durum değişikliklerini sınar.

Oracle Redwood Tasarım Sistemi Eksiksiz Başvuru Uygulaması

Sağlanan eksiksiz belgeyi çalıştırın

HTML örneği gerekli genel kullanıma açık belirteç tanımlarını, özgün stilleri, örnek kayıtları ve tüm olay işleyicilerini içerir. Dosyayı index.html adıyla kaydedip klasörü sunun; eksik içe aktarma veya harici çalışma zamanı çağrısı yoktur. Yerel uygulamanın çalışması için JET JavaScript paketi gerekmese de başvuru değerleri JET 19.0.0 sürümüne sabitlenmiştir.

  1. Sağlanan belgenin tamamını index.html adıyla kaydedin.
  2. Klasörü yerel HTTP üzerinden sunun.
  3. Geçersiz miktarları ve düzeltme işlemini sınayın.
  4. Taslağı sıralayıp filtreleyin; ardından inceleyin ve sıfırlayın.

Yerel JET bileşenlerini kendi kurulumlarıyla kullanın

Oracle Redwood Tasarım Sistemi Bileşen Örnekleri

index.html — eksiksiz özgün çalışma sayfası

Genel kullanıma açık belirteçlerin bir alt kümesinin tamamı, duyarlı HTML, doğrulama, kararlı satır durumu ve yerel inceleme/sıfırlama davranışı.

html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Studio supplies worksheet</title><style>:root{--oj-palette-danger-rgb-10:255, 248, 247;--oj-palette-danger-rgb-20:255, 241, 239;--oj-palette-danger-rgb-30:255, 235, 232;--oj-palette-danger-rgb-40:255, 217, 211;--oj-palette-danger-rgb-50:255, 193, 184;--oj-palette-danger-rgb-60:255, 157, 144;--oj-palette-danger-rgb-70:255, 134, 117;--oj-palette-danger-rgb-80:254, 104, 84;--oj-palette-danger-rgb-90:236, 79, 58;--oj-palette-danger-rgb-100:214, 59, 37;--oj-palette-danger-rgb-110:195, 53, 34;--oj-palette-danger-rgb-120:179, 49, 31;--oj-palette-danger-rgb-130:170, 34, 34;--oj-palette-danger-rgb-140:143, 39, 25;--oj-palette-danger-rgb-150:124, 34, 22;--oj-palette-danger-rgb-160:102, 28, 18;--oj-palette-danger-rgb-170:86, 24, 15;--oj-palette-warning-rgb-10:254, 249, 242;--oj-palette-warning-rgb-20:253, 242, 229;--oj-palette-warning-rgb-30:252, 237, 220;--oj-palette-warning-rgb-40:249, 221, 188;--oj-palette-warning-rgb-50:246, 199, 146;--oj-palette-warning-rgb-60:240, 169, 87;--oj-palette-warning-rgb-70:235, 150, 50;--oj-palette-warning-rgb-80:225, 128, 18;--oj-palette-warning-rgb-90:198, 113, 14;--oj-palette-warning-rgb-100:172, 99, 12;--oj-palette-warning-rgb-110:156, 89, 11;--oj-palette-warning-rgb-120:143, 82, 10;--oj-palette-warning-rgb-130:129, 73, 9;--oj-palette-warning-rgb-140:114, 65, 8;--oj-palette-warning-rgb-150:99, 56, 7;--oj-palette-warning-rgb-160:81, 47, 6;--oj-palette-warning-rgb-170:69, 39, 5;--oj-palette-success-rgb-10:244, 252, 235;--oj-palette-success-rgb-20:235, 248, 222;--oj-palette-success-rgb-30:228, 245, 211;--oj-palette-success-rgb-40:207, 235, 179;--oj-palette-success-rgb-50:177, 221, 136;--oj-palette-success-rgb-60:138, 201, 79;--oj-palette-success-rgb-70:125, 186, 69;--oj-palette-success-rgb-80:111, 169, 57;--oj-palette-success-rgb-90:94, 148, 43;--oj-palette-success-rgb-100:80, 130, 35;--oj-palette-success-rgb-110:73, 118, 32;--oj-palette-success-rgb-120:67, 107, 29;--oj-palette-success-rgb-130:60, 96, 26;--oj-palette-success-rgb-140:53, 86, 23;--oj-palette-success-rgb-150:46, 73, 20;--oj-palette-success-rgb-160:38, 61, 16;--oj-palette-success-rgb-170:31, 51, 14;--oj-palette-info-rgb-10:246, 250, 252;--oj-palette-info-rgb-20:237, 246, 249;--oj-palette-info-rgb-30:228, 241, 247;--oj-palette-info-rgb-40:208, 229, 238;--oj-palette-info-rgb-50:180, 213, 225;--oj-palette-info-rgb-60:143, 191, 208;--oj-palette-info-rgb-70:121, 177, 198;--oj-palette-info-rgb-80:95, 162, 186;--oj-palette-info-rgb-90:65, 144, 172;--oj-palette-info-rgb-100:34, 126, 158;--oj-palette-info-rgb-110:14, 114, 151;--oj-palette-info-rgb-120:0, 104, 140;--oj-palette-info-rgb-130:2, 94, 126;--oj-palette-info-rgb-140:4, 83, 111;--oj-palette-info-rgb-150:6, 72, 95;--oj-palette-info-rgb-160:6, 60, 78;--oj-palette-info-rgb-170:5, 50, 66;--oj-palette-brand-rgb-10:246, 250, 252;--oj-palette-brand-rgb-20:237, 246, 249;--oj-palette-brand-rgb-30:228, 241, 247;--oj-palette-brand-rgb-40:208, 229, 238;--oj-palette-brand-rgb-50:180, 213, 225;--oj-palette-brand-rgb-60:143, 191, 208;--oj-palette-brand-rgb-70:121, 177, 198;--oj-palette-brand-rgb-80:95, 162, 186;--oj-palette-brand-rgb-90:65, 144, 172;--oj-palette-brand-rgb-100:34, 126, 158;--oj-palette-brand-rgb-110:14, 114, 151;--oj-palette-brand-rgb-120:0, 104, 140;--oj-palette-brand-rgb-130:2, 94, 126;--oj-palette-brand-rgb-140:4, 83, 111;--oj-palette-brand-rgb-150:6, 72, 95;--oj-palette-brand-rgb-160:6, 60, 78;--oj-palette-brand-rgb-170:5, 50, 66;--oj-palette-neutral-rgb-0:255, 255, 255;--oj-palette-neutral-rgb-10:251, 249, 248;--oj-palette-neutral-rgb-20:245, 244, 242;--oj-palette-neutral-rgb-30:241, 239, 237;--oj-palette-neutral-rgb-40:228, 225, 221;--oj-palette-neutral-rgb-50:212, 207, 202;--oj-palette-neutral-rgb-60:188, 182, 177;--oj-palette-neutral-rgb-70:174, 168, 162;--oj-palette-neutral-rgb-80:158, 152, 146;--oj-palette-neutral-rgb-90:139, 133, 128;--oj-palette-neutral-rgb-100:123, 117, 112;--oj-palette-neutral-rgb-110:111, 105, 100;--oj-palette-neutral-rgb-120:101, 95, 91;--oj-palette-neutral-rgb-130:92, 86, 81;--oj-palette-neutral-rgb-140:81, 76, 71;--oj-palette-neutral-rgb-150:71, 66, 62;--oj-palette-neutral-rgb-160:58, 54, 50;--oj-palette-neutral-rgb-170:49, 45, 42;--oj-palette-neutral-rgb-180:32, 30, 28;--oj-palette-neutral-rgb-190:22, 21, 19;--oj-palette-neutral-rgb-200:00, 00, 00;--oj-palette-dvt-rgb-1:36, 93, 99;--oj-palette-dvt-rgb-2:215, 121, 15;--oj-palette-dvt-rgb-3:49, 160, 156;--oj-palette-dvt-rgb-4:78, 65, 55;--oj-palette-dvt-rgb-5:105, 158, 97;--oj-palette-dvt-rgb-6:180, 114, 130;--oj-palette-dvt-rgb-7:131, 64, 30;--oj-palette-dvt-rgb-8:158, 127, 204;--oj-palette-dvt-rgb-9:168, 142, 0;--oj-palette-dvt-rgb-10:88, 49, 110;--oj-palette-dvt-rgb-11:89, 153, 181;--oj-palette-dvt-rgb-12:49, 122, 69;--oj-core-text-color-primary:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-text-color-secondary:rgba(var(--oj-palette-neutral-rgb-190), .70);--oj-core-text-color-disabled:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-text-color-brand:rgb(var(--oj-palette-brand-rgb-110));--oj-core-text-color-danger:rgb(var(--oj-palette-danger-rgb-120));--oj-core-text-color-warning:rgb(var(--oj-palette-warning-rgb-120));--oj-core-text-color-success:rgb(var(--oj-palette-success-rgb-120));--oj-core-bg-color-content:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-bg-color-hover:rgba(var(--oj-palette-neutral-rgb-190), .08);--oj-core-bg-color-active:rgba(var(--oj-palette-neutral-rgb-190), .16);--oj-core-bg-color-selected:rgb(var(--oj-palette-brand-rgb-30));--oj-core-border-color-selected:rgb(var(--oj-palette-brand-rgb-100));--oj-core-border-color-enabled:rgba(var(--oj-palette-neutral-rgb-190), 0.5);--oj-core-color-disabled-1:rgba(var(--oj-palette-neutral-rgb-190), 0.04);--oj-core-color-disabled-2:rgba(var(--oj-palette-neutral-rgb-190),.20);--oj-core-icon-size-lg:1.5rem;--oj-core-icon-size-sm:1rem;--oj-core-divider-color:rgba(var(--oj-palette-neutral-rgb-190),.12);--oj-core-divider-margin:0.5rem;--oj-core-neutral-1:rgb(var(--oj-palette-neutral-rgb-100));--oj-core-neutral-2:rgb(var(--oj-palette-neutral-rgb-110));--oj-core-neutral-3:rgb(var(--oj-palette-neutral-rgb-120));--oj-core-neutral-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-neutral-secondary-1:rgba(var(--oj-palette-neutral-rgb-190), 0.08);--oj-core-neutral-secondary-2:rgb(var(--oj-palette-neutral-rgb-20));--oj-core-neutral-secondary-3:rgb(var(--oj-palette-neutral-rgb-10));--oj-core-neutral-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-brand-1:rgb(var(--oj-palette-brand-rgb-100));--oj-core-brand-2:rgb(var(--oj-palette-brand-rgb-110));--oj-core-brand-3:rgb(var(--oj-palette-brand-rgb-120));--oj-core-brand-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-1:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-2:rgb(var(--oj-palette-danger-rgb-110));--oj-core-danger-3:rgb(var(--oj-palette-danger-rgb-120));--oj-core-danger-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-danger-secondary-1:rgba(var(--oj-palette-danger-rgb-60), 0.4);--oj-core-danger-secondary-2:rgb(var(--oj-palette-danger-rgb-20));--oj-core-danger-secondary-3:rgb(var(--oj-palette-danger-rgb-10));--oj-core-danger-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-warning-1:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-2:rgb(var(--oj-palette-warning-rgb-110));--oj-core-warning-3:rgb(var(--oj-palette-warning-rgb-120));--oj-core-warning-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-warning-secondary-1:rgba(var(--oj-palette-warning-rgb-60), 0.4);--oj-core-warning-secondary-2:rgb(var(--oj-palette-warning-rgb-20));--oj-core-warning-secondary-3:rgb(var(--oj-palette-warning-rgb-10));--oj-core-warning-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-success-1:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-2:rgb(var(--oj-palette-success-rgb-110));--oj-core-success-3:rgb(var(--oj-palette-success-rgb-120));--oj-core-success-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-success-secondary-1:rgba(var(--oj-palette-success-rgb-60), 0.4);--oj-core-success-secondary-2:rgb(var(--oj-palette-success-rgb-20));--oj-core-success-secondary-3:rgb(var(--oj-palette-success-rgb-10));--oj-core-success-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-info-1:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-2:rgb(var(--oj-palette-info-rgb-110));--oj-core-info-3:rgb(var(--oj-palette-info-rgb-120));--oj-core-info-contrast:rgb(var(--oj-palette-neutral-rgb-0));--oj-core-info-secondary-1:rgba(var(--oj-palette-info-rgb-60), 0.4);--oj-core-info-secondary-2:rgb(var(--oj-palette-info-rgb-20));--oj-core-info-secondary-3:rgb(var(--oj-palette-info-rgb-10));--oj-core-info-secondary-contrast:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-focus-border-color:rgb(var(--oj-palette-neutral-rgb-190));--oj-core-cursor-clickable:pointer;--oj-core-drag-drop-color-1:rgb(var(--oj-palette-brand-rgb-40));--oj-core-drag-drop-color-2:rgb(var(--oj-palette-brand-rgb-100));--oj-core-drag-drop-line-color:rgb(var(--oj-palette-brand-rgb-100));--oj-core-touch-target-min-size:2.25rem;--oj-core-box-shadow-rgb:var(--oj-palette-neutral-rgb-200);--oj-core-box-shadow-xs:0px 1px 4px 0px rgba(var(--oj-core-box-shadow-rgb),.12);--oj-core-box-shadow-sm:0px 4px 8px 0px rgba(var(--oj-core-box-shadow-rgb),.16);--oj-core-box-shadow-md:0px 6px 12px 0px rgba(var(--oj-core-box-shadow-rgb),.2);--oj-core-box-shadow-lg:0px 8px 16px 0px rgba(var(--oj-core-box-shadow-rgb),0.24);--oj-core-box-shadow-xl:0px 12px 20px 0px rgba(var(--oj-core-box-shadow-rgb),0.28);--oj-core-dropdown-box-shadow:var(--oj-core-box-shadow-sm);--oj-core-scrim-color:rgba(var(--oj-palette-neutral-rgb-190), .4);--oj-core-spacing-1x:.25rem;--oj-core-spacing-2x:.5rem;--oj-core-spacing-3x:.75rem;--oj-core-spacing-4x:1rem;--oj-core-spacing-5x:1.25rem;--oj-core-spacing-6x:1.5rem;--oj-core-spacing-7x:1.75rem;--oj-core-spacing-8x:2rem;--oj-core-spacing-9x:2.25rem;--oj-core-spacing-10x:2.5rem;--oj-core-spacing-11x:2.75rem;--oj-core-spacing-12x:3rem;--oj-core-border-radius-sm:2px;--oj-core-border-radius-md:.25rem;--oj-core-border-radius-lg:.375rem;--oj-core-border-radius-xl:.5rem;--oj-core-z-index-popup:1000;--oj-core-z-index-dialog:1050;--oj-core-z-index-messages:2000;--oj-typography-heading-2xl-font-size:2.5rem;--oj-typography-heading-2xl-font-weight:800;--oj-typography-heading-2xl-line-height:1.3;--oj-typography-heading-xl-font-size:2.25rem;--oj-typography-heading-xl-font-weight:800;--oj-typography-heading-xl-line-height:1.222;--oj-typography-heading-lg-font-size:2rem;--oj-typography-heading-lg-font-weight:800;--oj-typography-heading-lg-line-height:1.25;--oj-typography-heading-md-font-size:1.75rem;--oj-typography-heading-md-font-weight:800;--oj-typography-heading-md-line-height:1.2857;--oj-typography-heading-sm-font-size:1.5rem;--oj-typography-heading-sm-font-weight:800;--oj-typography-heading-sm-line-height:1.3333;--oj-typography-heading-xs-font-size:1.25rem;--oj-typography-heading-xs-font-weight:800;--oj-typography-heading-xs-line-height:1.4;--oj-typography-subheading-2xl-font-size:2.25rem;--oj-typography-subheading-2xl-font-weight:bold;--oj-typography-subheading-2xl-line-height:1.2222;--oj-typography-subheading-xl-font-size:2rem;--oj-typography-subheading-xl-font-weight:bold;--oj-typography-subheading-xl-line-height:1.25;--oj-typography-subheading-lg-font-size:1.75rem;--oj-typography-subheading-lg-font-weight:bold;--oj-typography-subheading-lg-line-height:1.2857;--oj-typography-subheading-md-font-size:1.5rem;--oj-typography-subheading-md-font-weight:bold;--oj-typography-subheading-md-line-height:1.3333;--oj-typography-subheading-sm-font-size:1.25rem;--oj-typography-subheading-sm-font-weight:bold;--oj-typography-subheading-sm-line-height:1.4;--oj-typography-subheading-xs-font-size:1rem;--oj-typography-subheading-xs-font-weight:bold;--oj-typography-subheading-xs-line-height:1.5;--oj-typography-body-xl-font-size:1.25rem;--oj-typography-body-xl-line-height:1.4;--oj-typography-body-lg-font-size:1.125rem;--oj-typography-body-lg-line-height:1.3333;--oj-typography-body-md-font-size:1rem;--oj-typography-body-md-line-height:1.25;--oj-typography-body-sm-font-size:0.859rem;--oj-typography-body-sm-line-height:1.2;--oj-typography-body-xs-font-size:0.75rem;--oj-typography-body-xs-line-height:1.3333;--oj-typography-body-2xs-font-size:0.625rem;--oj-typography-body-2xs-line-height:1.2;--oj-body-bg-color:rgb(var(--oj-palette-neutral-rgb-10));--oj-button-height:2.75rem;--oj-button-border-radius:var(--oj-core-border-radius-md);}*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;font-size:16px;color:var(--oj-core-text-color-primary);background:var(--oj-body-bg-color)}main{max-width:1120px;padding:32px;margin:auto}header{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;flex-wrap:wrap}h1{font-size:32px;line-height:1.2;margin:12px 0 24px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700}.scope{font-size:14px;line-height:1.6;max-width:78ch;color:var(--oj-core-text-color-secondary)}.count{padding:16px 24px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg);background:var(--oj-core-bg-color-content);min-width:140px}.count strong{display:block;font-size:32px}.toolbar{display:flex;gap:24px;align-items:center;flex-wrap:wrap;margin:24px 0}button,select,input{font:inherit}button{min-height:var(--oj-button-height);padding:8px 16px;border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-button-border-radius);background:var(--oj-core-bg-color-content);color:var(--oj-core-text-color-primary);cursor:pointer}button.primary{background:rgb(var(--oj-palette-brand-rgb-120));color:white;border-color:transparent}button:disabled{opacity:.5;cursor:default}select{min-height:44px;border:1px solid var(--oj-core-divider-color);border-radius:4px;padding:8px;background:white;max-width:100%}.table-wrap{overflow:auto;background:var(--oj-core-bg-color-content);border:1px solid var(--oj-core-divider-color);border-radius:var(--oj-core-border-radius-lg)}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{text-align:left;padding:20px 24px;vertical-align:top;border-bottom:1px solid var(--oj-core-divider-color)}thead th{font-size:13px;background:rgb(var(--oj-palette-neutral-rgb-20))}th:first-child{width:36%}tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}td p,th p{font-size:13px;color:var(--oj-core-text-color-secondary);font-weight:400;margin:8px 0;line-height:1.5}input{width:88px;max-width:100%;padding:8px;border:1px solid var(--oj-core-divider-color);border-radius:4px;background:white;min-height:44px}.note{margin:24px 0;padding:24px;background:rgb(var(--oj-palette-info-rgb-20));border-left:4px solid rgb(var(--oj-palette-brand-rgb-120));line-height:1.6}.actions{display:flex;gap:16px;flex-wrap:wrap}.error{color:rgb(var(--oj-palette-danger-rgb-120));font-size:13px;line-height:1.5}.status{font-size:13px;padding:4px 8px;border-radius:4px;background:rgb(var(--oj-palette-neutral-rgb-20));display:inline-block}.status.ready{background:rgb(var(--oj-palette-success-rgb-20));color:rgb(var(--oj-palette-success-rgb-140))}:focus-visible{outline:2px solid var(--oj-core-focus-border-color);outline-offset:3px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}table,tbody,tr,td,th{display:block}table{table-layout:auto}thead{display:none}th:first-child{width:auto}tbody tr{padding:16px;border-bottom:1px solid var(--oj-core-divider-color)}tbody tr:last-child{border-bottom:0}td,th{padding:8px;border:0!important}td:before{content:attr(data-label);display:block;font-size:12px;font-weight:700;margin-bottom:8px}.toolbar label{display:flex;flex-wrap:wrap;gap:8px}}
</style></head><body><main><header><div><p class="eyebrow">REDWOOD FOUNDATIONS / ORIGINAL WORKSHEET</p><h1>Prepare the studio supplies</h1><p class="scope">An original stock-review worksheet using public Oracle JET 19 Redwood variables. This is plain HTML/CSS and JavaScript, not a native JET component runtime or an Oracle inventory service. Arial is an explicit font fallback.</p></div><div class="count"><strong id="total">0</strong>units in the local draft</div></header><div class="toolbar"><label for="filter">Show <select id="filter"><option value="all">All sample items</option><option value="low">Below minimum stock</option></select></label><button id="sort">Sort by item name</button></div><div class="table-wrap"><table><thead><tr><th scope="col">Item</th><th scope="col">On hand / minimum</th><th scope="col">Add to draft</th><th scope="col">Review state</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No items match this view. <button id="show-all">Show all items</button></p><p class="note">Change a quantity to build a local replenishment draft. A draft may contain zero units. Nothing is ordered, approved or sent from this example.</p><div class="actions"><button class="primary" id="keep">Review this draft</button><button id="reset">Reset quantities</button></div><p id="message" role="status"></p></main><script>const initial=[{id:'paper',name:'Sketch paper',detail:'A4 recycled sheets',stock:18,min:30},{id:'markers',name:'Fine-tip markers',detail:'Black ink / single pens',stock:12,min:10},{id:'clips',name:'Binder clips',detail:'Medium / single clips',stock:6,min:20}];let amounts={paper:12,markers:0,clips:14},ascending=false;const tbody=document.querySelector('#rows');function visible(){let a=initial.filter(x=>document.querySelector('#filter').value!=='low'||x.stock<x.min);return ascending?[...a].sort((a,b)=>a.name.localeCompare(b.name)):a;}function count(){let inputs=[...document.querySelectorAll('input')];let bad=inputs.some(x=>!x.checkValidity()||x.value==='');document.querySelector('#keep').disabled=bad;document.querySelector('#total').textContent=Object.values(amounts).reduce((a,b)=>a+b,0);return bad;}function render(){tbody.innerHTML=visible().map(x=>`<tr><th scope="row">${x.name}<p>${x.detail}</p></th><td data-label="On hand / minimum">${x.stock} / ${x.min}<p>${x.stock<x.min?'Below minimum':'Above minimum'}</p></td><td data-label="Add to draft"><input id="qty-${x.id}" aria-label="Quantity for ${x.name}" type="number" min="0" max="99" step="1" value="${amounts[x.id]}" data-id="${x.id}"><p class="error" hidden>Use a whole number from 0 to 99.</p></td><td data-label="Review state"><span class="status ${amounts[x.id]?'ready':''}">${amounts[x.id]?'In draft':'No addition'}</span></td></tr>`).join('');tbody.querySelectorAll('input').forEach(input=>input.addEventListener('input',()=>{let valid=input.checkValidity()&&input.value!=='';input.setAttribute('aria-invalid',String(!valid));input.nextElementSibling.hidden=valid;document.querySelector('#message').textContent='';if(valid){amounts[input.dataset.id]=Number(input.value);const status=input.closest('tr').querySelector('.status');status.textContent=Number(input.value)?'In draft':'No addition';status.classList.toggle('ready',Number(input.value)>0)}count()}));document.querySelector('#empty').hidden=visible().length>0;count()}document.querySelector('#filter').addEventListener('change',render);document.querySelector('#sort').addEventListener('click',e=>{ascending=!ascending;e.currentTarget.textContent=ascending?'Use original order':'Sort by item name';render()});document.querySelector('#show-all').addEventListener('click',()=>{document.querySelector('#filter').value='all';render()});document.querySelector('#keep').addEventListener('click',()=>{if(!count())document.querySelector('#message').textContent='Reviewed '+Object.values(amounts).reduce((a,b)=>a+b,0)+' units across '+Object.values(amounts).filter(x=>x>0).length+' items in this local draft. No order was sent.'});document.querySelector('#reset').addEventListener('click',()=>{amounts={paper:12,markers:0,clips:14};document.querySelector('#message').textContent='';render()});render();</script></body></html>

Kod referansı

  • Bu örnek bilerek oj-table veya oj-input-number kullanmaz.
  • Herhangi bir Oracle uygulamasına, envanter hizmetine veya sipariş uç noktasına bağlı değildir.
04

Oracle Redwood Tasarım Sistemi Aracı Kurulumu

Uygulamaya Başlangıç Noktası

Özgün bağımsız yorumu çalıştırır. Yerel JET kullanımı, bağlantısı verilen resmi belgelerde açıklanan ayrı bir çerçeve kurulumunu gerektirir.

sh
# Save the complete supplied document as index.html.
python3 -m http.server 8000
# Open http://localhost:8000/

Projeniz İçin Bir İstem

Ajan İstemi
Doğrulanmış JET 19 genel kullanıma açık temel değişkenlerini kullanan özgün Redwood esinli stok inceleme çalışma sayfasını uygulayın. RGB kanal söz dizimini, öğe kimliğine göre tutulan geçerli miktar durumunu, doğrulama sınırlarını, sıralama/filtreleme boyunca korumayı, yalnızca yerel inceleme davranışını ve sıfırlamayı koruyun. Bu tarayıcı uygulamasını yerel JET veya bir Oracle hizmeti olarak tanımlamayın.
05

Oracle Redwood Tasarım Sistemi Kaynakları ve Kapsamı

Herkese açık Oracle JET 19 Redwood değişkenlerini kullanan bir OpenDesign yorumu. Önizleme, yerel JET bileşenleri veya Oracle envanter hizmeti değil, düz HTML/CSS/JavaScript içerir. Arial açıkça belirtilmiş bir yedek yazı tipidir.