lipgloss

ملمع الشفاه

تعريفات النمط لتخطيطات المحطة الطرفية الرائعة. تم تصميمه مع وضع TUIs في الاعتبار.

يأخذ ملمع الشفاه أسلوبًا معبرًا وتصريحيًا في العرض النهائي. سيشعر المستخدمون المطلعون على CSS وكأنهم في منزلهم مع ملمع الشفاه.

 import "github.com/charmbracelet/lipgloss"

var style = lipgloss . NewStyle ().
    Bold ( true ).
    Foreground ( lipgloss . Color ( "#FAFAFA" )).
    Background ( lipgloss . Color ( "#7D56F4" )).
    PaddingTop ( 2 ).
    PaddingLeft ( 4 ).
    Width ( 22 )

fmt . Println ( style . Render ( "Hello, kitty" ))

الألوان

يدعم ملمع الشفاه ملفات تعريف الألوان التالية:

ANSI 16 لونًا (4 بت)

 lipgloss . Color ( "5" )  // magenta
lipgloss . Color ( "9" )  // red
lipgloss . Color ( "12" ) // light blue

ANSI 256 لونًا (8 بت)

 lipgloss . Color ( "86" )  // aqua
lipgloss . Color ( "201" ) // hot pink
lipgloss . Color ( "202" ) // orange

اللون الحقيقي (16,777,216 لونًا؛ 24 بت)

 lipgloss . Color ( "#0000FF" ) // good ol' 100% blue
lipgloss . Color ( "#04B575" ) // a green
lipgloss . Color ( "#3C3C3C" ) // a dark gray

...فضلاً عن ملف تعريف ASCII ذو 1 بت، وهو باللونين الأبيض والأسود فقط.

سيتم اكتشاف ملف تعريف الألوان الخاص بالجهاز تلقائيًا، وسيتم إجبار الألوان خارج نطاق اللوحة الحالية تلقائيًا على أقرب قيمة متاحة لها.

الألوان التكيفية

يمكنك أيضًا تحديد خيارات الألوان للخلفيات الفاتحة والداكنة:

lipgloss. AdaptiveColor { Light : "236" , Dark : "248" }

سيتم اكتشاف لون خلفية الجهاز تلقائيًا وسيتم اختيار اللون المناسب في وقت التشغيل.

ألوان كاملة

تحدد CompleteColor القيم الدقيقة لملفات تعريف الألوان True Color وANSI256 وANSI.

lipgloss. CompleteColor { TrueColor : "#0000FF" , ANSI256 : "86" , ANSI : "5" }

لن يتم تنفيذ التدهور التلقائي للألوان في هذه الحالة وسيعتمد ذلك على اللون المحدد.

ألوان تكيفية كاملة

يمكنك استخدام CompleteColor مع AdaptiveColor لتحديد القيم الدقيقة للخلفيات الفاتحة والداكنة دون تدهور الألوان تلقائيًا.

lipgloss. CompleteAdaptiveColor {
    Light : CompleteColor { TrueColor : "#d7ffae" , ANSI256 : "193" , ANSI : "11" },
    Dark :  CompleteColor { TrueColor : "#d75fee" , ANSI256 : "163" , ANSI : "5" },
}

التنسيق المضمن

يدعم Lip Gloss خيارات تنسيق النص المعتادة ANSI:

 var style = lipgloss . NewStyle ().
    Bold ( true ).
    Italic ( true ).
    Faint ( true ).
    Blink ( true ).
    Strikethrough ( true ).
    Underline ( true ).
    Reverse ( true )

التنسيق على مستوى الكتلة

يدعم ملمع الشفاه أيضًا قواعد التنسيق على مستوى الكتلة:

 // Padding
var style = lipgloss . NewStyle ().
    PaddingTop ( 2 ).
    PaddingRight ( 4 ).
    PaddingBottom ( 2 ).
    PaddingLeft ( 4 )

