Position and Align Text inside a react-blessed <box> Element

栏目: IT技术 · 发布时间: 4年前

内容简介:The above video is hosted onThis is the7thpost in a series where we will be creating a developer dashboard in the terminal using... ~20 more lessons to come ...

The above video is hosted on egghead.io .

This is the7thpost in a series where we will be creating a developer dashboard in the terminal using react-blessed and react-blessed-contrib . For more information about the series and to take a sneak peak at what we're building, go to the 1st post in the series for more context.

  1. Bootstrap react-blessed Application
  2. Add ESLint Rules to react-blessed App
  3. Change text font with figlet
  4. Extract Component and Add useInterval hook
  5. Fetch and display current weather with weather-js
  6. Extract custom hook to simplify data fetching
  7. Change text color with chalk and gradient-string
  8. Position and Align Text inside a <box> Element

... ~20 more lessons to come ...

NOTE: You can find the code for this project in GitHub and you watch the whole Build a Terminal Dashboard with React video series on egghead.io .

Current Application

Here we have the beginnings of a React Terminal Dashboard. If we come to the terminal and kick off our app with npm start you'll see a sightly colored version displaying the date, current time and weather information.

Position and Align Text inside a react-blessed <box> Element

However, at this point everything is left aligned. So let's explore about positioning elements with-in the box.

Replace String Template Literal with <text> Elements

Currently we've been handling position with a multi-line string template literal, but that is pretty limiting.

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
      {`${chalk.blue(date)}

${gradient.atlas.multiline(time)}

${
  weather.status === 'loading'
    ? 'Loading...'
    : weather.error
    ? `Error: ${weather.error}`
    : formatWeather(weather.data)
}`}
    </box>
  );
}

So first, let's take each piece of information (date, time, and weather) and put them into <text> elements.

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text>
            {chalk.blue(date)}
        </text>
        <text>
            {gradient.atlas.multiline(time)}
        </text>
        <text>
            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

If we run our app now, we'll see that all the content is overlapped on top of each-other, which isn't what we want.

Position and Align Text inside a react-blessed <box> Element

Vertically Center Time and Bottom Align Weather

If we come back to our code, we can adjust where the text gets displayed by adding a top prop. For now, we'll leave the date variable as-is, but for the time we'll add a top prop of "center" . And for the weather we'll add a top prop of "100%" .

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text>
            {chalk.blue(date)}
        </text>
        <text top="center">            {gradient.atlas.multiline(time)}
        </text>
        <text top="100%">            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

Now, if we run our app again, we'll see that things look a "bit" better, but not quite what we wanted. The weather information is outside the boxed area.

Position and Align Text inside a react-blessed <box> Element

Fix Weather Alignment with Relative Adjustment

We technically don't want the top of our text to be the very bottom of the box. Thankfully the position props understand relative offsets, so we modify the position by adding a "-3" after the "100%".

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text>
            {chalk.blue(date)}
        </text>
        <text top="center">
            {gradient.atlas.multiline(time)}
        </text>
        <text top="100%-3">            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

Now, if we run our app our, the weather information will now be in-side the box. Yay!

Position and Align Text inside a react-blessed <box> Element

NOTE: Instead of using top="100%-3" we could have used bottom={0} to fix the issue. This is actually preferable since you don't have to worry about adjusting for the height of the text.

Horizontally Align Weather and Right Align Date

Now let's focus on getting our date to be right aligned in the box. To do that, we'll add a prop of right and set it to the number 0 . It's important you use a number here and not the string of "0" .

In addition, let's do a little alignment of the time as well. We'll horizontally center the time in the box by adding a left prop of "center" .

export default function Today() {
  /* ... */
  return (
    <box { /* ... */ }>
        <text right={0}>            {chalk.blue(date)}
        </text>
        <text top="center" left="center">            {gradient.atlas.multiline(time)}
        </text>
        <text top="100%-3">
            {weather.status === 'loading'
                ? 'Loading...'
                : weather.error
                ? `Error: ${weather.error}`
                : formatWeather(weather.data)}
        </text>
    </box>
  );
}

Now, when we run our app you'll see that our date is indeed aligned to the right and our time is not only centered vertically, but also horizontally.

Position and Align Text inside a react-blessed <box> Element

Give Date and Weather a Little Breathing Room

The elements look nicer than before, but the date and weather are hugging the edge of the box a bit too close for my liking.

So, let's come back to our code and do a little adjustment. For the date we'll modify the right prop to be 1 instead of 0 . And for the weather we'll add a left prop of 1 (which will push it over just a little bit).

export default function Today() {
  /* ... */
  return (
    <text right={1}>        {chalk.blue(date)}
    </text>
    <text top="center" left="center">
        {gradient.atlas.multiline(time)}
    </text>
    <text top="100%-3" left={1}>        {weather.status === 'loading'
            ? 'Loading...'
            : weather.error
            ? `Error: ${weather.error}`
            : formatWeather(weather.data)}
    </text>
  );
}

And now when we run our app, our elements all look nicely aligned.

Position and Align Text inside a react-blessed <box> Element

Conclusion

This concludes the Today component. In following lessons we'll talk about laying out sections in our dashboard, creating other components (such as Time Log, Pomodoro, Recent Commits, etc...), and covering other interesting topics along the way.

Change text color with `chalk` and `gradient-string` inside `react-blessed`


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

产品增长力

产品增长力

李阳 / 机械工业出版社 / 2018-4-1 / 59

本书由京东资深数据产品经理撰写,重新定义了数据与产品、业务的关系,从数据分析方法、数据价值挖掘、数据结果倒逼业务优化3个层次,以及设计、运营和优化3个维度,为产品增长提供了科学的依据和方法论,得到了PMCaff创始人阿德、GrowingIO创始人&CEO张溪梦、增长官研究院创始人范冰、腾讯高级产品经理刘涵宇等专家的高度评价。 全书内容以理论为主线,以实操为目标,萃取技术实操与管理思维中的精华......一起来看看 《产品增长力》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

MD5 加密
MD5 加密

MD5 加密工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具