// Margins
var style = lipgloss . NewStyle ().
    MarginTop ( 2 ).
    MarginRight ( 4 ).
    MarginBottom ( 2 ).
    MarginLeft ( 4 )

هناك أيضًا صيغة مختصرة للهوامش والحشوة، والتي تتبع نفس تنسيق CSS:

 // 2 cells on all sides
lipgloss . NewStyle (). Padding ( 2 )

// 2 cells on the top and bottom, 4 cells on the left and right
lipgloss . NewStyle (). Margin ( 2 , 4 )

// 1 cell on the top, 4 cells on the sides, 2 cells on the bottom
lipgloss . NewStyle (). Padding ( 1 , 4 , 2 )

// Clockwise, starting from the top: 2 cells on the top, 4 on the right, 3 on
// the bottom, and 1 on the left
lipgloss . NewStyle (). Margin ( 2 , 4 , 3 , 1 )

محاذاة النص

يمكنك محاذاة فقرات النص إلى اليسار أو اليمين أو المركز.

 var style = lipgloss . NewStyle ().
    Width ( 24 ).
    Align ( lipgloss . Left ).  // align it left
    Align ( lipgloss . Right ). // no wait, align it right
    Align ( lipgloss . Center ) // just kidding, align it in the center 

العرض والارتفاع

يعد تحديد الحد الأدنى للعرض والارتفاع أمرًا بسيطًا ومباشرًا.

 var style = lipgloss . NewStyle ().
    SetString ( "What’s for lunch?" ).
    Width ( 24 ).
    Height ( 32 ).
    Foreground ( lipgloss . Color ( "63" ))

الحدود

من السهل إضافة الحدود:

 // Add a purple, rectangular border
var style = lipgloss . NewStyle ().
    BorderStyle ( lipgloss . NormalBorder ()).
    BorderForeground ( lipgloss . Color ( "63" ))

// Set a rounded, yellow-on-purple border to the top and left
var anotherStyle = lipgloss . NewStyle ().
    BorderStyle ( lipgloss . RoundedBorder ()).
    BorderForeground ( lipgloss . Color ( "228" )).
    BorderBackground ( lipgloss . Color ( "63" )).
    BorderTop ( true ).
    BorderLeft ( true )

// Make your own border
var myCuteBorder = lipgloss. Border {
    Top :         "._.:*:" ,
    Bottom :      "._.:*:" ,
    Left :        "|*" ,
    Right :       "|*" ,
    TopLeft :     "*" ,
    TopRight :    "*" ,
    BottomLeft :  "*" ,
    BottomRight : "*" ,
}

هناك أيضًا وظائف مختصرة لتحديد الحدود، والتي تتبع نمطًا مشابهًا لوظائف اختزال الهامش والحشو.

 // Add a thick border to the top and bottom
lipgloss . NewStyle ().
    Border ( lipgloss . ThickBorder (), true , false )

// Add a double border to the top and left sides. Rules are set clockwise
// from top.
lipgloss . NewStyle ().
    Border ( lipgloss . DoubleBorder (), true , false , false , true )

لمعرفة المزيد عن الحدود، راجع المستندات.

أنماط النسخ

مجرد استخدام المهمة:

 style := lipgloss . NewStyle (). Foreground ( lipgloss . Color ( "219" ))

copiedStyle := style // this is a true copy

wildStyle := style . Blink ( true ) // this is also true copy, with blink added

نظرًا لأن هياكل بيانات Style تحتوي على أنواع بدائية فقط، فإن تعيين نمط لآخر يؤدي بشكل فعال إلى إنشاء نسخة جديدة من النمط دون تغيير النمط الأصلي.

الميراث

يمكن للأنماط أن ترث القواعد من الأنماط الأخرى. عند الوراثة، يتم توريث القواعد غير المحددة على المتلقي فقط.

 var styleA = lipgloss . NewStyle ().
    Foreground ( lipgloss . Color ( "229" )).
    Background ( lipgloss . Color ( "63" ))

// Only the background color will be inherited here, because the foreground
// color will have been already set:
var styleB = lipgloss . NewStyle ().
    Foreground ( lipgloss . Color ( "201" )).
    Inherit ( styleA )

قواعد عدم الضبط

يمكن إلغاء تعيين جميع القواعد:

 var style = lipgloss . NewStyle ().
    Bold ( true ).                        // make it bold
    UnsetBold ().                       // jk don't make it bold
    Background ( lipgloss . Color ( "227" )). // yellow background
    UnsetBackground ()                  // never mind

عند عدم تعيين قاعدة، لن يتم توريثها أو نسخها.

إنفاذ القواعد

في بعض الأحيان، كما هو الحال عند تطوير مكون، تريد التأكد من أن تعريفات النمط تحترم الغرض المقصود منها في واجهة المستخدم. هذا هو المكان الذي يأتي فيه Inline و MaxWidth و MaxHeight :

 // Force rendering onto a single line, ignoring margins, padding, and borders.
someStyle . Inline ( true ). Render ( "yadda yadda" )

// Also limit rendering to five cells
someStyle . Inline ( true ). MaxWidth ( 5 ). Render ( "yadda yadda" )

// Limit rendering to a 5x5 cell block
someStyle . MaxWidth ( 5 ). MaxHeight ( 5 ). Render ( "yadda yadda" )

علامات التبويب

يتم عرض حرف علامة التبويب ( t ) بشكل مختلف في أطراف مختلفة (غالبًا 8 مسافات، وأحيانًا 4). وبسبب هذا التناقض، يقوم ملمع الشفاه بتحويل علامات التبويب إلى 4 مسافات في وقت العرض. ومع ذلك، يمكن تغيير هذا السلوك على أساس كل نمط:

 style := lipgloss . NewStyle () // tabs will render as 4 spaces, the default
style = style . TabWidth ( 2 )    // render tabs as 2 spaces
style = style . TabWidth ( 0 )    // remove tabs entirely
style = style . TabWidth ( lipgloss . NoTabConversion ) // leave tabs intact 

التقديم

بشكل عام، ما عليك سوى استدعاء طريقة Render(string...) على lipgloss.Style Style :

 style := lipgloss . NewStyle (). Bold ( true ). SetString ( "Hello," )
fmt . Println ( style . Render ( "kitty." )) // Hello, kitty.
fmt . Println ( style . Render ( "puppy." )) // Hello, puppy.

ولكن يمكنك أيضًا استخدام واجهة Stringer:

 var style = lipgloss . NewStyle (). SetString ( "你好，猫咪。" ). Bold ( true )
fmt . Println ( style ) // 你好，猫咪。

العارضين المخصصين

تسمح لك العارضات المخصصة بالعرض على مخرجات محددة. يعد هذا مهمًا بشكل خاص عندما تريد العرض لمخرجات مختلفة والكشف بشكل صحيح عن ملف تعريف الألوان وحالة الخلفية الداكنة لكل منها، كما هو الحال في موقف الخادم والعميل.

 func myLittleHandler ( sess ssh. Session ) {
    // Create a renderer for the client.
    renderer := lipgloss . NewRenderer ( sess )

    // Create a new style on the renderer.
    style := renderer . NewStyle (). Background (lipgloss. AdaptiveColor { Light : "63" , Dark : "228" })

    // Render. The color profile and dark background state will be correctly detected.
    io . WriteString ( sess , style . Render ( "Heyyyyyyy" ))
}

للحصول على مثال حول استخدام عارض مخصص عبر SSH مع Wish، راجع مثال SSH.

المرافق

بالإضافة إلى التصميم النقي، يأتي ملمع الشفاه أيضًا مع بعض الأدوات المساعدة للمساعدة في تجميع تخطيطاتك.

الانضمام إلى الفقرات

يعد ربط الفقرات أفقيًا وعموديًا أمرًا سهلاً.

 // Horizontally join three paragraphs along their bottom edges
lipgloss . JoinHorizontal ( lipgloss . Bottom , paragraphA , paragraphB , paragraphC )

// Vertically join two paragraphs along their center axes
lipgloss . JoinVertical ( lipgloss . Center , paragraphA , paragraphB )

// Horizontally join three paragraphs, with the shorter ones aligning 20%
// from the top of the tallest
lipgloss . JoinHorizontal ( 0.2 , paragraphA , paragraphB , paragraphC )

قياس العرض والارتفاع

في بعض الأحيان قد ترغب في معرفة عرض وارتفاع الكتل النصية عند إنشاء تخطيطاتك.

 // Render a block of text.
var style = lipgloss . NewStyle ().
    Width ( 40 ).
    Padding ( 2 )
var block string = style . Render ( someLongString )

// Get the actual, physical dimensions of the text block.
width := lipgloss . Width ( block )
height := lipgloss . Height ( block )

// Here's a shorthand function.
w , h := lipgloss . Size ( block )

وضع النص في مسافة بيضاء

في بعض الأحيان قد ترغب ببساطة في وضع كتلة من النص في مسافة بيضاء.

 // Center a paragraph horizontally in a space 80 cells wide. The height of
// the block returned will be as tall as the input paragraph.
block := lipgloss . PlaceHorizontal ( 80 , lipgloss . Center , fancyStyledParagraph )

// Place a paragraph at the bottom of a space 30 cells tall. The width of
// the text block returned will be as wide as the input paragraph.
block := lipgloss . PlaceVertical ( 30 , lipgloss . Bottom , fancyStyledParagraph )

// Place a paragraph in the bottom right corner of a 30x80 cell space.
block := lipgloss . Place ( 30 , 80 , lipgloss . Right , lipgloss . Bottom , fancyStyledParagraph )

يمكنك أيضًا تصميم المسافة البيضاء. للحصول على التفاصيل، راجع المستندات.

جداول التقديم

يأتي ملمع الشفاه مع حزمة فرعية لعرض الجدول.

 import "github.com/charmbracelet/lipgloss/table"

تحديد بعض صفوف البيانات.

 rows := [][] string {
    { "Chinese" , "您好" , "你好" },
    { "Japanese" , "こんにちは" , "やあ" },
    { "Arabic" , "أهلين" , "أهلا" },
    { "Russian" , "Здравствуйте" , "Привет" },
    { "Spanish" , "Hola" , "¿Qué tal?" },
}

استخدم حزمة الجدول لتصميم الجدول وعرضه.

 t := table . New ().
    Border ( lipgloss . NormalBorder ()).
    BorderStyle ( lipgloss . NewStyle (). Foreground ( lipgloss . Color ( "99" ))).
    StyleFunc ( func ( row , col int ) lipgloss. Style {
        switch {
        case row == 0 :
            return HeaderStyle
        case row % 2 == 0 :
            return EvenRowStyle
        default :
            return OddRowStyle
        }
    }).
    Headers ( "LANGUAGE" , "FORMAL" , "INFORMAL" ).
    Rows ( rows ... )

// You can also add tables row-by-row
t . Row ( "English" , "You look absolutely fabulous." , "How's it going?" )

طباعة الجدول.

 fmt . Println ( t )

تحذير

يجب الإعلان عن Rows الجدول قبل Offset وإلا فلن تفعل شيئًا.

لمعرفة المزيد عن الجداول، راجع المستندات والأمثلة.

قوائم التقديم

يأتي ملمع الشفاه مع حزمة فرعية لعرض القائمة.

 import "github.com/charmbracelet/lipgloss/list"

تحديد قائمة جديدة.

 l := list . New ( "A" , "B" , "C" )

طباعة القائمة.

 fmt . Println ( l )

// • A
// • B
// • C

القوائم لديها القدرة على التداخل.

 l := list . New (
    "A" , list . New ( "Artichoke" ),
    "B" , list . New ( "Baking Flour" , "Bananas" , "Barley" , "Bean Sprouts" ),
    "C" , list . New ( "Cashew Apple" , "Cashews" , "Coconut Milk" , "Curry Paste" , "Currywurst" ),
    "D" , list . New ( "Dill" , "Dragonfruit" , "Dried Shrimp" ),
    "E" , list . New ( "Eggs" ),
    "F" , list . New ( "Fish Cake" , "Furikake" ),
    "J" , list . New ( "Jicama" ),
    "K" , list . New ( "Kohlrabi" ),
    "L" , list . New ( "Leeks" , "Lentils" , "Licorice Root" ),
)

طباعة القائمة.

 fmt . Println ( l )

يمكن تخصيص القوائم من خلال وظيفة التعداد الخاصة بها بالإضافة إلى استخدام lipgloss.Style .

 enumeratorStyle := lipgloss . NewStyle (). Foreground ( lipgloss . Color ( "99" )). MarginRight ( 1 )
itemStyle := lipgloss . NewStyle (). Foreground ( lipgloss . Color ( "212" )). MarginRight ( 1 )

l := list . New (
    "Glossier" ,
    "Claire’s Boutique" ,
    "Nyx" ,
    "Mac" ,
    "Milk" ,
    ).
    Enumerator ( list . Roman ).
    EnumeratorStyle ( enumeratorStyle ).
    ItemStyle ( itemStyle )

طباعة القائمة.

بالإضافة إلى العدادات المحددة مسبقًا ( Arabic , Alphabet , Roman , Bullet , Tree )، يمكنك أيضًا تحديد العداد المخصص الخاص بك:

 l := list . New ( "Duck" , "Duck" , "Duck" , "Duck" , "Goose" , "Duck" , "Duck" )

func DuckDuckGooseEnumerator ( l list. Items , i int ) string {
    if l . At ( i ). Value () == "Goose" {
        return "Honk →"
    }
    return ""
}

l = l . Enumerator ( DuckDuckGooseEnumerator )

طباعة القائمة:

إذا كنت بحاجة، يمكنك أيضًا إنشاء قوائم بشكل متزايد:

 l := list . New ()

for i := 0 ; i < repeat ; i ++ {
    l . Item ( "Lip Gloss" )
}

تقديم الأشجار

يأتي ملمع الشفاه مع حزمة فرعية لتجسيد الشجرة.

 import "github.com/charmbracelet/lipgloss/tree"

تحديد شجرة جديدة.

 t := tree . Root ( "." ).
    Child ( "A" , "B" , "C" )

طباعة الشجرة.

 fmt . Println ( t )

// .
// ├── A
// ├── B
// └── C

الأشجار لديها القدرة على التعشيش.

 t := tree . Root ( "." ).
    Child ( "macOS" ).
    Child (
        tree . New ().
            Root ( "Linux" ).
            Child ( "NixOS" ).
            Child ( "Arch Linux (btw)" ).
            Child ( "Void Linux" ),
        ).
    Child (
        tree . New ().
            Root ( "BSD" ).
            Child ( "FreeBSD" ).
            Child ( "OpenBSD" ),
    )

طباعة الشجرة.

 fmt . Println ( t )

يمكن تخصيص الأشجار من خلال وظيفة التعداد الخاصة بها بالإضافة إلى استخدام lipgloss.Style .

 enumeratorStyle := lipgloss . NewStyle (). Foreground ( lipgloss . Color ( "63" )). MarginRight ( 1 )
rootStyle := lipgloss . NewStyle (). Foreground ( lipgloss . Color ( "35" ))
itemStyle := lipgloss . NewStyle (). Foreground ( lipgloss . Color ( "212" ))

t := tree .
    Root ( "⁜ Makeup" ).
    Child (
        "Glossier" ,
        "Fenty Beauty" ,
        tree . New (). Child (
            "Gloss Bomb Universal Lip Luminizer" ,
            "Hot Cheeks Velour Blushlighter" ,
        ),
        "Nyx" ,
        "Mac" ,
        "Milk" ,
    ).
    Enumerator ( tree . RoundedEnumerator ).
    EnumeratorStyle ( enumeratorStyle ).
    RootStyle ( rootStyle ).
    ItemStyle ( itemStyle )

طباعة الشجرة.

التعدادات المحددة مسبقًا للأشجار هي DefaultEnumerator و RoundedEnumerator .

إذا كنت بحاجة، يمكنك أيضًا بناء الأشجار بشكل تدريجي:

 t := tree . New ()

for i := 0 ; i < repeat ; i ++ {
    t . Child ( "Lip Gloss" )
}

---

التعليمات

لماذا تسير الأمور في غير موضعها؟ لماذا تكون الحدود بعرض خاطئ؟

يرجع هذا على الأرجح إلى الإعدادات المحلية والتشفير، خاصة فيما يتعلق باللغات الصينية واليابانية والكورية (على سبيل المثال، zh_CN.UTF-8 أو ja_JP.UTF-8 ). الطريقة الأكثر مباشرة لإصلاح ذلك هي تعيين RUNEWIDTH_EASTASIAN=0 في بيئتك.

لمزيد من التفاصيل، راجع https://github.com/charmbracelet/lipgloss/issues/40.

لماذا لا يعرض ملمع الشفاه الألوان؟

يقوم ملمع الشفاه تلقائيًا بتخفيض الألوان إلى أفضل خيار متاح في الجهاز المحدد، وإذا لم يكن الإخراج TTY، فسيقوم بإزالة إخراج اللون بالكامل. يعد هذا أمرًا شائعًا عند إجراء الاختبارات أو CI أو عند توصيل الإخراج إلى مكان آخر.

إذا لزم الأمر، يمكنك فرض ملف تعريف الألوان في اختباراتك باستخدام SetColorProfile .

 import (
    "github.com/charmbracelet/lipgloss"
    "github.com/muesli/termenv"
)

lipgloss . SetColorProfile ( termenv . TrueColor )

ملاحظة: يحد هذا الخيار من مرونة التطبيق الخاص بك ويمكن أن يتسبب في إخراج أكواد الهروب ANSI في الحالات التي قد لا يكون فيها ذلك مرغوبًا. انتبه جيدًا لحالة الاستخدام والبيئة الخاصة بك قبل اختيار فرض ملف تعريف الألوان.

ماذا عن شاي الفقاعات؟

ملمع الشفاه لا يحل محل شاي الفقاعات. بل هو رفيق ممتاز لشاي الفقاعات. لقد تم تصميمه لجعل تجميع طرق عرض واجهة المستخدم الطرفية أمرًا بسيطًا وممتعًا قدر الإمكان حتى تتمكن من التركيز على بناء التطبيق الخاص بك بدلاً من الانشغال بتفاصيل التخطيط ذات المستوى المنخفض.

بعبارات بسيطة، يمكنك استخدام ملمع الشفاه للمساعدة في بناء إطلالاتك على Bubble Tea.

تحت غطاء محرك السيارة

تم بناء Lip Gloss على مكتبات Termenv وReflow الممتازة التي تتعامل مع عمليات الألوان والنص المتوافقة مع ANSI، على التوالي. بالنسبة للعديد من حالات الاستخدام، سيكون Termenv وReflow كافيين لاحتياجاتك.

تقديم تخفيض السعر

للحصول على حل عرض أكثر تركيزًا على المستندات مع دعم لأشياء مثل القوائم والجداول والتعليمات البرمجية المميزة لبناء الجملة، قم بإلقاء نظرة على Glamour، عارض Markdown المستند إلى ورقة الأنماط.

المساهمة

انظر المساهمة.

تعليق

نحن نحب أن نسمع أفكارك حول هذا المشروع. لا تتردد في ترك لنا ملاحظة!

• تغريد
• فيديفيرس
• الفتنة

رخصة

معهد ماساتشوستس للتكنولوجيا

---

جزء من سحر.

سحر热爱开源 • سحر يحب المصادر المفتوحة